Change Toolbar Font-Family in Android.

Nowadays In Android applications, we often have seen custom fonts throughout the application, as the custom font in detailing, the custom font in the toolbar, custom font everywhere in the application. Which makes UI more appropriate and appealing. 

In this article, we will learn how we can customize the toolbar font, how to change the Toolbar font family with the help of a theme.

Change Font for TextView

Before directly jumping towards custom toolbar font, first, see how we can easily change the font family for TextView in Android.

We just need to add the font-family attribute in our TextView like the below code snippet.

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/heading"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fontFamily="@font/montserrat_semi_bold"
    android:textSize="16sp"
    android:ellipsize="end"
    android:gravity="center"/>

Simply add an android:fontFamily attribute and it will do the magic. It’s so simple to change the font family for Textview

Change Font for Toolbar

Now, In Android, we often need to change the font-family for Toolbar as well to look more appealing UI for our end-users. 

To do so we need to define the theme in our toolbar with app:theme attribute like the below code snippet.

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/AppTheme.ToolbarFont" />

Before that, we have to add the theme in our styles.xml file and we have to define font-family in that style like the below code snippet.

<style name="AppTheme.ToolbarFont" parent="AppTheme">
    <!--This line changes the color of text in Toolbar-->
    <item name="android:textColorPrimary">@color/black</item>
    <!--This line changes the color of icons in toolbar (back, overflow menu icons)-->
    <item name="android:textColorSecondary">@color/azul</item>
    <item name="textAllCaps">false</item>
    <item name="android:textSize">16sp</item>
    <item name="android:fontFamily">@font/montserrat_semi_bold</item>
</style>

Add Custom Fonts to the resource folder

To add custom fonts we need to create a folder with the name “font” in the res directory like the below screenshot.

Result

Voila!!! We have achieved a custom font in our toolbar.

Conclusion

This article taught you how you can simply change your toolbar font with the help of a theme, also described how you can set the font for the Textview with just a single line. 

I hope this article is helpful. If you think something is missing, have questions, or would like to offer any thoughts or suggestions, go ahead and leave a comment below. I’d appreciate the feedback.