Can't change font style for collapsing toolbar

Question

I've got layout with Collapsing Toolbar inside which's the ImageView and the Toolbar and want to change the default font for the title. I've made following style and applied it to Collapsing Toolbar and Toolbar

    <style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark">
    <item name="android:fontFamily">sans-serif-black</item>
    </style>

The layout for AppBar

 <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="200dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/fuel_yellow"
            android:theme="@style/ToolbarTheme"
            app:popupTheme="@style/ToolbarTheme"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/noclegi"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="pin"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

Nothing changes, except of the title and navigation icon color. Where's the problem?

Answer 1

To change the font style of CollapsingToolbarLayout you can use the attributes app:expandedTitleTextAppearance and app:collapsedTitleTextAppearance and use your custom font style.

The Collapsing Toolbar will be like below:

<com.google.android.material.appbar.CollapsingToolbarLayout
      android:id="@+id/collapsing_toolbar"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:expandedTitleTextAppearance="@style/MyExpandedTitle"
      app:collapsedTitleTextAppearance="@style/MyCollapsedTitle">

where @style/MyExpandedTitle and @style/MyCollapsedTitle will be your custom TextAppearance styles like below:

<style name="MyExpandedTitle" parent="@style/TextAppearance.Design.CollapsingToolbar.Expanded">
    <item name="android:fontFamily">sans-serif-black</item>
</style>

<style name="MyCollapsedTitle" parent="@style/TextAppearance.AppCompat.Title">
    <item name="android:fontFamily">sans-serif-black</item>
</style>

or if you want to use a custom font will be like below:

<style name="MyExpandedTitle" parent="@style/TextAppearance.Design.CollapsingToolbar.Expanded">
   <item name="fontFamily">@font/roboto_regular</item>
   <item name="android:fontFamily">@font/roboto_regular</item>
</style>

<style name="MyCollapsedTitle" parent="@style/TextAppearance.AppCompat.Title">
   <item name="fontFamily">@font/roboto_regular</item>
   <item name="android:fontFamily">@font/roboto_regular</item>
</style>