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

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 2

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") .

Answer 3

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