ActionBar with icon and text in portrait mode

Question

I can't seem to get an image and text to work in portrait mode on menu items in the action bar no matter what I try. I even tried to force android portrait orientation

My XML:

 <item android:id="@+id/menu_save"
  android:icon="@drawable/content"
  android:orderInCategory="100"
  android:title="New Group"
 android:showAsAction="withText|always" />

Has anyone figured this out?

Answer 1

Ahmad's answer makes clear why this is not possible. It is annoying that the action bar is not easier to customise.

One quick and dirty solution is to put two buttons in the menu, remove the icon from one and give the second a different name. Then in the corresponding java file, replicate the functionality for the extra button in onOptionsItemSelected. This gets over having to create a custom view for the action bar.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
    <item android:id="@+id/action_done"
          android:icon="@drawable/ic_done"
          android:title="@string/done"
          yourapp:showAsAction="always" />
    <item android:id="@+id/action_done2"
          android:title="@string/done"
          yourapp:showAsAction="always" />
    <item android:id="@+id/action_cancel"
          android:icon="@drawable/ic_cancel"
          android:title="@string/cancel"
          yourapp:showAsAction="always" />
    <item android:id="@+id/action_cancel2"
          android:title="@string/cancel"
          yourapp:showAsAction="always" />
</menu>

I also saw this answer but didn't try it: withText in split ActionBar #Google Calendar Method. This is how it is done in Google Calendar but also relies on a custom view replacing the action bar.

Answer 2

From the config.xml file of the native ActionBar:

values:

<bool name="config_allowActionMenuItemTextWithIcon">false</bool>

values-480dp:

<bool name="config_allowActionMenuItemTextWithIcon">true</bool>

To answer your question:

No you can't do that, if the devices width is smaller than 480dp. (Unless you want to create a custom rom with a modded framework)

Answer 3

The easiest way to do it is:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"   
tools:ignore="AppCompatResource">
<item
    android:id="@+id/action_nexo"
    android:title="title"
    app:actionLayout="@layout/custom_menu_item"
    app:showAsAction="always"/>

 </menu>

custom_menu_item.xml

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="@string/nexo_tile_short"
    android:clickable="true"
    android:focusable="true"
    android:textSize="@dimen/text_size_small"
    android:textStyle="bold"
    android:textColor="?attr/actionMenuTextColor"
    />
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:paddingTop="@dimen/padding_small"
    android:paddingBottom="@dimen/padding_small"
    android:src="@drawable/nexo"/>
 </LinearLayout>