How to change font-family of toolbar title?

Question

I want to change font-family of my toolbar title to sans-serif-smallcaps. How do I do it?

My AppTheme has parent Theme.AppCompat.Light.DarkActionBar

Edit: Toolbar XML:

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

Answer 1

For material toolbar, Add a style in your themes.xml like below:

  <style name="toolbar_text">

        <item name="android:fontFamily">@font/font_name</item>
        <item name="android:textSize">20sp</item>

    </style>

then in your Material toolbar, add it to app:titleTextAppearance="@style/toolbar_text"

like below

   <com.google.android.material.appbar.MaterialToolbar

        ...

        app:titleTextAppearance="@style/toolbar_text" />

Answer 2

My Layout Page:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

Go to Your styles.xml then add your font (This is works in Android Studio 3.0)

 <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" >
        <item name="android:fontFamily">@font/handlee_regular</item>
/// change your font
</style>

Answer 3

# To Use default Android Font-Family:

In your Toolbar XML, add a child TextView to show the Title. Set android font-family to TextView using attribute android:fontFamily="sans-serif-smallcaps"

Toolbar:

    <android.support.v7.widget.Toolbar
        android:id="@+id/oolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_collapseMode="pin"
        app:popupTheme="?attr/colorPrimaryDark" >

        <TextView
            android:id="@+id/custom_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stack Overflow"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:textStyle="bold"
            android:fontFamily="sans-serif-smallcaps" />
    </android.support.v7.widget.Toolbar>

# To Use External Font:

1. Put external font file into location: .../app/src/main/assets/fonts/YOUR_CUSTOM_FONT.ttf

2. Add below codes in your Activity to set custom font to Toolbar title.

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        // Custom title
        TextView textCustomTitle = (TextView) findViewById(R.id.custom_title);

        // Custom font
        Typeface customFont = Typeface.createFromAsset(this.getAssets(), "fonts/Exo2-BoldItalic.ttf");

        // Set
        textCustomTitle.setTypeface(customFont);

        setSupportActionBar(toolbar);
    }

    .......
    ..............
}

OUTPUT:

Hope this will help~

Answer 4

Place your font file (.ttf) in assets folder and write following code in Activity class.

Typeface font = Typeface.createFromAsset(getContext().getAssets(), "sansSmallCaps.ttf");

TextView text = (TextView) findViewById(R.id.toolbartitle);

text.setTypeface(font);

Update

You are right in getting the textview with getChildAt(0)..but I don't know why the font didn't apply to title. but my guess is you need to set font before setting setSupportActionBar(myToolbar);

Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar);
myToolbar.setTitle("xyz");
TextView tv=(TextView) myToolbar.getChildAt(0);
tv.setTypeface(Typeface.SANS_SERIF);
setSupportActionBar(myToolbar);

Answer 5

Create a SpannableString object and pass the font path from asset. Check the working below

SpannableString toolbarTitle = new SpannableString(getActionBar().getTitle());
        String toolbarFont = getResources().getString(R.string.circular_bold);
        CustomTypefaceSpan toolbarTypefaceSpan = new CustomTypefaceSpan(toolbarFont, this);
        toolbarTitle.setSpan(toolbarTypefaceSpan, 0, toolbarTitle.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        getActionBar().setTitle(toolbarTitle);

Here, R.string.circular_bold is

<string name="circular_bold">font/CircularStd-Bold.ttf</string>

And font is in Asset/font folder as displayed in image below

Below CustomFontHelper class helps to set Typeface to the text element-

public class CustomFontHelper {

    /**
     * Changing font of Paint element
     * @param paint text element of which font needs to be changed
     * @param font
     * @param context
     */
    public static void setCustomFont(Paint paint, String font, Context context) {
        if (font == null) {
            return;
        }
        Typeface typeface = FontCache.get(font, context);
        if (typeface != null) {
            paint.setTypeface(typeface);
        }
    }
}

CustomTypefaceSpan class is the actual class where font is applied to the text element.

public class CustomTypefaceSpan extends TypefaceSpan {

    private String font;
    private Context context;

    public CustomTypefaceSpan(@NonNull String font, @NonNull Context context) {
        super("");
        this.font = font;
        this.context = context;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        CustomFontHelper.setCustomFont(ds, font, context);
    }

    @Override
    public void updateMeasureState(TextPaint paint) {
        CustomFontHelper.setCustomFont(paint, font, context);
    }
}

FontCache class is for caching the font, so same font can be reused public class FontCache {

    private static Hashtable<String, Typeface> fontCache = new Hashtable<>();

    /**
     * Gets the typeface from Asset folder
     * @param name path to the font within asset folder
     * @param context context of the view
     * @return
     */
    public static Typeface get(String name, Context context) {
        Typeface tf = fontCache.get(name);
        if (tf == null) {
            try {
                tf = Typeface.createFromAsset(context.getAssets(), name);
            } catch (Exception e) {
                return null;
            }
            fontCache.put(name, tf);
        }
        return tf;
    }
}

Answer 6

It works fine.

mToolbar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            View view = mToolbar.getChildAt(0);
            if (view != null && view instanceof TextView) {
                TextView title = (TextView) view;
                AssetManager mgr = getAssets();
                Typeface tf = Typeface.createFromAsset(mgr, "ttf.ttf");//Font file in /assets
                title.setTypeface(tf);
                mToolbar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        }
    });