Android menu item with both icon and text together when showAsAction is never

Question

Hi, how can I make my menu items have icons as well when showAsAction is never ?

Answer 1

Use android:actionLayout in menu item tag to specify custom lyout (icon with text). Menu item will look like:

<item
    android:id="@+id/edit_menu"
    android:actionLayout="@layout/custom_edit_row"
    android:orderInCategory="100"
    android:title="@string/edit"
    app:showAsAction="always"></item>

Edit

custom_edit_row.xml

will be:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relativeLayout1"
style="@android:style/Widget.ActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true">

<ImageView
    android:id="@+id/imageViewEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/edit_ic" />

<TextView
    android:id="@+id/tvEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Edit" />

Answer 2

<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:context=".YourActivityName">

<item
    android:id="@+id/action_settings"
    android:icon="@android:drawable/btn_dialog"
    android:title="@string/action_settings"
    app:showAsAction="always">

    <menu>
        <item
            android:id="@+id/profile"
            android:icon="@drawable/common_google_signin_btn_icon_light_disabled"
            android:title="PROFILE"
            app:showAsAction="always" />
    </menu>

</item>

Answer 3

Use this menu file, it worked fine for me.

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

    <item
        android:id="@+id/action_m"
        android:showAsAction="never"
        android:title="menu">
        <menu>
            <item
                android:id="@+id/action_one"
                android:icon="@android:drawable/ic_popup_sync"
                android:showAsAction="always"
                android:title="Sync"/>
            <item
                android:id="@+id/action_two"
                android:icon="@android:drawable/ic_dialog_info"
                android:title="About"/>
        </menu>
    </item>
</menu>

Answer 4

Use android:actionLayout in menu item tag to specify custom lyout (icon with text). Menu item will look like:

<item
    android:id="@+id/edit_menu"
    android:actionLayout="@layout/custom_edit_row"
    android:orderInCategory="100"
    android:title="@string/edit"
    app:showAsAction="always"></item>

Edit

custom_edit_row.xml

will be:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relativeLayout1"
style="@android:style/Widget.ActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true">

<ImageView
    android:id="@+id/imageViewEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/edit_ic" />

<TextView
    android:id="@+id/tvEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Edit" />