如何为工具栏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?

Answer 1

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);

Answer 2

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);

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;
            }
        }
    }
}

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

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

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.

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); } }

Answer 7

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;
    }

Answer 8

This works for me

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

Answer 9

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.

Answer 10

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);

Answer 11

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);

Answer 12

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

Answer 13

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

Answer 14

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;
            }
        }
    }
}

Answer 15

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

Answer 16

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

Answer 17

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); 

Answer 18

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);

Answer 19

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

Answer 20

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 .

Answer 21

Two way you can do custom font on toolbar title

Step : 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"/>

Step 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()

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

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>