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()?

You'll have to use Reflection. [I described how to do it with the `TextInputLayout`](http://stackoverflow.com/a/30767869/420015), but the steps should be the same for the `CollapsingToolbarLayout`. — adneal, Jun 25 '15 at 00:42
@lukas1994 already done, thanks for this question and answer — Anton Shkurenko, Jul 23 '15 at 05:02

score 19 · Answer 1 · answered Oct 27 '15 at 15:39

19

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.

answered Oct 27 '15 at 15:39

StingRay5

2,388
2
20
29

3

Has anyone got this to work? Seems like it's doing nothing. – RED_ Apr 07 '16 at 15:11
Worked for me, thanks! You need to use callygraphy's `TypefaceUtils.load()` to load a typeface for this... – dimsuz May 30 '17 at 10:04
@RED_ It was doing nothing also for me. Set **setCollapsedTitleTypeFace** after setting the title worked for me – Pradip Tilala Feb 08 '19 at 07:24

score 2 · Answer 2 · answered Dec 01 '15 at 07:26

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

answered Dec 01 '15 at 07:26

android developer

114,585
152
739
1,270

1

I did exactly this and it didn't help :/ I can see the font changed in the layout editor, but not at runtime. – milosmns Jul 03 '19 at 15:14
@milosmns If you can make a sample project with this issue, report it here as a bug: https://issuetracker.google.com/issues – android developer Jul 04 '19 at 07:17
I actually managed to apply the font at runtime using some of the answers below. Just a fun fact, that way it works. – milosmns Jul 04 '19 at 13:47
@milosmns So changing it programmatically works, but not via XML ? I suggest to report about it. It used to work fine. – android developer Jul 04 '19 at 14:17
I'll need to verify this in a sample project, but that's right. – milosmns Jul 05 '19 at 15:02

score 2 · Answer 3 · edited Jun 20 '20 at 09:12

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

score 0 · Answer 4 · edited Oct 27 '15 at 16:14

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>

How does this answer the original question, about setting a custom font? — gnuf, Aug 31 '15 at 14:58

score 0 · Answer 5 · answered Apr 03 '19 at 13:38

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);

}

score 0 · Answer 6 · answered Jul 15 '20 at 12:30

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:

Font for CollapsingToolbarLayout

6 Answers6

Result

Linked