androidmaterial-designandroid-toolbarandroid-collapsingtoolbarlayoutandroid-appbarlayout

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:

enter image description here

And collapsed:

enter image description here


Solution

  • 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>