How to set a custom font to the title in toolbar android

Question

I am doing this:

toolbar = (Toolbar) findViewById(com.sports.unity.R.id.tool_bar);
setSupportActionBar(toolbar);
setTitle("hello");

I want to set a custom font for the text here in the title "hello". How to do that?

Toadflax

Answer 1

Update 2018 (kotlin version)

fun Toolbar.changeToolbarFont(){
    for (i in 0 until childCount) {
        val view = getChildAt(i)
        if (view is TextView && view.text == title) {
            view.typeface = Typeface.createFromAsset(view.context.assets, "fonts/customFont")
            break
        }
    }
}

and use it like that toolBar.changeToolbarFont()

old-post

To use a custom title in your Toolbar all you need to do is remember is that Toolbar is just a fancy ViewGroup so you can add a custom title like so:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_top"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/action_bar_bkgnd"
    app:theme="@style/ToolBarTheme" >


     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:layout_gravity="center"
        android:id="@+id/toolbar_title" />


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

This means that you can style the TextView however you would like because it's just a regular TextView. So in your activity you can access the title like so:

Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);

And then:

Typeface khandBold = Typeface.createFromAsset(BalrogApplication.getApplication().getAssets(), "fonts/Khand-bold.ttf");

mTitle.setTypeface(khandBold);

UPDATE dynamically version

public static void changeToolbarFont(Toolbar toolbar, Activity context) {
    for (int i = 0; i < toolbar.getChildCount(); i++) {
        View view = toolbar.getChildAt(i);
        if (view instanceof TextView) {
            TextView tv = (TextView) view;
            if (tv.getText().equals(toolbar.getTitle())) {
                applyFont(tv, context);
                break;
            }
        }
    }
}

public static void applyFont(TextView tv, Activity context) {
    tv.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/customFont"));
}

and use it like that

changeToolbarFont(findViewById(R.id.app_bar), this);

Elviselvish

yeah my activity also shows the class name along with the textview. How to remove the class name from it. – Toadflax

@anupamx You can remove the actionbar like this: getSupportActionBar().setTitle(null); Do it right after you set the toolbar as the actionbar: setSupportActionBar(toolbar); – Attalie

@Elviselvish If I put a custom TextView inside toolbar in XML, then I will not be able to use default title of the toolbar, right? I mean my call toolbar.setTitle() will be in vain, am I right? – Afterglow

@Afterglow yes but you can override that method to work as you want – Elviselvish

The dynamic one is the only one that worked for me. – Skinflint

This was working for me until I started using the navigation component, after which I had to change view.text == title to view.text == title.toString() – Chancelor

Answer 2

Since android.support.v7.appcompat 24.2 Toolbar has method setTitleTextAppearance and you can set its font without external textview.

create new style in styles.xml

<style name="RobotoBoldTextAppearance">
        <item name="android:fontFamily">@font/roboto_condensed_bold</item>
</style>

and use it

mToolbar.setTitleTextAppearance(this, R.style.RobotoBoldTextAppearance);

Sciatica

The best answer – Mincing

To complete there right answer, I'd add the link to create font xml: developer.android.com/guide/topics/ui/look-and-feel/… – Sheeb

it solved my problem with only single line of change. thanks man – Laity

Maybe add a parent to the style like this: parent="TextAppearance.Widget.AppCompat.Toolbar.Title". Because the size of the title is otherwise very small for me. – Supernumerary

It worked for me. But i implemented in the xml file like app:titleTextAppearance="@style/ToolbarTextAppearance" – Bubbler

Answer 3

I still wanted to use the Toolbars title methods (nor did I want to have a custom Toolbar class), so adding in the custom TextView inside of the Toolbar xml element didn't work for me. Instead, I used the following method to find the TextView:

public static void applyFontForToolbarTitle(Activity context){
    Toolbar toolbar = (Toolbar) context.findViewById(R.id.app_bar);
    for(int i = 0; i < toolbar.getChildCount(); i++){
        View view = toolbar.getChildAt(i);
        if(view instanceof TextView){
            TextView tv = (TextView) view;
            Typeface titleFont = Typeface.
               createFromAsset(context.getAssets(), "fonts/customFont");
            if(tv.getText().equals(toolbar.getTitle())){
                tv.setTypeface(titleFont);
                break;
            }
        }
    }
}

Nuzzle

It's toolbar.getTitle() instead of context.getTitle(). Thanks! It worked for me. – Epencephalon

This helped me setting a custom font when I did not have access to the layout files and couldn't add a TextView to the Toolbar. – Aloud

if you set the toolbar title string in the code, then make sure that you call above method after setting the toolbar title. Before setting the title, it has no effect. – Azerbaijani

the only suggestion i can make is to return a success value when you have setted the typeface. – Elviselvish

Answer 4

You can do this using just themes:

I wrote an article outlining the full solution. Here are the basics:

1) Define a theme in styles.xml:

<style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:fontFamily">@font/fancy-font</item>
</style>

2) Set that theme in your Toolbars layout:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:theme="@style/ToolbarTheme"/>

This assumes that you have a .ttf file stored in res/font:

Azole

Answer 5

You can create fonts folder under res directory in last version Android studio 3 .After this you must be define custom style in styles, and after this , you must be use titleTextAppearance in toolbar to style you are defined.

Steps like below.

1. Create fonts directory : res > Android Resource Directory > Resource type : fonts, and click on Ok to create fonts directory(Android studio 3).

2. Open styles.xml and make custom style like below

   <style name="**TextAppearance.TabsFont**" parent="**android:TextAppearance**">
       <item name="android:fontFamily">font/rmedium</item>
       <item name="android:textSize">18sp</item>
   </style>
   

3.Now open layout and add app:titleTextAppearance="@style/TextAppearance.TabsFont" to Toolbar tag, like below.

<android.support.v7.widget.Toolbar

    android:id="@+id/toolbarMain"
    app:title="@string/time_amp_date"
    app:titleTextAppearance="@style/TextAppearance.TabsFont"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:theme="@style/AppTheme"
    app:elevation="2dp" />

That's DONE. Now if you running app, you can see font set to your toolbar.

Coulomb

Answer 6

1. Placement of Fonts:

   • Firstly, download a .ttf file. My file is Balker.ttf
   • make sure that you have got an "assets" folder. If there is none, right click over app go to New>Folder>assets Folder
   • In assets folder, create a new folder and name it 'font'
   • Put your file, as I did with Balker.ttf, into the 'font' folder.

2. Go to the java file of the activity whose font you have to customize. I customized mainActivity here.

    for(int i = 0; i < toolbar.getChildCount(); i++)     
    { View view = toolbar.getChildAt(i);
   
       if(view instanceof TextView) {
           TextView textView = (TextView) view;
   
           Typeface myCustomFont=Typeface.createFromAsset(getAssets(),"font/Balker.ttf");
           textView.setTypeface(myCustomFont); }
   
   
    }
   

Sile

I think that using xml attribute would be better. app:titleTextAppearance="@style/ToolbarTextAppearance" – Cierracig

Answer 7

Two way you can do custom font on toolbar title

Solution : 1 [ Static Method ]

1) Define a theme in styles.xml:

  <style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Light">
      <item name="android:fontFamily">@font/ubuntu</item>
  </style>

2) Set that theme in your Toolbar's layout:

   <android.support.v7.widget.Toolbar
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/toolbar"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="@color/colorPrimary"
     android:theme="@style/ToolbarTheme"/>

Solution 2 : [ Dynamic ]

Kotlin

    fun Toolbar.titleFont(){
    for (i in 0 until childCount) {
        val view = getChildAt(i)
        if (view is TextView && view.text == title) {
            view.typeface = Typeface.createFromAsset(context.assets,"fonts/customfont.ttf")
            break
        }
    }
} 

then use it like

   toolBar.titleFont()

Sherard

Answer 8

You can use this simple method to set custom font to toolbar title.

 Toolbar   toolbar = (Toolbar) findViewById(com.sports.unity.R.id.tool_bar);
        TextView tv = getToolBarTextView();
        tv.settext("Hello");

private TextView getToolBarTextView() {
        TextView titleTextView = null;

        try {
            Field f = mToolBar.getClass().getDeclaredField("mTitleTextView");
            f.setAccessible(true);
            titleTextView = (TextView) f.get(mToolBar);

     Typeface font = Typeface.createFromAsset(getApplicationContext().getAssets(),"fonts/mfont.ttf");
    titleTextView.setTypeface(font);

        } catch (NoSuchFieldException e) {
        } catch (IllegalAccessException e) {
        }
        return titleTextView;
    }

Kaleidoscope

Reflection is sketchy at best. It fails for me when minify is enabled. – Nuzzle

Answer 9

No need to use external textview if you only want to change the font of toolbar title because android.support.v7.appcompat 24.2 Toolbar has method setTitleTextAppearance and you can set its font like below.

create a new style in styles.xml

<style name="CamptonBookTextAppearance">
     <item name="android:fontFamily">@font/campton_book</item>
</style>

and use it

mToolbar.setTitleTextAppearance(this, R.style.CamptonBookTextAppearance);

Krahling

Easy solution! Thanks – Pearly

Answer 10

This works for me

typeFace= Typeface.createFromAsset(this.getAssets(), "fonts/myfont.ttf");
((TextView)toolbar.getChildAt(1)).setTypeface(typeFace);

Judyjudye

Answer 11

I searched for this question as well, and this was one of the first answers that came up. I'll add my solution since the one given here can be counted as a bit outdated (keep in mind it would work nonetheless).

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.

First, in your layout file, add a custom Toolbar (you can set the text size here itself)

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_top"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary">
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/signup"
            android:textSize="22sp" />
    </android.support.v7.widget.Toolbar>

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. If it is not given, you can search for more fonts.

Search for the font you want and select it. Your font gets changed.

Your XML file now will reflect the font you added, there will be an attribute named android:fontFamily

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_top"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary">
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/roboto_slab"
            android:text="@string/signup"
            android:textColor="@color/secondaryBackground"
            android:textSize="22sp" />
    </android.support.v7.widget.Toolbar>

Hope this helped.

Perigee

Answer 12

If anyone has an issue of getting multiple toolbar title (one default and one that you set ) for 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">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:layout_gravity="left"
                android:id="@+id/toolbar_title"
                android:textSize="20sp"/>

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

then do this:

        getSupportActionBar().setTitle(null);//Set the default to null
        typeFace= Typeface.createFromAsset(getAssets(), "fonts/Raleway-Light.ttf");
        toolbarTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
        toolbarTitle.setTypeface(typeFace);

Rabah

I think, better write getSupportActionBar().setDisplayShowTitleEnabled(false); – Rothermere

Answer 13

Just add textapperance in your toolbar xml no need to custumization:-

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.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="@color/colorPrimary"
android:gravity="center"
android:minHeight="?attr/actionBarSize"
**app:titleTextAppearance="@font/montserrat_regular"**// apply your font
app:titleTextColor="@android:color/white" />

Barrier

Answer 14

I made a binding adapter for this purpose.

public class FontBindingAdapter
{
    @BindingAdapter({"font"})
    public static void setFont(Toolbar toolbar, String font)
    {
        for (int i = 0; i < toolbar.getChildCount(); i++) {
            if (toolbar.getChildAt(i) instanceof AppCompatTextView) {
                UIUtil.setFont(font, (AppCompatTextView) toolbar.getChildAt(i));
            }
        }
    }
}

Then use it like:

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/green"
                app:font="@{`LatoRegular`}"
                app:title="@string/setup_favorites"
                app:titleTextColor="@color/white"/>

Clitoris

Answer 15

Thank you @gmetax, it's a good point. It's bad to access textview for each activity. We have to write code below for each activity:

TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);

We've already bind toolbar and we've use toolbar.setTitle(). So, I extend Toolbar and override setTitle method like this:

@Override
public void setTitle(CharSequence title) {
    super.setTitle("");
    mTitle = (TextView) findViewById(R.id.toolbar_title);
    if (mTitle != null) {
        if (!TextUtils.isEmpty(title)) {
            mTitle.setText(title);
        }
    }
}

(Of course, custom font should be setted in CustomTextView class.setTypeface) Now, we can use just like this:

toolbar.setTitle("bla bla");

Perspire

you can use an abstract activity that will do that work and then extend that activity on your activites to not have the same code in various activites – Elviselvish

Answer 16

I still wanted to use the Toolbars title methods, so adding in the custom TextView inside of the Toolbar xml element didn't work for me. Instead, I used the following method to find the TextView:

public static void applyFontForToolbarTitle(Activity context){
    Toolbar toolbar = (Toolbar) context.findViewById(R.id.app_bar);
    for(int i = 0; i < toolbar.getChildCount(); i++){
        View view = toolbar.getChildAt(i);
        if(view instanceof TextView){
            TextView tv = (TextView) view;
            Typeface titleFont = Typeface.
               createFromAsset(context.getAssets(), "fonts/customFont");
            if(tv.getText().equals(context.getTitle())){
                tv.setTypeface(titleFont);
                break;
            }
        }
    }
}

Nuzzle

Answer 17

If you are using google fonts (ie. Open Sans) you can add TextView as a child of your Toolbar like this

<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">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:fontFamily="@font/open_sans"/>

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

and then just set fontFamily property for your TextView in Attributes menu (More Fonts option at the end of the dropdown list)

android:fontFamily="@font/open_sans

Homosporous

Answer 18

You can Use Custom font of toolbar programmatically Like this

1) first Create sub dir fonts in asset folder

2) Add your font files in the fonts folder.

  toolbar.setTitle("Welcome");
        Typeface fromAsset  = Typeface.createFromAsset(getAssets(),"fonts/OpenSans-Light.ttf");
        ((TextView)toolbar.getChildAt(1)).setTypeface(fromAsset); 

Goldshlag

Answer 19

1st create

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


 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toolbar Title"
    android:layout_gravity="center"
    android:id="@+id/toolbar_title" />

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

2nd

your activity you can access the title like so:

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 TextView mTitle = (TextView) 
 toolbar.findViewById(R.id.toolbar_title);

 Typeface font = Typeface.createFromAsset(getAssets(), "Mukta- Regular.ttf");

  mTitle.setTypeface(font);

Geraud

Answer 20

just download what font you want to show in title and move it under res->font folder and create a file over there fontfamily

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android">
<font
    android:fontStyle="normal"
    android:fontWeight="400"
    android:font="@font/futura_book" />


<font
    android:fontStyle="normal"
    android:fontWeight="400"
    android:font="@font/your font file name" />




</font-family>

now add fontfamily="your downloaded font family name like a.ttf" in your xml file thats it

Spasm

Answer 21

Download the custom font and keep it in font folder inside the res folder. As Toolbar is a viewGroup we can place the textView inside the Toolbar and use as follow

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:elevation="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        >
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Toolbar"
            android:gravity="center"
            android:fontFamily="@font/roboto_regular" <--- custom font
            android:textColor="@color/white"
            android:textStyle="bold"
            android:textAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"
            />

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


</android.support.design.widget.AppBarLayout>

This method is also used to make font BOLD.

Regnant

Answer 22

I just add my fonts to the font folder I made in res along with the other fonts, then I made a custom XML file for the bar.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">

<TextView
    android:id="@+id/action_bar_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name"
    android:textSize="30sp"
    android:fontFamily="@font/yourfont"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"/></LinearLayout>

Then, I added this to my MainActivity

getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
    getSupportActionBar().setDisplayShowCustomEnabled(true);
    getSupportActionBar().setCustomView(R.layout.your_xml_file);

Both OTF and TTF works

Casady

Answer 23

The best answer really is the best. If you want to increase (adjust the font size) and change the colour then update your style like this:

<style name="NexaBoldToolbar">
    <item name="android:fontFamily">@font/nexabold</item>
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/fullWhite</item>
</style>

Cedar

Answer 24

I suggest using textview inside the toolbar as it would give better customization options as compared to using the title property.

Like shown over here:

 <com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/materialToolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:minHeight="?attr/actionBarSize"
    android:theme="?attr/actionBarTheme"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_wrapBehaviorInParent="included"
    app:menu="@menu/top_app_bar">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/inter_bold"
        android:text="Good day, Megha J Kamdar"/>
</com.google.android.material.appbar.MaterialToolbar>

Endgame