Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fonts in XML android:fontFamily is not applied to toolbars

I'm using the new Fonts in XML feature, which was introduced in Android 8.0 Oreo with the Support Library 26.1.0. The default font family for the whole application is applied by setting the android:fontFamily attribute inside the application theme:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     ...
    <item name="android:fontFamily">@font/proxima_nova</item>
</style>

The font is properly applied to all views in the app except Toolbar. All toolbars keep using the Roboto font:

enter image description here

UPDATE: The issue seems to be fixed in Support Library 27.0.0. I cannot reproduce it any longer.

like image 600
makovkastar Avatar asked Oct 26 '17 14:10

makovkastar


People also ask

How do I add fonts to tool bar?

Since Android now supports custom fonts, there's no reason to assign fonts in Java, it can be done while making the XML file itself. Then, go to the design tab of your XML file, and select the text on the toolbar. Select the option of fontFamily and select the font you want under the given options.

How do I change my text Font on my Android?

On your device, open the Settings app. Search and select Font size. To change your preferred font size, move the slider left or right.


2 Answers

I've not yet tested on all Android version but this seems to work:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     ...
    <item name="android:fontFamily">@font/proxima_nova</item>
    <item name="toolbarStyle">@style/AppTheme.Toolbar</item>
</style>

<style name="AppTheme.Toolbar" parent="Widget.AppCompat.Toolbar">
    <item name="titleTextAppearance">@style/AppTheme.ToolbarTextStyle</item>
</style>

<style name="AppTheme.ToolbarTextStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:fontFamily">@font/proxima_nova</item>
    <item name="fontFamily">@font/proxima_nova</item>
</style>
like image 140
mengoni Avatar answered Sep 22 '22 14:09

mengoni


I spent quite a while to figure this out (even with Support Library 27.1.0). So, here's my solution to this:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:fontFamily">@font/proxima_nova</item> <!-- Default app font -->
    <item name="actionBarStyle">@style/Custom.ActionBar</item>
</style>

<style name="Custom.ActionBar" parent="Widget.AppCompat.ActionBar">
    <item name="background">@color/colorPrimary</item>
    <item name="titleTextStyle">@style/Custom.ActionBar.Title</item>
</style>

<style name="Custom.ActionBar.Title" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:fontFamily">@font/proxima_nova_bold</item>
</style>

As you can see, instead of referencing Toolbar, I got it to work by referencing ActionBar instead. With the above, the default font for the whole app is Proxima Nova (Regular), while the Toolbar/Action Bar is set to Proxima Nova Bold.

Some context:
For the life of me, I could not get custom font to work using a font xml (where you should set the normal & italic font for regular & bold). So, the @font/proxima_nova_bold in the code links to the font file itself, res/font/proxima_nova_bold.ttf, which works fine.

like image 30
Aba Avatar answered Sep 25 '22 14:09

Aba