How to change the fonts of Title in Action bar in android
Asked Answered
I

3

7

I want to change the Fonts of my title in the action bar. I have set the title programatically, in xml it was not showing any effect. Now I want to change the font of that title. I saw some post related to this, but It was not having the problem which I am facing.

Here is my code.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    //SETTING ITS LAYOUT
    setContentView(R.layout.activity_start);
Typeface typeface = getResources().getFont(R.font.dancingscriptregular);


    //SETTING TITLE OF THE APP IN BLUE COULOR
    getSupportActionBar().setTitle(Html.fromHtml("<font color='#1F9FD9'>Expense Manager <font>"));

  ...

 }

Now what next?, how to use the typeface to set the font of my title.

Please Help!

In androidMenifest.xml

<activity
        android:parentActivityName=".StartActivity"
        android:name=".ExpenseActivity"
        android:fitsSystemWindows="true"
        android:label="@string/expenseActivity" <!--This Line is not working-->
        android:screenOrientation="portrait"
        android:textColor="@color/batteryChargedBlue"
        android:theme="@style/ExpenseTheme" />
    <activity

ExpenseTheme

<style name="ExpenseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/white</item>
    <item name="colorPrimaryDark">@color/batteryChargedBlue</item>
    <item name="colorAccent">@color/greenBlue</item>
    <item name="android:navigationBarColor">@color/batteryChargedBlue</item>

</style>

activity_start.xml Code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".StartActivity">

<LinearLayout
    android:id="@+id/part_1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_above="@+id/part_2"
    android:gravity="center"
    >

    <TextView
        android:id="@+id/welcome"
        android:gravity="center"
        android:layout_marginBottom="20dp"
        android:textColor="@color/greenBlue"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/caviar_dreams_bold"
        android:text="Welcome !!!"
        android:textSize="55dp"


        />

    <TextView
        android:id="@+id/info"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:textColor="@color/greenBlue"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/dancingscriptregular"
        android:text="@string/info"
        android:textSize="35dp"
        />

    <EditText
        android:id="@+id/imaEt"
        android:layout_marginTop="60dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/enterIMA"
        android:background="@drawable/border_and_lines_tp"
        android:padding="15dp"
        android:textColorHint="@color/greenBlue"
        android:fontFamily="@font/caviar_dreams_bold"
        android:layout_gravity="center"
        android:inputType="numberDecimal"
        />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/imaBtn"
        android:layout_width="110dp"
        android:layout_height="55dp"
        android:background="@color/batteryChargedBlue"
        android:theme="@style/ButtonTheme"
        android:text="Enter"
        android:textSize="15sp"
        android:gravity="center"
        android:layout_marginTop="15dp"
        android:onClick="setInitialMonthlyAmount"
        app:cornerRadius="5dp"
        android:textColor="@color/white"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/imaSkip"
        android:layout_width="75dp"
        android:layout_height="50dp"
        android:background="@color/batteryChargedBlue"
        android:theme="@style/AppTheme"
        android:text="Skip"
        android:textSize="15sp"
        android:gravity="center"
        android:layout_marginTop="15dp"
        android:onClick="setOnSkipClicked"
        app:cornerRadius="5dp"
        android:textColor="@color/white"/>

    <!-- <Button
         android:id="@+id/imaBtn"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:layout_marginTop="15dp"
         android:background="@drawable/borders_and_lines"
         android:onClick="setInitialMonthlyAmount"
         android:text="Enter"
         android:textColor="#FFF" /> -->

    <!-- <Button
         android:id="@+id/imaSkip"
         android:layout_gravity="center"
         android:layout_marginTop="15dp"
         android:text="Continue >>"
         android:textColor="#FFF"
         android:onClick="setOnSkipClicked"
         android:background="@drawable/borders_and_lines"
         android:layout_width="100dp"
         android:layout_height="30dp"
         /> -->



</LinearLayout>

<LinearLayout
    android:id="@+id/part_2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">

    <TextView
        android:id="@+id/help"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/help"
        android:textColor="@color/greenBlue"
        android:fontFamily="@font/dancingscriptregular"
        android:textStyle="bold"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:gravity="right"
        android:textSize="20dp"
        android:clickable="true"/>

</LinearLayout>
</RelativeLayout>

This my actual layout and I have achieved by using the following file, which I have posted. now I just want to change the font of the black circled text.

Ideally answered 22/9, 2019 at 6:31 Comment(6)
share your xml,it will be better to set font and color on xml itself.Acantho
here, I have added @EmadSeliemIdeally
please share your toolbar xml file.Acantho
I don't have any such file!! @EmadSeliemIdeally
Check Out my Edit and Image @EmadSeliemIdeally
This Question has been Answered! #58047147 Check this Link ↑Sulphuryl
D
3

Just use these code:

if you are using "Holo Theme" then use this:

    int titleId = getResources().getIdentifier("action_bar_title", "id",
            "android");
    TextView yourTextView = (TextView) findViewById(titleId);
    yourTextView.setTextColor(getResources().getColor(R.color.black));
   Typeface yourTypeface = Typeface.createFromAsset(getAssets(), "fonts/your_font.ttf");
   //or get from resource
   yourTextView.setTypeface(yourTypeface);

if you are using "Material Theme" then use this:

Toolbar toolbar = (Toolbar) findViewById(R.id.action_bar);
TextView textView1 = (TextView) toolbar.getChildAt(0);//title
TextView textView2 = (TextView) toolbar.getChildAt(1);//subtitle
textView1.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
textView2.setTextColor(getResources().getColor(R.color.colorAccent));
   Typeface yourTypeface1 = Typeface.createFromAsset(getAssets(), "fonts/your_font1.ttf");
   Typeface yourTypeface2 = Typeface.createFromAsset(getAssets(), "fonts/your_font2.ttf");
   //or get from resource
   textView1.setTypeface(yourTypeface1);
   textView2.setTypeface(yourTypeface2);

it works and it is very simple! enter image description here

Dunnite answered 22/9, 2019 at 6:42 Comment(3)
Comments are not for extended discussion; this conversation has been moved to chat.Microphotograph
R.id.action_bar - ID of Toolbar perfect, but what is the ID of Title and SubTitle..?Indigestible
You can access them with getChildAt() method. @V.Y.Dunnite
N
8

You have different options.
In your activity you can use something like in your layout:

   <com.google.android.material.appbar.AppBarLayout>

        <com.google.android.material.appbar.MaterialToolbar
            style="@style/MyToolbar"
            ...
            />

    </com.google.android.material.appbar.AppBarLayout>

Then you can define a custom style:

  <!-- Toolbar -->
  <style name="MyToolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="titleTextAppearance">@style/My_TextAppearance_Toolbar</item>    
  </style>

  <style name="My_TextAppearance_Toolbar" parent="@style/TextAppearance.MaterialComponents.Headline6">
    <item name="fontFamily">....</item>
    <item name="android:fontFamily">....</item>
    <item name="android:textStyle">bold|italic</item>
  </style>

enter image description here

Otherwise you can also use the Toolbar API:

   toolbar.setTitle("Material Title");
   toolbar.setTitleTextAppearance(this,R.style.My_TextAppearance_Toolbar);

Another option is to use app:titleTextAppearance attribute in your layout:

  <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:titleTextAppearance="@style/My_TextAppearance_Toolbar"
            .../>
Nephritic answered 22/9, 2019 at 8:12 Comment(3)
I don't want to create any toolbar. I have default actionbar in my activity. whose title I have set using getSupportActionBar().setTitle(Html.fromHtml("<font color='#1F9FD9'>Expense Manager <font>"));. Now I just Want to change the font. Is there any simpler way. Can you study my code and then tell me where to put your codes.@GabrieleMariottiIdeally
Check Out my Edit and Image @GabrieleMariottiIdeally
@Nomankhanbhai It is not a problem. Just use setSupportActionBar(toolbar);. In this way you can continue using the ActionBar API. Otherwise you can use the Toolbar API and use toolbar.setTitle(...). I've just updated the answer with other options. You can use the Toolbar API or the ActionBar API as you prefer.Nephritic
D
3

Just use these code:

if you are using "Holo Theme" then use this:

    int titleId = getResources().getIdentifier("action_bar_title", "id",
            "android");
    TextView yourTextView = (TextView) findViewById(titleId);
    yourTextView.setTextColor(getResources().getColor(R.color.black));
   Typeface yourTypeface = Typeface.createFromAsset(getAssets(), "fonts/your_font.ttf");
   //or get from resource
   yourTextView.setTypeface(yourTypeface);

if you are using "Material Theme" then use this:

Toolbar toolbar = (Toolbar) findViewById(R.id.action_bar);
TextView textView1 = (TextView) toolbar.getChildAt(0);//title
TextView textView2 = (TextView) toolbar.getChildAt(1);//subtitle
textView1.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
textView2.setTextColor(getResources().getColor(R.color.colorAccent));
   Typeface yourTypeface1 = Typeface.createFromAsset(getAssets(), "fonts/your_font1.ttf");
   Typeface yourTypeface2 = Typeface.createFromAsset(getAssets(), "fonts/your_font2.ttf");
   //or get from resource
   textView1.setTypeface(yourTypeface1);
   textView2.setTypeface(yourTypeface2);

it works and it is very simple! enter image description here

Dunnite answered 22/9, 2019 at 6:42 Comment(3)
Comments are not for extended discussion; this conversation has been moved to chat.Microphotograph
R.id.action_bar - ID of Toolbar perfect, but what is the ID of Title and SubTitle..?Indigestible
You can access them with getChildAt() method. @V.Y.Dunnite
S
1

The best way is to create a custom toolbar. Stay with me...

in xml layout(activity_start.xml), you add code below to xml file:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".activity.YourActivity"
    android:orientation="vertical"
    android:paddingBottom="5dp">

    <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" (**id of toolbar**)
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" (**color of background**)
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layoutDirection="rtl"> (**direction-rtl-ltr**)

            <android.support.v7.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Start Activity" (**text for display on toolbar**)
                android:textSize="23dp" (**text size**)
                android:fontFamily="@font/yekan" (**font of text :D**)
                android:textColor="#ffffff" (**text color**)
                (**And any other code you like for textview :)*)
            />

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

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

This way you can have an actionbar with a font without writing code in the Java file.

Add code below to java file: And to use the toolbar in Java code you can get it with code below:

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

EDIT: If you encounter an error while using AppBarLayout, Create BasicActivity Then follow the steps above

Sulphuryl answered 22/9, 2019 at 6:50 Comment(8)
I cleared my previous code, then I copied your code in the xml and removed the hits and texts. After that there were no errors but in the preview section. it was just showing this (<android.support.design.widget.AppBarLayout...) text in grey background. My android studio is using androidx libraries FYI. May because of that. Do you have any other way to do it. @SulphurylIdeally
@Noman khanbhai I didn't say erase the previous codes. I said add my code to the xml layer. I edited my answer. check it...Sulphuryl
I am editing my post and sharing my xml code. Kindly show me where to put your code and also check my androidMenifest and .StartActivity Theme(It is using ExpenseTheme)[Which already contains ActionBar]. @SulphurylIdeally
Here, I have Provided my activity_start.xml code. @SulphurylIdeally
Change the colorPrimary in the theme for display the title.Sulphuryl
Check Out my Edit and Image @SulphurylIdeally
Really Thank you for your kind Help and Support @Sulphuryl . Solution of majidghafouri worked for me. Can you please upvote my post.Ideally
I edited the answer. Check out... @Noman khanbhaiSulphuryl

© 2022 - 2024 — McMap. All rights reserved.