Why your app toolbar title does not scale to the phone font size settings

Julien Bouffard
2 min read18 hours ago

--

Sometimes users choose to enlarge the font size on their android phone so that all texts on all their apps is larger.
As an android software engineer, we have to take into account the look and feel of our app with these font sizes.

However the in the toolbar, the text size will not scale if we use the material style.

@android:style/TextAppearance.Material.Widget.Toolbar.Title
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/toolbar"
style="@style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="?attr/homeAsUpIndicator"
tools:layout_height="wrap_content">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/title"
style="@android:style/TextAppearance.Material.Widget.Toolbar.Title"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

...

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>

Why is that?
Let’s have a look at this style definition.
style="@android:style/TextAppearance.Material.Widget.Toolbar.Title" can be found inside styles_material.xml . It is in fact a child of TextAppearance.Material.Widget.ActionBar.Title .

Let’s go further inside the title style defined by Material.

<style name="TextAppearance.Material.Widget.ActionBar.Title"
parent="TextAppearance.Material.Title">
<item name="textSize">@dimen/text_size_title_material_toolbar</item>
<item name="textColor">?attr/textColorPrimary</item>
</style>

TextSize is something that should be interesting:
We find in dimens_material.xml

<!-- Default text size for action bar title.-->
<dimen name="text_size_title_material_toolbar">14dp</dimen>

We should usually use sp to define text sizes. Having a dp dimension prevents the text size from scaling to the phone font size settings.

There’s a reason explained here about why it’s been done like this.

An excerpt:

There are cases where you might need to use dp; typically this happens when the text is in a container with a specific dp-size. This will prevent the text from spilling outside the container.

The toolbar has usually a fixed size. Inside the toolbar widget definition, we can see:

android:layout_height="?attr/actionBarSize"

Since the toolbar has a fixed size, we avoid the title from spilling outside the toolbar.

Everything can be of course overridden to accommodate the phone font size settings but the standard is to not scale the toolbar title.

--

--

No responses yet