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 ?

Solution 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" />

Solution 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>

Solution 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>

Comments

[Almett]

Why you make showAsAction equals never? If you want to show menu item with icons, value of showAsAction must be withText.android:showAsAction = "withText"

[Elnoor]

Because, that is the way I want them to appear. I do not want the menu item to appear in ActionBar but inside menu. When showAsAction is never, only text is displayed, but I want icon to appear as well, like the ones in picture.

[Harry Mad]

There are some work around. I hope this will help you.

[Elnoor]

@Harry Mad I tried submenus. But it still didn't work.

[Elnoor]

Thanks a lot @Harry Mad, but the thing is that it is a submenu. But what I want is to display icon main menu item

[Elnoor]

Thanks Saad, i got your point. But can you please, show me an example layout of "custom_edit_row" ?

[Saad Mahmud]

@Elnoor please see the changes

[B001ᛦ]

Can you explain your answer? A good answer will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO.