Tag Archives: ActionBarSherlock

Android Action Bar Sherlock: Mimicking action item styling in a custom action bar.

When using Action Bar Sherlock in your project there may be times when you want to provide your own custom view for the action bar. As part of your custom view, you might also want to add your own action buttons which look and feel just like the standard action item views. For instance, the following is a simple custom action bar view with some title text on the left and a search button on the right; the aim here is to ensure that the search button behaves just like a standard action item.

Custom Action Bar view with search button

Custom Action Bar view with search button

When the search button on the right is selected, visually it should appear the same as a standard action item:

Custom Action Item with standard styling

Custom Action Item with standard styling

To accomplish this is fairly straightforward:

  • Define the style for your action bar button(s) in your styles.xml resource file:
 <style name="Widget.CustomSearch.ActionButton" parent="Widget.Sherlock.Light.ActionButton">
     </style>

This step isn’t entirely necessary as one could just reference the Widget.Sherlock.Light.ActionButton style directly in the custom layout below.

  • You then need to define a custom layout view for your action bar. In our case it is something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/actionbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textColor="@color/ab_custom_view_text_color"
            android:textSize="16sp"
            android:textStyle="bold" >
        </TextView>

        <TextView
            android:id="@+id/actionbar_subtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/action_bar_subtitle"
            android:textColor="@color/ab_custom_view_text_color"
            android:textSize="11sp" >
        </TextView>
    </LinearLayout>

    <ImageView
        style="@style/Widget.CustomSearch.ActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:clickable="true"
        android:src="@drawable/ab_search" />

</RelativeLayout>

In this particular case a simple ImageView has been used to represent the search button. The important things to note here are: 1) our custom action button style (@style/Widget.CustomSearch.ActionButton) is applied to the view; and 2) the view is made clickable.

  • In your main Activity class, enable the use of a custom action bar view and apply your custom layout:

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);

		...

		// Allow custom view in action bar
		getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
		getSupportActionBar().setCustomView(
			R.layout.ab_custom_view);

		...
	}

Where R.layout.ab_custom_view is the layout resource defined in step 2.