Develop Reference

How to position subtitle above title in Android Toolbar?

I am using
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?android:attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp" />
with
Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setTitle(myTitle);
toolbar.setSubtitle(mySubtitle);
to set the title and subtitle in my Toolbar. They are displayed with the subtitle beneath the title.
However, how can I make the subtitle appear above the title?
To get the desired effect, I could make the title look like a subtitle (and vice versa), but is there a better, non-hacky solution?

If you want subtitle textview above title then use linear layout with vertical orientation or if you want it on top of the title use a relative layout and remove orientation:
<?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/white"
app:elevation="0dp"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Textview
android:id="#+id/Subtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Subtitle"
/>
<Textview
android:id="#+id/Title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Title"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>

Android Changing Shape of The Back Button

The back button on the action bar of my app seems a little large. When I hold my finger on it on my phone the button highlights and I can see the right side of it is rounded out pushing over the text.
How can I make the button square and move the text closer to the left side of the action bar instead of being more out to the middle?

Try setting a custom drawable for your Toolbar's back navigation icon
ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.ic_back);
ab.setDisplayShowHomeEnabled(true);
ab.setDisplayHomeAsUpEnabled(true);
Or if you want precise decoration use a custom toolbar layout,
<?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"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:minHeight="?android:attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ToolbarStyle">
<!-- Left side layout-->
<LinearLayout
android:id="#+id/layout_left_container"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="start|center"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:gravity="center|start"
android:orientation="horizontal">
<ImageButton
android:id="#+id/iv_left_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txt_left_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLength="30"
android:singleLine="true"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>

you can use toolbar property for this
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
like this use in toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp" />

Title image alignment in toolbar android

Why image in toolbar not align in center when remove the menu items in android.
If i have hide the menu items the title moved right.that is some spaces added between navigation icon and title.
My code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetRight="0dp"
app:contentInsetStartWithNavigation="0dp"
android:background="#FFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:id="#+id/pg_title"
android:layout_centerHorizontal="true"
android:src="#drawable/logo"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>

try this add this toolbar in your layout xml file
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay">
<include layout="#layout/actionbar_layout" />
</android.support.v7.widget.Toolbar>
create a new actionbar_layout for your toolbar like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_bike" />
</LinearLayout>
now in your activity file just add below code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("");
ask me in case of any query

Can't set title of toolbar that is inside an AppBarLayout

I have a toolbar inside of an AppBarLayout like this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<ImageButton
android:id="#+id/editButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="16dp"
android:scaleType="fitCenter"
android:background=
"?attr/selectableItemBackgroundBorderless"
android:contentDescription="Post"
android:src="#drawable/ic_mode_edit_24dp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
In my Activity.OnCreate() I try to set the title like this:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Edit");
(Not sure if this matters but..) After that I inflate a fragment:
MyFragment fragment = new MyFragment();
fragment.setArguments(savedInstanceState);
// Add fragment with tag
getSupportFragmentManager().beginTransaction()
.add(R.id.content_frame, fragment, "my_frag")
.commit();
However, this has no effect. In fact, there is no title at all. Is this because I have a LinearLayout inside of the Toolbar or something? Or because of the AppBarLayout?

you need to add a TextView inside the ToolBar
EDIT: something like this
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
android:elevation="2dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/beermap"
android:textColor="#color/white"
android:textSize="22sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

Use getSupportActionBar().setTitle(getString(R.string.title)); within the activity. This can be done in onCreate should be done whenever the locale is changed

If your toolbar is inside a collapsing toolbar layout
public void setToolbarTitle(String s){
Log.d(TAG, "setToolbarTitle: " + s);
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);
collapsingToolbarLayout.setTitle(s);
}

Here is how to make the textview look exactly like default:
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/beermap"
android:textColor="#color/white"
android:textSize="20sp"
android:fontFamily="sans-serif-medium" />
The key part being 20sp textsize and android:fontFamily="sans-serif-medium"

Align the text in the toolbar with the icons

Here's how my toolbar currently looks. The text seems completely mislaid.
Here's the code:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/blue_grey_900"
android:gravity="center"
android:minHeight="?android:attr/actionBarSize"
app:popupTheme="#style/ToolbarPopup"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:elevation="5dp"/>
What's causing the misalignment?

change your code to android:layout_height="?attr/actionBarSize

You can use a custom TextView in your XML like:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/blue_grey_900"
android:gravity="center"
android:minHeight="?android:attr/actionBarSize"
app:popupTheme="#style/ToolbarPopup"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:elevation="5dp">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
Then you can customize it or place the title anywhere you want.