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 two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

Leave a Reply


four + = 7



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

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

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close