In this tutorial, we will create an example to customize ActionBar with a custom layout in Android. Before we begin, I assume you already have created an Android application.

[box style=”2″]

Toolbar is a new standard replacement for ActionBar, introduced in Android Lollipop. It supports whole bunch of customization as you wish along with no or less modification to ActionBar logic.
[/box]
I recommend using ToolBar. Checkout our Android Lollipop ToolBar Example.

-Advertisement-

Now let us create a custom layout xml file for your ActionBar.

custom_actionbar.xml

<?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"
    android:background="@drawable/black_pattern" >

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textAllCaps="true"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fff"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        android:src="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="8dp"
        android:background="@null"
        android:src="@android:drawable/ic_menu_rotate" />

</RelativeLayout>

Activity Class (MainActivity.java)

The above declared layout will be used as custom layout for Activity ActionBar. You can inflate custom view to ActionBar setCustomView() method. Let us have a look at the code snippet below.

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		ActionBar mActionBar = getActionBar();
		mActionBar.setDisplayShowHomeEnabled(false);
		mActionBar.setDisplayShowTitleEnabled(false);
		LayoutInflater mInflater = LayoutInflater.from(this);

		View mCustomView = mInflater.inflate(R.layout.custom_actionbar, null);
		TextView mTitleTextView = (TextView) mCustomView.findViewById(R.id.title_text);
		mTitleTextView.setText("My Own Title");

		ImageButton imageButton = (ImageButton) mCustomView
				.findViewById(R.id.imageButton);
		imageButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View view) {
				Toast.makeText(getApplicationContext(), "Refresh Clicked!",
						Toast.LENGTH_LONG).show();
			}
		});

		mActionBar.setCustomView(mCustomView);
		mActionBar.setDisplayShowCustomEnabled(true);
	}

}

Output

ActionBar Custom View Example in Android

Tagged in : Android UI

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.
  • Thanks @Truculento.

  • Nurchi

    Thanks. You just save so much of my time…

  • Thắng Đinh Xuân

    Could you please help, how can i use the elements on the custom view (of Action bar) with different activities?

    Example: My header has “Search button”, but i want this button work different on different activities.

    Thanks you.

    • For this you need to create a super class Activity where you can abstract the logic of the custom action bar. All other activity must extend your Activity super class.

  • Giovanna Furfaro

    sorry , my application crashes with this code :(

  • Hidden Sender

    This is good. But right icon margin is not working for me.

  • Nilanchala Panigrahy

    Looks like an issue with your theme. Your theme doesn’t contains a ActionBar, and hence mActionBar appears to be null.

    Check in style.xml to know which theme are you using for your activity.

    • thidenthi

      thanks for your answer

      i use Theme.AppCompat.Light.DarkActionBar , the default theme without custumization

      • Nilanchala Panigrahy

        can you change your theme as below and see, if it works

        <!– Base application theme. –>
        <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!– Customize your theme here. –>
        </style>

        • thidenthi

          Before see the cutom action bar , sometimes we have time to see the default action bar and the custom load over the default. :s

          thanks for your help !

  • Checkout my tutorial using Navigation drawer, Recyclerview, Toolbar with toolbar action items. It will certainly help you.

    https://github.com/npanigrahy/Android-Lollipop-Navigation-Drawer

  • add the following property to ImageView

    android:layout_toRightOf=”@id/imageView1″

  • bosk

    Hi man, great guide.
    I dont know why, but it seems not to work for me.
    When I start the app, it crashes.
    I have also tried doing a blank project and use your xml file and your activity, but still doesn’t work.
    Any advices?

    • What you see on the crash logs? Can you paste over here?

  • Vincent

    I did it. It worked but it was slow. The app showed the original action bar then it showed the custom action bar.
    I want to show only the custom action bar. What should I do?

    • Is this your first activity? What is the delay time? is it significant.

      Usually android apps takes a while to load and during that time it will show the app theme as mentioned in Manifest. Let me know if it is the launcher activity issue. It has a hack too.

  • Arif Sukmawan

    Great tutorial. but how we can resize the height of actionbar.?

  • Janakiram Jani

    Hi who to keep image on actionbar has my icon …………………

    • In the example, for imageView1, I am using @drawable/ic_launcher. You may just paste your image in drawable folder and link with the name of your drawable.

      • If you’re not using custom view you may use below code

        ActionBar actionBar = getActionBar();
        actionBar.setIcon(R.drawable.your_drawable);

  • abbasali

    Hi , Very Thanks You Solved my problem :X :X :X

  • Jeb

    Mr. Neel. Thanks a looooooooooooooooot for this.
    I tried many different approaches and yours was the only one that worked.
    Thank you again.

  • Gaurav

    How to open the navigation drawer with the left icon?

  • Josh Adams

    Thank you! I spent so much time mucking around with XML versions of defining custom views, I think I’m going to drop that altogether, this worked first time, no dramas – really appreciate it.

  • SundaraManikandan

    Hi i want to create a navigation drawer like this. In that when the user click on the circle it has to take me to the gallery and when the user chose an image it has to come inside the circle. and also i want to show a search box inside the navigation drawer list item. Iam using TabActivity in my program. So please do let me know how to use both tabactivity and actionbaractivity. iam having almost 20+ activities. so please help me to implement a custom action bar in my activities.

  • asd

    my image will overlap the textview

  • adesinamark

    A very short but great hint there. How do you handle it when you have more than 20 activities in your app?

    • You must create an abstract BaseActivity and put the ActionBar code to an method inside that. You can extend your other 20 activity from BaseActivity instead of Activity. Then just call your method from all activity where you need the custom actionbar to work.