Develop Reference

Android: CollapsingToolbarLayout centers expanded text but not collapsed text

I have a CollapsingToolbarLayout that is defined to center both in collapsed and in expanded modes:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="286dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="center"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
<ImageView
android:id="#+id/someIcon"
android:layout_width="56dp"
android:layout_height="wrap_content"
android:src="#drawable/some_icon"
android:padding="16dp"
android:layout_gravity="top|end"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I define a title for the toolbar but when I collapse it I can see the title moving in a diagonal direction instead of straight up and it aligns itself slightly to the right of the center of the toolbar line. Notice that the width is match_parent and the collapsed gravity is center, so why could this be happening and how should I fix it?
• First screenshot: what it looks like if I use collapse -> center and expanded -> center gravities and then collapse the layout. Notice that it's to the right of the center of the screen.
• Second screenshot: what it looks like if I get rid of collapse -> center gravity but leave expanded -> center gravity and then collapse the layout. Notice that it's aligned left by default.
• Third screenshot: what it looks like expanded
Things that I've tried so far to solve this (without success):
• Getting rid of the collapsedGravity and leaving only the expandedGravity
• Using the default roboto font for the title
• Setting padding and margins to 0 for both the toolbar and the collapsing layout
• setting gravity center_horizontal instead of center
Edit:
The only workaround I've found that makes this work properly is to use a separate textview to hold the title instead of setting the title for the collapsingtoolbarlayout (this makes the title collapse properly to the center). This isn't optimal so I'd appreciate knowing if the CPL has a bug in it or if there's a way to use the default title to do the same thing.

You need to set app:contentInsetStart and app:contentInsetLeft properties to 0dp.
<android.support.v7.widget.Toolbar
..
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"/>

It may be late, but what I found is, the your title is in center in the title's view and not the whole toolbar. It happened with me, when I didn't had the up/back button on the left and had a single icon on the right.
So if you have back/up button, it should be exactly in the center because on the left and right you have 1 icon. But, this didn't happened because when you set the up/back button, it adds some right margin (you can see this behavior on the normal toolbar, with left title gravity).
So by considering that, the in the remaining area, your title is in the center. But, not center considering toolbar's width, center in title view's available width.
EXPERIMENT: You can try adding a second icon on the right and it will be very much in the center. Just a hack. Ugly hack.

Setting content related properties to 0dp (app:contentInsetLeft="0dp", android:contentInsetLeft="0dp", app:contentInsetStart="0dp", android:contentInsetStart="0dp", app:contentInsetStartWithNavigation="0dp") might help you. Here is my working Toolbar.
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="center|center_horizontal"
app:collapsedTitleTextAppearance="#style/CollapsedAppBar"
app:expandedTitleTextAppearance="#style/ExpandedAppBar"
app:statusBarScrim="#color/colorPrimaryDark"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMargin="#dimen/large_padding"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/comImage1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:src="#drawable/bg"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
app:contentInsetLeft="0dp"
android:contentInsetLeft="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetStart="0dp"
android:contentInsetStart="0dp"
app:theme="#style/ToolbarTheme"
android:gravity="center_horizontal"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleMargin="0dp"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
Hope it will help :)

You need to set app:expandedTitleGravity="center"
and remove app:collapsedTitleGravity="center" from your code like
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
Hope this helps you

Align toolbar title in android

This is my toolbar
I want change my title of toolbar like this:
I search about this but i cant find any result.
This is my toolbar code:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/AppTheme.Toolbar"
app:titleTextAppearance="#style/AppTheme.Toolbar.Title"
>

Try to add this to your action_bar.xml
android:layout_margin="10dp"
EDIT:
I would put them together inside a LinearLayout (horizontal) and then add the above command

I think android is treating it as a normal view
So add this java code so that it can change the look of toolbar
Add in java
setSupportActionBar(findViewById(R.id.your_toolbar_id));

Remove Tabs layout's shadow in android. API >= 21

I wanna remove this shadow from the TabLayout, but in api 21 nothing is working. I've tried defining windowContentOverlay to #null or elevation to 0dp or #null, but not seems to work.
Could someone help me?
http://i.stack.imgur.com/Qh7ml.png
Heres is a screenschot.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
style="#style/tabs"
android:layout_width="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
style="#style/tabs"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

I am facing same problem and windowContentOverlay to #null also not worked for me. But when I changed android.support.design.widget.CoordinatorLayout and android.support.design.widget.AppBarLayout to LinearLayout it worked for me and bottom shadow of tablayout get removed.
I was tried with custom styles for android.support.design.widget.CoordinatorLayout and android.support.design.widget.AppBarLayout but did not get any success.
For now I keeping it in LinearLayout to remove bottom shadow.

Set app:elevation="0dp" in your AppBarLayout (maybe in the TabLayout too..)

Extended Toolbar with Custom View not Displaying with Full Width

I went through lots of answers here related to Toolbar but none of the answers could help me.
What I'm trying to achieve is to have an extended toolbar whhich will display a logo, possibly a name of the Activity/App, it will have an action button/drawer toggle to the right that will display a navigation-like drawer to the right, an overflow menu with other options like settings and also a navigation Tab at the bottom that will allow the user to move between different fragments (different days in a month).
The way I'm trying to achieve this is through toolbar.
First I create the toolbar and add my custom view.
<?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_actionbar"
android:layout_width="match_parent"
android:layout_height="#dimen/min_double_toolbar_height"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:minHeight="?attr/actionBarSize"
android:background="#color/primary"
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
android:clipToPadding="false"
>
<!-- ThemeOVerlay Makes sure the text and items are using solid colors-->
<include
android:layout_width="match_parent"
android:layout_height="72dp"
android:layout_gravity="bottom"
layout="#layout/day_navigation_tab"
/>
</android.support.v7.widget.Toolbar>
day_navigation_tab is just a horizontal with Two image views with Padding of 72dp (as by guidelines) and a text view with layout weight set to 1 so it stretches for the whole available space. And a height of 72dp.
Now in my BaseActivity XML I include the toolbar in the Framelayout of the main context (otherwise the toolbar would cover the whole screen for an unknown reason for me (took me ages to figre that out))
<...ommited>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/app_bar"
/>
</FrameLayout>
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead. -->
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="right"
android:name="alterway.agency.timeentry.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer"
app:layout="#layout/fragment_navigation_drawer"
/>
</android.support.v4.widget.DrawerLayout>
However, when I use the toolbar I inflate the Menu on the actionBar in onCreateOptionsMenu my custom view gets shrinked and won't extend the edge of the created options.
A picture below illustrates that better, It's a screenshot from a Design View in Android Studio.
Yellow rectangle indicates where the option items will be placed.
Purple indicates the original size in the DesignView. Black indicates the size when running the app.
Thank you for any help.
Related questions that might be useful to anybody who comes across this looking to solve a similar problem:
design - Support Toolbars custom view not using full width
How do I set up an extended toolbar on Android L

So in order to achieve this and have complete control over the padding in the toolbar I created two toolbars. The first toolbar with standard height of 56dp and second with height of 72dp which together made a double layered toolbar as specified by material design.
And because I am not inflating any menu items in the second toolbar all my cusotm views inside behave as desired.
These lines still need to be used though
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
android:clipToPadding="false"
This solved my issue so now I'm including two toolbars into my XMl.

since versions 23 of the design support libraries there is a much simpler way to do it using android.support.design.widget.CoordinatorLayout
This is an example:
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/project_light_green"
android:orientation="horizontal"
android:paddingLeft="#dimen/activity_horizontal_margin_half"
android:paddingRight="#dimen/activity_horizontal_margin_half"
android:paddingTop="#dimen/activity_vertical_margin_half">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_margin="12dp"
android:src="#drawable/ic_search_24dp" />
<EditText
android:id="#+id/search_field"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="#null"
android:hint="#string/autocomplete_hint"
android:singleLine="true"
android:textColor="#color/project_black"
android:textColorHint="#color/project_dark_gray"/>
<include layout="#layout/close_button"
android:id="#+id/clearButton"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_search_location" />
</android.support.design.widget.CoordinatorLayout>

From the Toolbar documentation:
One or more custom views. The application may add arbitrary child
views to the Toolbar. They will appear at this position within the
layout. If a child view's Toolbar.LayoutParams indicates a Gravity
value of CENTER_HORIZONTAL the view will attempt to center within the
available space remaining in the Toolbar after all other elements have
been measured.
So from what it look like, your custom view is behaving as it should. The options menu is taking up a certain amount of space in your toolbar, so the Toolbar is measuring the remaining space for your custom view to fit in.

Android API 21 Toolbar Padding

How do I get rid of the extra padding in the new Toolbar with Android SDK API version 21 (the support library)?
I am talking about the red arrows on this picture:
Here is the code I am using:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:padding="0dp"
android:layout_margin="0dp">
<RelativeLayout
android:id="#+id/action_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:padding="0dp"
android:background="#000000">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</Toolbar>
As you can see I've set all the relevant padding to 0, but there is still padding around the Spinner. What have I done wrong or what do I need to do to get rid of the extra padding?
Edit
Some have questioned why I am trying to do this.
As per the Material Design specs, the spinner should be 72dp from the left side
I need to neutralize the padding Google have put there in order to properly place my spinner:
Edit 2
As per Chris Bane's answer below I set the contentInsetStart to 0. For the support library you will need to use the app namespace:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="#dimen/action_bar_height"
android:background="?attr/colorPrimary"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v4.widget.DrawerLayout>

The left inset is caused by Toolbar's contentInsetStart which by default is 16dp.
Change this to 72dp to align to the keyline.
Update for support library v24.0.0:
To match the Material Design spec there's an additional attribute contentInsetStartWithNavigation which by default is 16dp. Change this if you also have a navigation icon.

Above answer is correct but there is still one thing that might create issues (At least it did create an issue for me)
I used the following and it doesn't work properly on older devices -
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
The trick is here just use the following -
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
and get rid of -
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
And now it should work fine throughout all the devices.

Simpley add this two line in toolbar. Then we get new removed left side space bcoz by default it 16dp.
android:contentInsetStart="0dp"
app:contentInsetStart="0dp"

In case someone else stumbles here... you can set padding as well, for instance:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
int padding = 200 // padding left and right
toolbar.setPadding(padding, toolbar.getPaddingTop(), padding, toolbar.getPaddingBottom());
Or contentInset:
toolbar.setContentInsetsAbsolute(toolbar.getContentInsetLeft(), 200);

A combination of
android:padding="0dp"
In the xml for the Toolbar
and
mToolbar.setContentInsetsAbsolute(0, 0)
In the code
This worked for me.

Here is what I did and it works perfectly on every version of Android.
toolbar.xml
<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="56dp"
android:background="#color/primary_color"
app:theme="#style/ThemeOverlay.AppCompat"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp" <!-- Add margin -->
android:layout_marginStart="16dp"
android:gravity="left|center"
android:text="Toolbar Title" <!-- Your title text -->
android:textColor="#color/white" <!-- Matches default title styles -->
android:textSize="20sp"
android:fontFamily="sans-serif-medium"/>
</android.support.v7.widget.Toolbar>
MyActivity.java (To hide default toolbar title)
getSupportActionBar().setDisplayShowTitleEnabled(false); // Hide default toolbar title
Result with Keylines Shown

Make your toolbar like:
<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/menuToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/white"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:minHeight="?attr/actionBarSize"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"></android.support.v7.widget.Toolbar>
You need to add
contentInset
attribute to add spacing
please follow this link for more - Android Tips

Update AndroidX toolbar:
<!-- TOOLBAR -->
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_account_title"
android:textColor="#color/color_dark_grey"/>
</androidx.appcompat.widget.Toolbar>

Ok so if you need 72dp, couldn't you just add the difference in padding in the xml file? This way you keep Androids default Inset/Padding that they want us to use.
So: 72-16=56
Therefor: add 56dp padding to put yourself at an indent/margin total of 72dp.
Or you could just change the values in the Dimen.xml files.
that's what I am doing now. It changes everything, the entire layout, including the ToolBar when implemented in the new proper Android way.
Dimen Resource File
The link I added shows the Dimen values at 2dp because I changed it but it was default set at 16dp. Just FYI...

((Toolbar)actionBar.getCustomView().getParent()).setContentInsetsAbsolute(0,0);