How to change CollapsingToolbarLayout typeface and size?

Question

I want to change CollapsingToolbarLayout font size and its typeface. How I can achieve that?

Answer 1

Update

Before we dive into the code let's first decide the textSize for our CollapsingToolbarLayout. Google published a website called material.io, this website also explains the best way on how to deal with Typography.

The article mentioned about "Heading" category which also explains the recommended font size to use in sp.

Although the article never mentioned the recommended CollapsingToolbarLayout's expanded size but the library com.android.support:design provides a TextAppearance for our case. With some digging with the source it turns out that that the size is 34sp (not mentioned in the article).

So how about the collapsed size? Luckily the article mentioned something and it is 20sp.

And the best TextAppearance so far that fits in collpased mode is TextAppearance.AppCompat.Title while our expanded mode TextAppearance is TextAppearance.Design.CollapsingToolbar.Expanded.

If you observe all our examples above all of them uses the REGULAR version of the font which is safe to say that Roboto regular will do the task unless you have specific requirements.

It might be too much work downloading the fonts itself why not use a library that has all the needed Roboto fonts? So I introduce a calligraphy library for Roboto e.g. Typer.

dependencies {
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.rhexgomez.typer:typer-roboto:2.0.0'
}

<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="@style/TextAppearance.Design.CollapsingToolbar.Expanded"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

Java

// Java example
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
collapsingToolbar.setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());

Kotlin

// Kotlin example
collapsing_toolbar.apply {
    setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
    setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
}

---

_{This is a 2019 update because the Typer library is updated! I am also the author of the library.}