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

Viewed 253
<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:

enter image description here

And collapsed:

enter image description here

3 Answers

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>
<com.google.android.material.appbar.CollapsingToolbarLayout
            ...
            app:collapsedTitleTextColor="@android:color/white"
            app:expandedTitleTextColor="@android:color/white">
Related