Develop Reference

Android "app:titleTextColor" Doesn't Work in MaterialToolbar within CollapsingToolbarLayout

<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/purple_500"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/sam" />
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:title="Sam Chen"
app:titleTextColor="#color/white"/> //<- here, doesn't work
</com.google.android.material.appbar.CollapsingToolbarLayout>
Result:
And collapsed:

To change the Title Text Color of CollapsingToolbarLayout in both collapsed and expanded mode you can use the attributes app:expandedTitleTextAppearance and app:collapsedTitleTextAppearance like below:
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/purple_500"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#style/MyExpandedTitle"
app:collapsedTitleTextAppearance="#style/MyCollapsedTitle">
where #style/MyExpandedTitle is your custom expandedTitleTextAppearance like below:
<style name="MyExpandedTitle" parent="#style/TextAppearance.Design.CollapsingToolbar.Expanded">
<item name="android:textColor">#android:color/holo_red_dark</item>
</style>
and #style/MyCollapsedTitle is your custom collapsedTitleTextAppearance like below:
<style name="MyCollapsedTitle" parent="#style/TextAppearance.AppCompat.Title">
<item name="android:textColor">#android:color/holo_red_dark</item>
</style>

Here is my solution for my case, I just need the title and options menu icon to be white:
<com.google.android.material.appbar.CollapsingToolbarLayout
...
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
For customizing color of title and options menu icon can read this: How to change the Text color of collapsing toolbar and the back button color of collapsing toolbar in android

<com.google.android.material.appbar.CollapsingToolbarLayout
...
app:collapsedTitleTextColor="#android:color/white"
app:expandedTitleTextColor="#android:color/white">

Change the title of MaterialToolbar into center

I'm using navigation component and material toolbar.
I've just setup navigation component with material toolbar. By doing so whenever fragment changed the back button shown and the title of material toolbar changed by navigation component automatically.
The question is I just want to change the title gravity into center without removing those navigation components toolbar support.
How can I do that ?
Note : I`ve tried to change the toolbar style, but it seems does not work.
And creating an extra text view into toolbar view its not a solution since I want to use navigation component toolbar support.
Thanks in advance.

Starting from com.google.android.material:material:1.4.0 you can use app:titleCentered="true" to center the title.
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/materialToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Toolbar"
app:titleCentered="true"/>
I hope this helps. You can mark it as accepted if it matches your needs.

You can use a Custom Toolbar
<androidx.appcompat.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" />
<androidx.appcompat.widget.Toolbar/>
It's just a part of view Group, 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);

As a tricky way you can use: com.google.android.material.appbar.CollapsingToolbarLayout
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:collapsedTitleTextAppearance="?attr/textAppearanceHeadline3"
app:expandedTitleGravity="center"
app:expandedTitleTextAppearance="?attr/textAppearanceHeadline1"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_back_24dp"
app:title="#string/parvaneh_personal_info" />
</com.google.android.material.appbar.CollapsingToolbarLayout>

Title in expanded CollapsingToolbarLayout not displayed correctly

So, I got a wierd problem with my CollapsingToolbarLayout in my project. After my activity starts this is how my toolbar title appears:
After collapsing the layout is like this:
The original title text in the example is: "UPC VONALKODOS TERMEK"
I think the title in the expanded state should be longer (there is enough room for it) than in collapsed state. This what my activity's xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
app:theme="#style/PolarThemeNoActionBar">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_below="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="142dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleTextAppearance="#style/ExpandedText">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:gravity="bottom"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="?attr/colorPrimaryDark"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
My res/style/ExpandedText looks like:
<style name="ExpandedText" parent="android:TextAppearance">
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">20sp</item>
</style>
Support library version: 25.1.1.
Phone: Nexus 5
Android version: 6.0.1 (stock)
My question: Why the title have dots at the end in expanded state and not filling the space to show more from it?
[EDIT 1] Issue still remains with support library version 25.3.0

CollapsingToolbarLayout uses a helper class - CollapsingTextHelper - to draw and animate its title. At the time of writing, the recent versions of this class are restricting the available width for the expanded title to a size based on the width available in the collapsed state, scaled by the ratio of the states' text sizes.
Relevant source comments:
// If the scaled down size is larger than the actual collapsed width, we need to
// cap the available width so that when the expanded text scales down, it matches
// the collapsed width
This was apparently introduced to address some edge cases where the title would overlap other Toolbar stuff, as explained in the notes on the relevant commit.
Fix CollapsingToolbarLayout displaying over icons
CTL scales it title which works in most situations.
There are edge cases though where the title can be
drawn on the Toolbars contents, namely icons.
This CL fixes the edge cases where the collapsed
and expanded text sizes are similar in size, which
means that there is limited/no scaling happening
while scrolling. In this instance we need to cap
any available width when expanded, so that it
'scales' to match the collapsed width when collapsed.
Normally, I'm all about tearing into View classes to modify their behavior with reflection and other trickery, but in this case, the given setup is such that this would take some really heavy lifting. The helper class is not normally accessible outside the library package, its instance is private in the CollapsingToolbarLayout, and the sizing calculations are performed in a private, secondary method with mostly local variables.
If it's a possibility, the simplest solution would be to revert to a library version published before this fix. I've not determined the exact version that brought this change, and the support library revision history doesn't seem to mention it, unfortunately. However, that commit was made in the middle of last year (2016), so probably around version 24.0.0, or a little later. I can verify that the behavior is not present in 23.4.0.
You could certainly file a bug report for this, if you like, though no guarantees that they'd consider this a bug. I didn't find any previously filed issues regarding this specifically, other than this tangentially-related one complaining about the ellipsizing that was a side effect of that change.

You can turn off ellipsizing. Add this to your TextAppearance style:
<item name="android:ellipsize">none</item>
If it's necessary you can also manually change the width of the textview that is created by adding width to the style
<item name="android:width">300dp</item>

I edit your code see this may be you like this
<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:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tablayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="142dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="?attr/colorPrimaryDark" />
</android.support.design.widget.AppBarLayout>
and this is Activity Class
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private CollapsingToolbarLayout collapsingToolbar;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.answer2);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("UPC VONALKODOS TERMEK");
collapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
collapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
}
}
and this is res/style/:
<style name="CollapsedAppBar" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textStyle">normal</item>
</style>
<style name="ExpandedAppBar" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>

Stop scroll on CollapsingToolbarLayout so it doesn't completely collapse

I have a CollapsingToolbarLayout setup and im placing a wallpaper there. I want to be able to stop it from collapsing all the way.
I have tried minheight and many other things but can't figure it out.
How can i get it to stop collapsing to the second screenshot?
View when activity is loaded
Desired Stopping Point
Current Stopping Point

CollapsingToolbarLayout works really closely with Toolbar and as such the collapsed height depends on the toolbar.
I was able to solve your problem using this layout (Note it goes into the normal CoordinatorLayout/AppBarLayout Setup, With Fab and a NestedScrollView or RecyclerView):
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorPrimaryDark"
app:contentScrim="#android:color/transparent"
app:titleEnabled="false"
>
<!-- There isnt a contentSCrim attribute so the toolbar is transparent after being
collapsed
Disabled the title also as you wont be needing it -->
<ImageView
android:id="#+id/image_v"
android:layout_width="match_parent"
android:layout_height="360dp"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:src="#drawable/md2"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"
/>
<!-- Normal Imageview. Nothing interesting -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="168dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<!-- The toolbar is styled normally. However we disable the title also in code.
Toolbar height is the main component that determines the collapsed height -->
<TextView
android:text="#string/app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?attr/colorPrimaryDark"
android:paddingLeft="72dp"
android:paddingRight="0dp"
android:paddingBottom="24dp"
android:paddingTop="24dp"
android:textColor="#android:color/white"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
/>
<!-- The title textView -->
</android.support.design.widget.CollapsingToolbarLayout>
The related activity looks like this:
...
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// Disable toolbar title
getSupportActionBar().setDisplayShowTitleEnabled(false);
...
Here's a video of the interaction

I have faced with the same problem.
First I just set the height of Toolbar as described in previous answers and it works.
But this led to another problem. Toolbar view eat touch events, so my collapsing view (which is MapView) does not take any touch events in its part overlapped by the Toolbar.
Finally my solution is to remove Toolbar from CollapsingToolbarLayout. In my case it is OK because I have used it only to restrict collapsing.
And to set the minimum collapsing height in onCreateView like this:
CollapsingToolbarLayout layoutCollapsing = (CollapsingToolbarLayout) rootView.findViewById(R.id.layoutCollapsing);
layoutCollapsing.setMinimumHeight(120);

Just add the desired stop-height to your toolbar and set app:contentScrim="#00000000" for your CollapsingToolbarLayout.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#00000000"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/ImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="100dp"
/> <!-- set desired stop-height as height -->
</android.support.design.widget.CollapsingToolbarLayout>

Android: I cannot remove elevation / shadow on my toolbar

Hi i would like to remove the elevation and shadow effect from my toolbar for API 21 and greater. Below is what i have tried
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setElevation(0);
My Toolbar in XML. I have tried to set elevation to 0dp
<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/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="0dp"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle"
>
And this is ToolbarStyle if it helps
<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="colorControlNormal">#android:color/white</item>
</style>
Edit 1: Tried the following in styles v21. Still same result
<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="colorControlNormal">#android:color/white</item>
<item name="android:elevation">0dp</item>
</style>
Edit 2: Where the toolbar is in my layout
android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar" />

You can do that with an easy step. Don't remove the android.support.design.widget.AppBarLayout from your layout, instead add the attribute app:elevation="0dp" to it. Your final layout will be:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
...
</android.support.design.widget.AppBarLayout>

This remove elevation on toolbar (android:stateListAnimator="#null"), stateListAnimator is for API level 21 or higher, so insert a tools prop (before namespace declaration) like this:
//xmlns:tools="http://schemas.android.com/tools" in parent or start element
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"
android:theme="#style/AppTheme.AppBarOverlay"
tools:targetApi="21">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:elevation="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
//your content goes here like RecyclerView, Card or other layout
Here is my sample result:

Use setOutlineProvider(null); on your appBar. Just be sure to check the SDK version. :)

Use app:elevation="0dp" in your AppBarLayout. Make sure you put Toolbar inside your AppBarLayout like this -
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/firstOption"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
and add this line to your activity - findViewById(R.id.appBarLayout).bringToFront();
This will bring the AppBar to front.

Just remove this part of you layout hierarchy:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
It's responsible for creating shadow. Toolbar itself doesn't cast any shadow.

Go to the activity you want to remove the ActionBar's Elevation.
Before setContent(....), request the ActionBar feature(That is if you have not declared it directly)
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getSupportActionBar().setElevation(0);
or else just call the declared Toolbar variable
e.g
toolbar.setElevation(0);

Get the appbarlayout in code:
var appbarLayout = findviewbyid<AppBarLayout>(resource.id. );
set the property
appbarLayout.StateListAnimator=null;

Create another style for v21 and add
<item name="android:elevation">#dimen/toolbar_elevation</item> to that style. On normal style don't use elevation and don't use it in xml, just use style="#style/yourCustomToolbarStyle"

Solution is simple. Just add following line into your AppBar layout. No need to add elevation for the Toolbar or AppBar layout after this.
android:stateListAnimator="#null"

use android:outlineSpotShadowColor=" assign transparent colour" your shadow will disappear its work for my as below
enter image description here

To remove elevation by using java code use the line below...
getSupportActionBar().setElevation(0);