To start my objective is to center my title. I have started a project by selecting the bottom navigation activity template. This came with 3 fragments and a main activity. I am attempting to center the title of the top action bar. I have attempted to access the mobile_navigation by id and align the text within the MainActivity but this does not seem to work. I also tried adding a textAlignment attribute in the homeFragment.xml but this did not work either. I do not find any similar scenarios anyone know how could I be able to resolve this?
mobile_navigation.xml:
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mobile_navigation"
app:startDestination="#+id/navigation_home">
<fragment
android:id="#+id/navigation_home"
android:name="com.Example.exmaple.ui.home.HomeFragment"
android:label="#string/app_name"
tools:layout="#layout/fragment_home" />
<fragment
android:id="#+id/navigation_dashboard"
android:name="com.Example.exmaple.ui.dashboard.DashboardFragment"
android:label="#string/title_dashboard"
tools:layout="#layout/fragment_dashboard" />
<fragment
android:id="#+id/navigation_notifications"
android:name="com.Example.exmaple.ui.notifications.NotificationsFragment"
android:label="#string/title_notifications"
tools:layout="#layout/fragment_notifications" />
</navigation>
I also attempted to add:
android:gravity="center"
Any feedback welcomed.
To use a custom title in your Toolbar all you need to do is remember is that Toolbar is just a fancy ViewGroup so you can add a custom title like so:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
This means that you can style the TextView however you would like because it's just a regular TextView. So in your activity you can access the title like so:
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
setSupportActionBar(toolbar);
mTitle.setText(toolbar.getTitle());
getSupportActionBar().setDisplayShowTitleEnabled(false);
Try below code may works for you
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.abs_layout);
Better add a layout file for tool bar and center the title there and add dynamically on create or include in your fragment layout file.
I was able to figure out the solution. I will post it incase anyone runs across this issue.
I added the following to the Main Activity xml:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolBar"
android:elevation="5dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBlack">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorTransparent"
android:layout_alignParentStart="true"
android:layout_gravity="start"
android:text="#string/log_out"
android:textAlignment="center"
android:textColor="#color/lightblue"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#color/colorApp"
android:textSize="20sp"/>
<ImageButton
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/ic_add"
android:tint="#color/lightblue"
android:layout_alignParentEnd="true"
android:layout_gravity="end"
android:background="#color/colorBlack" />
</androidx.appcompat.widget.Toolbar>
I also took away the padding top from the androidx.constraintlayout.widget.ConstraintLayout opening tag in the Main Activity XML
Added the following style to styles.xml:
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
Finally in the Android manifest I added the following theme to the Main Acivity:
android:theme="#style/AppTheme.NoActionBar"
Related
I have the following part of XML which generates a toolbar in my profile fragment with a black background and profile written in it.
I'm trying though to center the profile but nothing seems to work. Any suggestions?
<fragment
android:id="#+id/navigation_home"
android:name="com.example.myapp_android.ui.home.HomeFragment"
android:label="#string/title_home"
tools:layout="#layout/fragment_home" />
I tried adding to the <fragment android:label_gravity = "center" and android:gravity = "center"
but none of them moved the profile text.
Toolbars can have childview so you can use TextView inside of a toolbar
Use this :
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Toolbar"
android:textSize="20sp"
android:textStyle="bold"/>
</androidx.appcompat.widget.Toolbar>
I want to design a toolbar like:.
I have done most of it but having some problem.
I don't know how to make a divider between the toolbars items and also having no idea how to set a counter variable attached to the action button that increment as order takes place like given in the picture.
Any suggestions?
You can place your layout like below:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionLayout="#layout/your_layout_here"/>
or
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionViewClass="your_class"/>
where "your_class" - class which inflate and implement your view with separator
Try to create a custom toolbar. Add your views between the toolbar's opening and closing tags.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dip"
android:background="#ff0000">
<!-- the back button -->
<ImageView
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:clickable="true"
android:onClick="onBackButtonClick"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:src="#drawable/ic_back" />
...
<!-- the devider -->
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#ffffff" />
<ImageView .../>
</android.support.v7.widget.Toolbar>
I've searched for this question but haven't found a useful answer yet.
I am trying to create a Toolbar with some kind of edittext inside of it.
It should look like this:
How should my XML file look like? Currently it looks like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/activity_main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="8dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/activity_main_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/title"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:textSize="22sp"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>
The activity looks like this:
private Toolbar toolbar;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.acitivty_main);
toolbar = (Toolbar)findViewbyid(R.id.activity_main_toolbar);
setSupportActionbar(toolbar);
}
But the result is some Edittext which is right in the center of the Toolbar, letting no space for the toolbar title (please ignore the "save" menu button)
Now my question is,
How do I correctly add one or more views to the toolbar below the main actionbar height?
Could you recommend me some example or tutorial page?
What kind of EditText is used in the shown image with the floating hint?
Thanks in advance
Well first I think it easy to answer the second and third question first, you can find that information in the "Android Developer Blog" in "Android Design Support Library". Here the link:
http://android-developers.blogspot.co.uk/2015_05_01_archive.html
Just scroll down till you find the section called "Floating labels for editing text" and sorted.
Now for the first question, what I did was I made a "Toolbar" layout (won't be able to elaborate too much here as I'm busy at the moment) and then added it to the layout. The code is below:
Toolbar Layout:
<?xml version="1.0" encoding="utf-8"?>
<!-- NOTE: Use To Maintain Structure Of Actionbar -->
<Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:background="#009688"
android:id="#+id/toolBar"
android:elevation="2dp">
<!-- NOTE: Required For Top Section Structure -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<EditText
android:background="#android:color/transparent"
android:hint="#string/note_title"
android:textColorHint="#FFFFFF"
android:id="#+id/actionTitle"
android:paddingRight="16dp"
style="#style/ActionText"/>
<TextView
android:id="#+id/textDate"
style="#style/ActionDate"/>
</LinearLayout>
</Toolbar>
Adding it to the Layout File
<?xml version="1.0" encoding="utf-8"?>
<!-- NOTE: Layout For Edit Note Activity -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- NOTE: Assigned Custom Toolbar -->
<include
android:id="#+id/toolBar"
layout="#layout/tool"/>
</RelativeLayout>
And that should sort you out (You can then mess about with the actionbar properties to clean it up aka: getActionBar().setElevation(0); and
getActionBar().setTitle("");
I am using Appcompat library to get the supportActionBar in my ActionBarActivity. Now I am facing another challenge and it's how to add toolbar under that actionbar, something like facebook app has. Any ideas how to do it?
Once you call setSupportActionBar(toolbar), you agreed that the ActionBar will be replaced with Toolbar. I believe that Facebook app uses sliding Tab, instead of ActionBar below Toolbar, but they designed it as pretty as possible. Android only allows us to set one ActionBar, no more. Think that you override onCreateOptionsMenu, where are the Menu items will be placed?
I believe they implement something like a slidingtablayout. Have a look at this link, the Google developers docs have example code for it.
https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html
Just add android.support.v7.widget.Toolbar in your layout for that activity but don't call setActionBar(Toolbar) in your onCreate(). The Toolbar can have normal Views inside it, like Button, TextView, etc. which you can get handles of using the usual findViewById().
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/bg_gradient_start"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/toolbarBackButton"
android:layout_width="72dp"
android:layout_height="48dp"
android:layout_gravity="left|center_vertical"
android:background="#android:color/transparent"
android:text="#string/back"
android:textColor="#drawable/button_text_color" />
<TextView
android:id="#+id/toolbarTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
tools:text="Title" />
<Button
android:id="#+id/toolbarNextButton"
android:layout_width="72dp"
android:layout_height="48dp"
android:layout_gravity="right|center_vertical"
android:background="#android:color/transparent"
android:text="#string/next"
android:visibility="gone"
tools:visibility="visible"
android:textColor="#drawable/button_text_color" />
</FrameLayout>
</android.support.v7.widget.Toolbar>
In activity_main.xml I have
<include layout="#layout/toolbar" />
Then in your onCreate() you can just findViewById(R.id.toolbarBackButton) or any id you want to use, same as other views.
With the new Lollipop API, we have to use a Toolbar if we want to personalize the action bar aspect.
Adding a ProgressBar to the Toolbar is as simple as adding it to the Toolbar ViewGroup, as Chris Banes said.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/material_green_500"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Color is Brown 500 -->
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in"/>
</android.support.v7.widget.Toolbar>
But how can we place it at the right of the Toolbar, where it belongs?
The layout_gravity attribute seems to not be defined for the Toolbar. Setting it from the xml has no effect.
I tried to change the width of the ProgressBar, with no success.
What do I do?
EDIT: There is a programmatical solution to this problem, see #mdelolmo reply for that.
You can try this. It worked for me. Key here is to define layout_gravity in the xml: android:layout_gravity="right"
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/material_green_500"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Color is Brown 500 -->
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
I also hit the same wall, but programmatically it works:
Toolbar.LayoutParams layoutParams = new Toolbar.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
Gravity.TOP | Gravity.RIGHT);
In my snippet, I align it to the top, to match the alignment of the menu.
A workaround to create the layout completely in xml would be replacing the toolbar content with your own relative layout. To do that, you need to fake the activity title (and also the navigation icon if you are using one), which is literally nesting the following in your Toolbar block.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:paddingRight="2dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textSize="20sp"
android:fontFamily="sans-serif-medium" />
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in" />
</RelativeLayout>
Note that 20sp sans-serif-medium is the font used in lollipop toolbar, you might need to adjust the text view parameters to make it look natural in earlier versions.