Creating you own custom ActionBar layout in Android

The default actionbar in Android is handy when you don’t require any customizations, but when you do need some customizations to your actionbar, the default actionbar is not very cooperative, especially if you want to customize the home button icon. So, it’s better off to just write your own custom actionbar and it’s pretty easy to come up with your own custom action bar layout. It’s just to write layout file for the ActionBar and override the ActionBar with this layout file.

custom_actionbar.xml, they layout file for the custom action bar, a Button and a TextView on the left, and a Button on the right.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp" >

    <Button
        android:id="@+id/btn_home"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:background="#0cead0"
        android:text="Home" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/btn_home"
        android:gravity="center"
        android:textColor="#fff"
        android:textStyle="bold"
        android:text="Hello"/>

    <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="#0cead0"
        android:text="options"/>
</RelativeLayout>

In the onCreate method of the activity with the custom action bar, add the following to override the default action bar.

//Get the default actionbar instance
ActionBar mActionBar = getActionBar();
mActionBar.setDisplayShowHomeEnabled(false);
mActionBar.setDisplayShowTitleEnabled(false);

//Initializes the custom action bar layout
LayoutInflater mInflater = LayoutInflater.from(this);
View mCustomView = mInflater.inflate(R.layout.custom_actionbar, null);
mActionBar.setCustomView(mCustomView);
mActionBar.setDisplayShowCustomEnabled(true);

//Detect the button click event of the home button in the actionbar
Button btnHome = (Button) findViewById(R.id.btn_home);
btnHome.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(getApplicationContext(), "Home Button Clicked", Toast.LENGTH_SHORT).show();
    }
});

In case if you are using a v7 appcompat support library, and you see an empty space or margin or padding on the left of your custom actionbar, set the contentInsetStart and contentInsetEnd to 0 dp in your style for the actionbar. For example in this case, the AppTheme is set as the theme for the activity with the custom action bar, the actionBarStyle in AppTheme is using the AppThemeActionBar, which sets contentInsetStart and contentInsetEnd to 0 dp.

<style name="AppTheme" parent="android:Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/AppThemeActionBar</item>
    <item name="android:logo">@android:color/transparent</item>
</style>

<style name="AppThemeActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:actionBarSize">40dp</item>
    <item name="contentInsetStart">0dp</item>
    <item name="contentInsetEnd">0dp</item>
</style>

Complete example in Github

Search within Codexpedia

Custom Search

Search the entire web

Custom Search