Actionbar with customView has extra padding that cannot be removed

Question

Having trouble getting an ActionBar to display icons with proper styling.

My customer wants an ActionBar that has specific icons with varying shades of transparency. If I simply place the icons into an XML file in res/menu, then I have no way to get the icons to lie adjacent to each other and the backgrounds of each icon result in vertical gaps like so:

res/menu/global_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

<item
    android:id="@+id/menu"
    android:icon="@drawable/ic_main_menu"
    android:showAsAction="always"
    android:title="@string/nav_menu_main"/>  

<item
    android:id="@+id/login"
    android:icon="@drawable/ic_people"
    android:showAsAction="always"
    android:title="@string/nav_menu_login"/>
<item
    android:id="@+id/location"
    android:icon="@drawable/ic_location"
    android:showAsAction="always"
    android:title="@string/nav_menu_location"/>

etc, etc.

So, I created a customView and simply placed the same icons within a RelativeLayout. That makes the icons line up better and doesn't leave the gaps between icons. I can style it easier, even though I lose the ability to use menus as above. However, it leaves a gap at the bottom of the row of icons above the PagerTitleStrip. The UX image people left the search icon with full transparency around the icon but all other have some light color which makes the extra padding below the icons very noticeable. Without the slight transparency around them one would probably never notice, but my customer wants that padding gone.

res/layout/global_nav_custom.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="wrap_content"
android:background="@color/att_blue"
android:paddingBottom="-54dp"
android:orientation="horizontal" >

<ImageView
    android:id="@+id/menu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:src="@drawable/ic_main_menu" />

<ImageView
    android:id="@+id/search"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="false"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_search" />

<ImageView
    android:id="@+id/message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/search"
    android:src="@drawable/ic_message" />

<ImageView
    android:id="@+id/cart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/message"
    android:src="@drawable/ic_cart" />

<ImageView
    android:id="@+id/location"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/cart"
    android:src="@drawable/ic_location" />

<ImageView
    android:id="@+id/login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/location"
    android:src="@drawable/ic_people" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/menu"
    android:layout_marginLeft="364dp"
    android:layout_toRightOf="@+id/menu"
    android:text="@string/app_name"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="@android:color/white" />

</RelativeLayout>

Java code

    ActionBar bar = getActionBar();
    bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

    LayoutInflater li = LayoutInflater.from(this);
    View customView = li.inflate(R.layout.global_nav_custom, null);


    bar.setCustomView(customView);

So, my question is A) how can I style the ActionBar to either use the standard style XML as menu but remove the vertical gaps. Or B) with a customView solution, I get a 4+ pixel gap at the bottom.

By the way, ActionBarSherlock is NOT an option as the company wants no 3rd party libraries

Answer 1

Using standard action buttons

You can achieve this with standard action buttons by using a custom theme for your app.
Note: for this to work, your icons must be 32dp or less

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyAppTheme" parent="android:Theme.Holo.Light">
        <item name="android:actionButtonStyle">@style/ActionButton</item>
        <item name="android:actionBarSize">32dp</item>
    </style>

    <style name="ActionButton" parent="android:Widget.ActionButton">
        <item name="android:paddingStart">0dp</item>
        <item name="android:paddingEnd">0dp</item>
        <item name="android:paddingLeft">0dp</item>
        <item name="android:paddingRight">0dp</item>
        <item name="android:minWidth">0dp</item>
    </style>
</resources>

Don't forget to edit your AndroidManifest to set the theme of your activity/application ;)

---

Using actionLayout

Another way is to specify an actionLayout for each of your action item. This way you can keep your icon anyway you want, and keep the action bar size to 48dp.

The downside is you have to handle the menu item as a button rather than a menu item, by using a OnClickListener or using the onClick attribute of your View. The onClick attribute of the MenuItem will not work.

You should also probably display the menu title when the user long press the item, as it does for standard action buttons.

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/menu"
        android:actionLayout="@layout/widget_main_button"
        android:showAsAction="always"
        android:title="main"/>
    <item
        android:id="@+id/login"
        android:actionLayout="@layout/widget_login_button"
        android:showAsAction="always"
        android:title="login"/>
    <item
        android:id="@+id/location"
        android:actionLayout="@layout/widget_location_button"
        android:showAsAction="always"
        android:title="location"/>
</menu>

widget_main_button.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menu_main_button"
    android:layout_width="@dimen/action_button_width"
    android:layout_height="?android:actionBarSize"
    android:background="@drawable/ic_main_menu"/>

---

A useful tool when styling android application is the Android Resource Navigator by Jeff Gilfelt. This is a Chrome extension which allows you to quickly navigate the default Android themes and styles to find what you need to change.