Change the font of my toolbar using Calligraphy

Question

I'm using the Calligraphy lib for Android to change the fonts in my app. The problem is with the Toolbar. I don't know how to change the font.

This is my Toolbar :

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:titleTextAppearance="@style/Toolbar.TitleText"
            android:background="@drawable/background_repeat"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

This is the TextAppearance in my style.xml :

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="fontPath">fonts/Raleway-ExtraBoldItalic.ttf</item>
        <item name="android:textSize">50sp</item>
    </style>

This is not working. I can change the size of the text (in this example, 50sp is working). But impossible to change the font.

Answer 1

The problem is that Toolbar creates TextViews for title and subtitle programmatically inside itself. It means that it doesn't use wrapped LayoutInflater by Calligraphy. Instead it uses system Typefaces depending on fontFamily and fontStyle from textAppearence attribute.

But Calligraphy listens for GlobalLayout changes and tries to load style from theme.

So what I've done:

Add activity theme and customize ActionBarStyle:

<style name="ActivityTheme" parent="AppTheme.Base">
    <item name="android:actionBarStyle">@style/ActionBarStyle</item>
</style>

<style name="ActionBarStyle" parent="Widget.AppCompat.Light.ActionBar.Solid">
    <item name="android:titleTextStyle">@style/ToolbarTitleTextAppearance</item>
</style>

<style name="ToolbarTitleTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textSize">20sp</item>
    <item name="fontPath">fonts/Roboto-Medium.ttf</item>
</style>

Answer 2

If you don't want or cannot override toolbar theme, you can subclass Toolbar and use your custom toolbar instead of the system toolbar:

public class ToolbarPlus extends Toolbar {

    public ToolbarPlus(Context context) {
        super(context);
    }

    public ToolbarPlus(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ToolbarPlus(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setTitle(CharSequence title) {
        if (title == null) {
            title = "";
        }
        Typeface font = TypefaceUtils.load(getResources().getAssets(), "fonts/Roboto-BoldItalic.ttf");
        super.setTitle(CalligraphyUtils.applyTypefaceSpan(title, font));
    }

}

Replace "fonts/Roboto-BoldItalic.ttf" with your font.

You can also use this method for subtitle by overriding public void setSubtitle(CharSequence subtitle) .

Answer 3

There is two way you can do this

1) By using style in style.xml file AnoDest told you

2) By using xml, in this way you will get more control over view, you need to create seprate xml file called appbar.xml and include it in your view

appbar.xml file

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient_theme"
    android:elevation="@dimen/smallPadding"
    android:fitsSystemWindows="true">

    <com.indussoft.lms.customUI.TextViewRobotoBold
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Activity Name"
        android:textStyle="bold"
        android:textSize="@dimen/okTextSize"
        android:layout_gravity="center"
        android:gravity="center"
        android:visibility="visible"
        android:textColor="@color/white" />

      <TextView
        android:layout_width="wrap_content"
        android:text="@string/accept"
        fontPath="fonts/Roboto-Bold.ttf"
        android:layout_height="wrap_content" />

</android.support.v7.widget.Toolbar>  

And include it in your activity view such as

 <include
        layout="@layout/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

Answer 4

Nothing worked for me so this is the function that I wrote in my base activity to workaround the issue:

private void setToolBarFont() {
    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    for (int i = 0; i < toolbar.getChildCount(); i++) {
        final View child = toolbar.getChildAt(i);
        if (child instanceof TextView) {
            final TextView textView = (TextView) child;
            CalligraphyUtils.applyFontToTextView(textView, TypefaceUtils.load(getAssets(), "fonts/my_font.ttf"));
        }
    }
}

ps this is an open issue on Calligraphy's GitHub page currently. Here's the link to the issue: https://github.com/chrisjenx/Calligraphy/issues/295