Home » Android » Android Core » How to customize / change ActionBar font, text, color, icon, layout and so on with Android

About Ricardo Ferreira

How to customize / change ActionBar font, text, color, icon, layout and so on with Android

Hi there!

Today i’m gonna share a very common task with you. How to customize an ActionBar on Android. We will change layout, font, textsize, textcolor, add listener to it, navigate back, hide title and home icon.

At the end we will have something like this:

 
 
 
 
 
03

Well, lets start by changing some API provided settings.

Downloading Font

First of all, go to 1001freefonts and donwload a font you want to apply to your text. It is free!

After downloading, create a folder called font into the folder assets in your projetct’s root. (create it, if not exists already) It looks like this: projectname>assets>font>yourfont.fft

01

Creating custom colors

We want to change the color of our font also. So for this reason, create two colors in your strings.xml file like this:

<color name="selected">#824986</color>
    <color name="unselected">#E4DFEC</color>

Creating custom ActionBar Layout

As we want to customize our actionBar, we will need to create a customized layout for it. So in your layout folder, create a new layout.xml file called custom_action_bar.xml like this:

< ?xml version="1.0" encoding="utf-8"? >
 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionBar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:paddingLeft="5dp"
    android:paddingTop="7dp"
    android:orientation="horizontal" >
    < TextView
        android:id="@+id/titleFragment1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Syntax"
        android:textSize="20sp"
        android:textColor="@color/selected" / >

    < TextView
        android:id="@+id/titleFragment2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="ionary" / >
< / LinearLayout>

Create createCutomActionBarTitle() in your Activity

Create this method and enable setDisplayShowCustomEnable to true and setDisplayShowTitleEnable to false. Then inflate the above created custom_action_bar.xml file. Read your new downloaded font and set it to the textviews. At least add it to the actionBar. Done with the layout.

    private void createCutomActionBarTitle(){
        this.getActionBar().setDisplayShowCustomEnabled(true);
        this.getActionBar().setDisplayShowTitleEnabled(false);

        LayoutInflater inflator = LayoutInflater.from(this);
        View v = inflator.inflate(R.layout.custom_action_bar, null);

        Typeface tf = Typeface.createFromAsset(getAssets(),"font/yourfont.ttf");
        ((TextView)v.findViewById(R.id.titleFragment1)).setTypeface(tf);
        ((TextView)v.findViewById(R.id.titleFragment2)).setTypeface(tf);

        //assign the view to the actionbar
        this.getActionBar().setCustomView(v);
    }

Adding behaviors and navigate back funcions

A disavantage of customized actionBars is that you have to worry about everything. Including default behaviors like navigating back and enabling actions on the new inserted TextViews. We will do this now. Normally you navigate from activity to activity and after doing something you’d like to give the possibility to the users to navigate back over touching the actionBars title. To do so, enhance the method createCustomActionBarTitle like this:

private void createCutomActionBarTitle(){
        this.getActionBar().setDisplayShowCustomEnabled(true);
        this.getActionBar().setDisplayShowTitleEnabled(false);

        LayoutInflater inflator = LayoutInflater.from(this);
        View v = inflator.inflate(R.layout.action_bar_contribution, null);

        Typeface tf = Typeface.createFromAsset(getAssets(),"font/fat_tats.ttf");
        TextView frag1 = (TextView)v.findViewById(R.id.titleFragment1);
        frag1.setTypeface(tf);
        TextView frag2 = (TextView)v.findViewById(R.id.titleFragment2);
        frag2.setTypeface(tf);
        
        frag1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(YourCurrentActivity.this, YourTargetActivity.class));
                finish();
            }
        });
        frag2.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(YourCurrentActivity.this, YourTargetActivity.class));
                finish();
            }
        });

        //assign the view to the actionbar
        this.getActionBar().setCustomView(v);
    }

Adding MetaData to the Manifest file

We are almost done. To be able to navigate back, we need to write an entry in the manifest file. The “YourTargetActivity” is the activity that will be called, wenn we press the actionBars title. In our case it would look like this:

< activity android:label="yourActivityLabelName" 
android:name="your.package.YourActivity" 
android:parentactivityname="your.package.YourTargetActivity" 
android:screenorientation="landscape" 
android:windowsoftinputmode="stateHidden" >

            
            < meta-data android:name="android.support.PARENT_ACTIVITY" 
                 android:value="your.package.YourTargetActivity" >
        < / meta-data> 
< / activity>

That’s all! hope you like it! The application to download is here:

03 (1)

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*


+ two = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Do you want to know how to develop your skillset and become a ...

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!
Get ready to Rock!
To download the books, please verify your email address by following the instructions found on the email we just sent you.

THANK YOU!

Close