Font for CollapsingToolbarLayout

Question

Is there a way to set the font for a CollapsingToolbarLayout? I'm using Calligraphy but my default font is not applied.

I think the problem is the CollapsingTextHelper class is using Canvas.drawText() instead of a TextView.

How can I change the default font that is used for Canvas.drawText()?

Answer 1

You can change the text appearance of the title of a CollapsingToolbarLayout as follows:

1) Make sure that you are using compile 'com.android.support:design:22.2.1' in your build.gradle dependencies.

2) Use expandedTitleTextAppearance like this:

<android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true"
                app:contentScrim="@color/myPrimaryColor"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleTextAppearance="@style/HeaderTitleStyle">

3) Define the HeaderTitleStyle in your styles file:

<style name="HeaderTitleStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:textSize">20sp</item>
</style>

Answer 2

Custom font with the Android App Bar Layout and Collapsing Toolbar Layouts

Inside of CoordinatorLayout below code:

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/toolbar_color_palette"
        android:layout_height="152dp"
        android:fitsSystemWindows="true"
        app:liftOnScroll="true"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay"
        >
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleMarginStart="72dp"
            app:expandedTitleMarginBottom="28dp"

            app:expandedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Expanded"
            app:collapsedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Collapsed"

            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/sample1"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:contentDescription="@string/app_name" />
            <com.google.android.material.appbar.MaterialToolbar
                android:elevation="0dp"
                android:id="@+id/topAppBar5"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="@string/toolbar_title"
                app:layout_collapseMode="pin"
                app:menu="@menu/menu_with_icons"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:navigationIcon="@drawable/ic_drawer_white"
                />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

Style:

<style name="TextAppearance.App.CollapsingToolbar.Expanded" parent="TextAppearance.MaterialComponents.Headline5">
        <item name="android:textColor">?attr/colorOnPrimary</item>
        <item name="fontFamily">@font/rosarivo</item>
        <item name="android:fontFamily">@font/rosarivo</item>
    </style>
    <style name="TextAppearance.App.CollapsingToolbar.Collapsed" parent="TextAppearance.MaterialComponents.Headline6">
        <item name="android:textColor">?attr/colorOnPrimary</item>
        <item name="fontFamily">@font/rosarivo</item>
        <item name="android:fontFamily">@font/rosarivo</item>
    </style>

Output:

Answer 3

First step is to pick a font that you want to use.

Second create a Fonts folder in your assets directory and copy your font there.

Xml file

        <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapsing_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    app:contentScrim="?attr/colorPrimary"
                    app:expandedTitleMarginEnd="64dp"
                    app:expandedTitleMarginStart="48dp"
                    app:expandedTitleTextAppearance="@android:color/transparent"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Your content-->
    </android.support.design.widget.CollapsingToolbarLayout>

Java File

 private void initCollapsingToolbar() {
        final CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle(" ");
        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
        appBarLayout.setExpanded(true);

collapsingToolbar.setTitle(getString("Toolbar name");
                    Typeface tf = Typeface.createFromAsset(getAssets(),
                            "res/font/frederickathegreatregular.ttf");
                    collapsingToolbar.setCollapsedTitleTypeface(tf);

}

Answer 4

Since one of the latest API updates, the Support Design Package has been updated and now it's possible to set the font of the collapsing title text.

Use setCollapsedTitleTypeFace(Typeface typeface) and setExpandedTitleTypeFace(Typeface typeface) to set your custom font.

Answer 5

You can trick by wrapping the widget class. Change the TypeFace when widget attached to window.

Tip: Calligraphy library included helper class for TypeFace. You can generate TypeFace based on AssetManager and path to font in assets directory.

For example, I will apply custom font for CollapsingToolbarLayout class:

class CollapsingToolbarLayoutWrapper : CollapsingToolbarLayout {
    
    // Required constructors
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        try {
            val applicationContext = this.context.applicationContext
            val assetManager = applicationContext.assets
            val fontBold = applicationContext.getString(R.string.font_default_bold)
            this.setCollapsedTitleTypeface(TypefaceUtils.load(assetManager, fontBold))
            this.setExpandedTitleTypeface(TypefaceUtils.load(assetManager, fontBold))
        } catch (exception: Exception) {
            // Maybe exceptions from typeface, like missing font in assets, for font is not accept,...
        }
    }

}

And in layout xml file, use CollapsingToolbarLayoutWrapper instead:

<android.support.design.widget.CoordinatorLayout>
    <!-- ... -->
    <android.support.design.widget.AppBarLayout>
        <!-- ... -->
        <....CollapsingToolbarLayoutWrapper
          app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
          app:collapsedTitleGravity="center"
          
          <!-- (optional) If you need to change title text size for collapsed/expanded states, can change attributes app:collapsedTitleTextAppearance, app:expandedTitleTextAppearance -->
          app:collapsedTitleTextAppearance="@style/AppTheme.Widget.Style.Toolbar.TextAppearance.Title"
          app:expandedTitleTextAppearance="@style/AppTheme.Widget.Style.Toolbar.TextAppearance.Title.Expanded"

          app:expandedTitleGravity="start|bottom"
          app:expandedTitleMarginStart="32dp">
            <android.support.v7.widget.Toolbar>
                <!-- ... -->
            </android.support.v7.widget.Toolbar>
        </....CollapsingToolbarLayoutWrapper>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Result

Answer 6

It is possible. In fact, by default, the font of the title when it's collapsed is different than the one when it's not.

So, in order to change this, for example, you can do as such:

styles file

<style name="TextAppearance.Collapsed"
    parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:fontFamily">sans-serif</item>
</style>

layout file

<android.support.design.widget.CollapsingToolbarLayout
    app:collapsedTitleTextAppearance="@style/TextAppearance.Collapsed">
    ...
</android.support.design.widget.CollapsingToolbarLayout>

Similar thing can be done for the style of when it's not collapsed ("expandedTitleTextAppearance") .