How can I implement custom Action Bar with custom buttons in Android?

Question

I want to implement custom ActionBar which must look like this:

So questions:

1. How can I implement a button like custom view: just some image?
2. How can I draw a line on the top of the ActionBar?
3. And how can I implement buttons without separator lines: add tabs on the ActionBar or what?

Answer 1

1 You can use a drawable

<menu xmlns:android="http://schemas.android.com/apk/res/android">     <item android:id="@+id/menu_item1"         android:icon="@drawable/my_item_drawable"         android:title="@string/menu_item1"         android:showAsAction="ifRoom" /> </menu> 

2 Create a style for the action bar and use a custom background:

<resources>     <!-- the theme applied to the application or activity -->     <style name="CustomActivityTheme" parent="@android:style/Theme.Holo">         <item name="android:actionBarStyle">@style/MyActionBar</item>         <!-- other activity and action bar styles here -->     </style>     <!-- style for the action bar backgrounds -->     <style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">         <item name="android:background">@drawable/background</item>         <item name="android:backgroundStacked">@drawable/background</item>         <item name="android:backgroundSplit">@drawable/split_background</item>     </style> </resources> 

3 Style again android:actionBarDivider

The android documentation is very usefull for that.

Answer 2

This is pretty much as close as you'll get if you want to use the ActionBar APIs. I'm not sure you can place a colorstrip above the ActionBar without doing some weird Window hacking, it's not worth the trouble. As far as changing the MenuItems goes, you can make those tighter via a style. It would be something like this, but I haven't tested it.

<style name="MyTheme" parent="android:Theme.Holo.Light">     <item name="actionButtonStyle">@style/MyActionButtonStyle</item> </style>  <style name="MyActionButtonStyle" parent="Widget.ActionButton">     <item name="android:minWidth">28dip</item> </style> 

Here's how to inflate and add the custom layout to your ActionBar.

    // Inflate your custom layout     final ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(             R.layout.action_bar,             null);      // Set up your ActionBar     final ActionBar actionBar = getActionBar();     actionBar.setDisplayShowHomeEnabled(false);     actionBar.setDisplayShowTitleEnabled(false);     actionBar.setDisplayShowCustomEnabled(true);     actionBar.setCustomView(actionBarLayout);      // You customization     final int actionBarColor = getResources().getColor(R.color.action_bar);     actionBar.setBackgroundDrawable(new ColorDrawable(actionBarColor));      final Button actionBarTitle = (Button) findViewById(R.id.action_bar_title);     actionBarTitle.setText("Index(2)");      final Button actionBarSent = (Button) findViewById(R.id.action_bar_sent);     actionBarSent.setText("Sent");      final Button actionBarStaff = (Button) findViewById(R.id.action_bar_staff);     actionBarStaff.setText("Staff");      final Button actionBarLocations = (Button) findViewById(R.id.action_bar_locations);     actionBarLocations.setText("HIPPA Locations"); 

Here's the custom layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:enabled="false"     android:orientation="horizontal"     android:paddingEnd="8dip" >      <Button         android:id="@+id/action_bar_title"         style="@style/ActionBarButtonWhite" />      <Button         android:id="@+id/action_bar_sent"         style="@style/ActionBarButtonOffWhite" />      <Button         android:id="@+id/action_bar_staff"         style="@style/ActionBarButtonOffWhite" />      <Button         android:id="@+id/action_bar_locations"         style="@style/ActionBarButtonOffWhite" />  </LinearLayout> 

Here's the color strip layout: To use it, just use merge in whatever layout you inflate in setContentView.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="@dimen/colorstrip"     android:background="@android:color/holo_blue_dark" /> 

Here are the Button styles:

<style name="ActionBarButton">     <item name="android:layout_width">wrap_content</item>     <item name="android:layout_height">wrap_content</item>     <item name="android:background">@null</item>     <item name="android:ellipsize">end</item>     <item name="android:singleLine">true</item>     <item name="android:textSize">@dimen/text_size_small</item> </style>  <style name="ActionBarButtonWhite" parent="@style/ActionBarButton">     <item name="android:textColor">@color/white</item> </style>  <style name="ActionBarButtonOffWhite" parent="@style/ActionBarButton">     <item name="android:textColor">@color/off_white</item> </style> 

Here are the colors and dimensions I used:

<color name="action_bar">#ff0d0d0d</color> <color name="white">#ffffffff</color> <color name="off_white">#99ffffff</color>  <!-- Text sizes --> <dimen name="text_size_small">14.0sp</dimen> <dimen name="text_size_medium">16.0sp</dimen>  <!-- ActionBar color strip --> <dimen name="colorstrip">5dp</dimen> 

If you want to customize it more than this, you may consider not using the ActionBar at all, but I wouldn't recommend that. You may also consider reading through the Android Design Guidelines to get a better idea on how to design your ActionBar.

If you choose to forgo the ActionBar and use your own layout instead, you should be sure to add action-able Toasts when users long press your "MenuItems". This can be easily achieved using this Gist.