Tutorials Android ActionBar with Custom View Example in Android

ActionBar with Custom View Example in Android

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.

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

Total
0
Shares
guest
35 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
adesinamark
adesinamark
8 years ago

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

javatechig
javatechig
8 years ago
Reply to  adesinamark

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.

asd
asd
8 years ago

my image will overlap the textview

SundaraManikandan
SundaraManikandan
8 years ago

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.

Josh Adams
Josh Adams
8 years ago

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.

javatechig
javatechig
8 years ago
Reply to  Josh Adams

Thanks Josh.

Gaurav
Gaurav
8 years ago

How to open the navigation drawer with the left icon?

Nilanchala Panigrahy
Nilanchala Panigrahy
8 years ago
Reply to  Gaurav
Jeb
Jeb
8 years ago

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

javatechig
javatechig
8 years ago
Reply to  Jeb

Thanks Jeb.. 🙂

abbasali
abbasali
8 years ago

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

Janakiram Jani
Janakiram Jani
7 years ago

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

javatechig
javatechig
7 years ago
Reply to  Janakiram Jani

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.

javatechig
javatechig
7 years ago
Reply to  javatechig

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

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

Arif Sukmawan
Arif Sukmawan
7 years ago

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

JavaTechig
JavaTechig
7 years ago
Reply to  Arif Sukmawan

I would recommend you to use ToolBar instead of Actionbar. Toolbar is a new standard replacement for ActionBar. Supports whole bunch of customization as you wish.

http://stacktips.com/android/android-lollipop-toolbar-example

Vincent
Vincent
7 years ago

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?

javatechig
javatechig
7 years ago
Reply to  Vincent

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.

bosk
bosk
7 years ago

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?

JavaTechig
JavaTechig
7 years ago
Reply to  bosk

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

JavaTechig
JavaTechig
7 years ago

add the following property to ImageView

android:layout_toRightOf=”@id/imageView1″

JavaTechig
JavaTechig
7 years ago

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

Nilanchala Panigrahy
Nilanchala Panigrahy
7 years ago

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
thidenthi
7 years ago

thanks for your answer

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

Nilanchala Panigrahy
Nilanchala Panigrahy
7 years ago
Reply to  thidenthi

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
thidenthi
7 years ago

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 !

Hidden Sender
Hidden Sender
7 years ago

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

Giovanna Furfaro
Giovanna Furfaro
7 years ago

sorry , my application crashes with this code 🙁

Nilanchala Panigrahy
Nilanchala Panigrahy
7 years ago

Whats in the log?

Thắng Đinh Xuân
Thắng Đinh Xuân
7 years ago

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.

JavaTechig
JavaTechig
7 years ago

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.

Nurchi
Nurchi
6 years ago

Thanks. You just save so much of my time…

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago
Reply to  Nurchi

You’re welcome !

Nilanchala Panigrahy
Nilanchala Panigrahy
5 years ago

Thanks @Truculento.

Đăng Tuyền
Đăng Tuyền
3 years ago

” Unfortunaly, App has stopped “

Previous Post
Android Tutorials

Edittext Validation in Android Example

Next Post
Java Tutorials

Java TreeSet Example

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
35
0
Would love your thoughts, please comment.x
()
x