Custom Action Bar in Android

You can utilize the Action Bar to display more information by customizing it. 

In this tutorial we will learn to customize the Action Bar similar to TOI and Whatsapp applications.

Download Source Code Download

Project Hierarchy

Overview

ActionBar actionBar = getActionBar();

//set actionbar background

actionBar.setBackgroundDrawable(new ColorDrawable(Color.argb(255,255,255,255)));

//hide back button

actionBar.setDisplayShowHomeEnabled(false);

//hide title

actionBar.setDisplayShowTitleEnabled(false);

//enable customLayout

actionBar.setDisplayShowCustomEnabled(true);

//set action bar icon API 14+

actionBar.setIcon(getResources().getDrawable(R.drawable.action_bar_icon));

//set contentView require View and LayoutParams

LayoutParams layout = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);

ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(R.layout.custom_layout, null);

actionBar.setCustomView(actionBarLayout, layout);

TOI Action Bar

custom_toi.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="match_parent"     android:background="@android:color/white"     android:gravity="center_vertical"     android:orientation="horizontal" >     <Button         android:layout_width="32dp"         android:layout_height="32dp"         android:layout_marginLeft="10dp"         android:background="@drawable/ic_navigation_drawer" />     <TextView         android:id="@+id/textViewTitle"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:gravity="center"         android:singleLine="true"         android:text="THE TIMES OF INDIA"         android:textColor="@android:color/black"         android:textSize="20dp"         android:textStyle="bold" /> </LinearLayout>

ActivityTOIActionBar.java import android.app.ActionBar; import android.app.ActionBar.LayoutParams; import android.app.Activity; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.view.Menu; import android.view.ViewGroup; import com.example.customactionbar.R; public class ActivityTOIActionBar extends Activity {       @Override       protected void onCreate(Bundle savedInstanceState) {             super.onCreate(savedInstanceState);             customActionBar();             setContentView(R.layout.dummy);       }       private void customActionBar() {             ActionBar actionBar = getActionBar();             actionBar.setBackgroundDrawable(new ColorDrawable(Color.argb(255, 255, 255, 255)));             actionBar.setDisplayShowHomeEnabled(false);             actionBar.setDisplayShowTitleEnabled(false);             actionBar.setDisplayShowCustomEnabled(true);             LayoutParams layout = new LayoutParams(LayoutParams.FILL_PARENT,                         LayoutParams.FILL_PARENT);             ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(R.layout.custom_toi, null);             actionBar.setCustomView(actionBarLayout, layout);       }       @Override       public boolean onCreateOptionsMenu(Menu menu) {             getMenuInflater().inflate(R.menu.main, menu);             return true;       } }

Whatsapp Action Bar

custom_whatsapp.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="match_parent"     android:gravity="center_vertical"     android:orientation="vertical" >     <TextView         android:id="@+id/textViewTitle"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:singleLine="true"         android:text="Ankit"         android:textColor="@android:color/white"         android:textSize="20dp"/>     <TextView         android:id="@+id/textViewTitle"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:singleLine="true"         android:text="online"         android:textColor="#C0C0C0"         android:textSize="15dp" /> </LinearLayout>

ActivityWhatsappActionBar.java import android.annotation.TargetApi; import android.app.ActionBar; import android.app.ActionBar.LayoutParams; import android.app.Activity; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Build; import android.os.Bundle; import android.view.Menu; import android.view.ViewGroup; import com.example.customactionbar.R; public class ActivityWhatsappActionBar extends Activity{       @Override       protected void onCreate(Bundle savedInstanceState) {             super.onCreate(savedInstanceState);             customActionBar();             setContentView(R.layout.dummy);       }             @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)       private void customActionBar() {             ActionBar actionBar = getActionBar();             actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#004d40")));             actionBar.setIcon(getResources().getDrawable(R.drawable.action_bar_icon));             actionBar.setDisplayShowCustomEnabled(true);             actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_HOME_AS_UP);                   LayoutParams layout = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);             ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(R.layout.custom_whatsapp, null);             actionBar.setCustomView(actionBarLayout, layout);       }       @Override       public boolean onCreateOptionsMenu(Menu menu) {             getMenuInflater().inflate(R.menu.whatsapp, menu);             return true;       }     }

Centre Title Action Bar

custom_centre_title.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="match_parent"     android:gravity="center_vertical"     android:orientation="horizontal" >     <TextView         android:id="@+id/textViewTitle"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:gravity="center"         android:singleLine="true"         android:text="Title"         android:textColor="@android:color/black"         android:textSize="20dp"         android:textStyle="bold" /> </LinearLayout>

ActivityCentreTitleActionBar.java import android.app.ActionBar; import android.app.ActionBar.LayoutParams; import android.app.Activity; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.view.ViewGroup; import com.example.customactionbar.R; public class ActivityCentreTitleActionBar extends Activity {       @Override       protected void onCreate(Bundle savedInstanceState) {             super.onCreate(savedInstanceState);             customActionBar();             setContentView(R.layout.dummy);       }       private void customActionBar() {             ActionBar actionBar = getActionBar();             actionBar.setBackgroundDrawable(new ColorDrawable(Color.argb(255, 255, 255, 255)));             actionBar.setDisplayShowHomeEnabled(false);             actionBar.setDisplayShowTitleEnabled(false);             actionBar.setDisplayShowCustomEnabled(true);             LayoutParams layout = new LayoutParams(LayoutParams.FILL_PARENT,                         LayoutParams.FILL_PARENT);             ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(R.layout.custom_centre_title, null);             actionBar.setCustomView(actionBarLayout, layout);       } }

Download Source Code Download