Dividers for the actionbar menu items

Question

I am developing Tablet android application. Here i got one issue with the UI of the action bar menu items.

Note: I am using android Native actionbar.

1) How to show divider between menu items like as show in the image.
I tried with divider styles and custom styles but it doesn`t reflect in my action bar.

2) How can I add multiple menu items into a single menu item like as show in the picture.

I tried with custom layout but overflow menu for the items is not showing. I tried with PopupMenu for the overflow menu but the icon is not visible in overflow list.

Here I was using styles for the action bar application, styles.xml

    <resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/AppTheme.ActionBar</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:actionMenuTextAppearance">@style/AppTheme.ActionBar.MenuTextStyle</item>
    <item name="android:actionOverflowButtonStyle">@style/OverFlow</item>
    <item name="android:divider">@color/dividercolor</item>

</style>

  <style name="OverFlow" parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_actionbar_dots</item>
</style>


<style name="AppTheme.ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@drawable/actionbar_background</item>
    <item name="android:height">100dip</item>
    <item name="android:titleTextStyle">@style/AppTheme.ActionBar.Text</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:divider">@drawable/divider</item>
    <item name="android:showDividers">beginning</item>
    <item name="android:dividerPadding">10dp</item>
</style>

<style name="AppTheme.ActionBar.MenuTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
    <item name="android:textAllCaps">false</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">26sp</item>
</style>

<style name="AppTheme.ActionBar.Text" parent="@android:style/TextAppearance">
    <item name="android:textAllCaps">false</item>
    <item name="android:textColor">@color/white</item>
</style>

menu.xml

<group android:id="@+id/menu_mainGroup" >
    <item
        android:id="@+id/connection"
        android:icon="@drawable/nw_pt_calc"
        android:showAsAction="always"
        android:title=" ">
    </item>
    <item
        android:id="@+id/status_menu"
        android:actionLayout="@layout/application_status_overflowmenu"
        android:showAsAction="ifRoom|withText">
    </item>

    <!--
    <item
        android:id="@+id/status"
        android:icon="@drawable/ic_available"
        android:showAsAction="always"
        >
        <menu>
            <item
                android:id="@+id/status1"
                android:icon="@drawable/ic_available"
                android:showAsAction="always"
                android:title="@string/menu_available">
            </item>
            <item
                android:id="@+id/status2"
                android:icon="@drawable/ic_busy"
                android:showAsAction="always"
                android:title="@string/menu_busy">
            </item>
            <item
                android:id="@+id/status3"
                android:icon="@drawable/ic_logoff"
                android:showAsAction="always"
                android:title="@string/menu_logoff">
            </item>
        </menu>
    </item>
    <item
        android:id="@+id/display_pic"
        android:icon="@drawable/ic_person"
        android:showAsAction="always">
    </item>


    <item
        android:id="@+id/display_name"
        android:showAsAction="always">
    </item>


    -->
    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_search"
        android:showAsAction="always"
        android:visible="false">
    </item>
    <item
        android:id="@+id/help"
        android:icon="@drawable/ic_help"
        android:showAsAction="always"
        android:visible="false">
    </item>
    <item
        android:id="@+id/about"
        android:showAsAction="never"
        android:title="@string/about">
    </item>
    <!--
         <item
        android:id="@+id/notification_history"
        android:showAsAction="never"
        android:title="@string/notification_history">
    </item>
    <item
        android:id="@+id/comm_msg_history"
        android:showAsAction="never"
        android:title="@string/comm_msg_history">
    </item>



    -->
</group>

Help will be appreciated. Thanks looking forward to hear answers from geeks :).

Answer 1

I don't know if you have resolved your problem. But I can explain you just in case.
First of all, to customize the divider in your ActionBar, you must to do this in your Theme with the parent ActionButton. You do this:

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:divider">@color/dividercolor</item>
</style>

<style name="AppTheme.ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:divider">@drawable/divider</item>
</style>

Try this way:

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionButtonStyle">@style/ActionButton</item>
    <item name="android:actionBarDivider">@color/blue</item>
    <item name="actionBarDivider">@color/blue</item>
</style>  

<style name="ActionButton" parent="@android:style/Widget.Holo.Light.ActionButton">
   <item name="android:background">@color/blue</item>
</style>

You can read the solution here: Can't change color of actionBar divider and there: ActionBar MenuItem Divider.

Then, you can create a 9-Patch drawable to look like exactly at your image. Try to use something like this image:
The black border indicate where expand your image. I did it on the left/right sides to expand your divider on its height. You can read Draw 9-patch from the Documentation to know how use the Draw 9-Patch tool in the sdk.
Or, you can make it in xml, something like below:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- first line vertical blue -->
   <item android:left="1dp">
       <shape android:shape="line">
           <stroke
               android:color="@color/blue"
               android:width="1dp" />
       </shape>
   </item>
   <!-- second line vertical white -->
   <item android:right="1dp">
       <shape android:shape="line">
            <stroke
               android:color="@color/white"
               android:width="1dp" />
       </shape>
    </item>
</layer-list>  

After that, you just have to declare it in your style.xml as:
<item ...>@drawable/blue_divider</item>.

Now you have customize divider (=

---

Then, your custom layout in ActionBar.
It's possible to do as below:

 ActionBar actionBar = getActionBar();
 actionBar.setCustomView(R.layout.application_status_overflowmenu);
 actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM|
                                    ActionBar.DISPLAY_SHOW_HOME);  

And application_status_overflowmenu.xml will be something like:

 <RelativeLayout
     android="@+id/theCustomIcon"
     android:layout_width="fill_parent" android:layout_height="fill_parent"
     android:layout_gravity="right" android:gravity="center"
     android:paddingLeft="10dp" android:paddingRight="10dp"
     android:clickable="true" >

     <ImageView
          android:id="@+id/blockCustomIcon"
          android:layout_width="50dp" android:layout_height="50dp"  
          android:src="@drawable/green_block"  
          android:layout_centerVertical="true" 
          android:layout_alignParentLeft="true" />

     <ImageView
          android:id="@+id/imgCustomIcon"
          android:layout_width="wrap_content" android:layout_height="wrap_content"  
          android:src="@drawable/green_block"  
          android:layout_centerVertical="true" 
          android:layout_toRightOf="@id/blockCustomIcon" />

     <TextView
          android:id="@+id/txtCustomIcon"
          android:layout_width="wrap_content" android:layout_height="wrap_content"  
          android:src="@drawable/green_block"  
          android:layout_centerVertical="true" 
          android:layout_alignParentRight="true"
          android:gravity="left" />  

 </RelativeLayout>

And finally, you can have access to the Views to update the items:

 TextView text = (TextView) actionBar.getCustomView().findViewById(R.id.txtCustomIcon);
 text.setText("Emily Nichols");  

That's all!
If your menu options disappears, check if your onCreateOptionsMenu is inflating a good layout and if it return true. You can also add the custom item in front of options menu or add item dynamically. I let you do this as you want.
I hope this will be useful and it will helpful too.