Overflow | Tech Tips & Tricks

How To Add An Image Beside A MenuItem In Android Actionbar Menu

Posted by blogmeister on

January 26, 2014

By default when you add items in Android’s action bar, the icon will not be shown if it will be shown as overflow.

To make sure an icon appears beside the menu item label like this:

Add a sub menu tag within the item tag like this:

<item android:id="@+id/menu_overflow"
	android:title=""
	android:icon="@drawable/ic_action_overflow"
	android:showAsAction="always"
>
	<menu>		
		<item android:id="@+id/menu_settings"
			  android:icon="@drawable/settings"
			  android:title="@string/settings"
		/>
		<item android:id="@+id/menu_donate"
			  android:icon="@drawable/paypal"
			  android:title="@string/donate"
		/>
		<item android:id="@+id/menu_about"
			  android:icon="@drawable/info"
			  android:title="@string/about" 
		/>	   
	</menu>	
</item>

<item android:id="@+id/menu_overflow"

android:title=""

android:icon="@drawable/ic_action_overflow"

android:showAsAction="always"

<menu>

<item android:id="@+id/menu_settings"

android:icon="@drawable/settings"

android:title="@string/settings"

<item android:id="@+id/menu_donate"

android:icon="@drawable/paypal"

android:title="@string/donate"

<item android:id="@+id/menu_about"

android:icon="@drawable/info"

android:title="@string/about"

</menu>

</item>

Since this menu item in the action bar is forced to become overflow permanently (appear as icon all the time), I extracted the PNG file ic_action_overflow from the Android menu icon pack and set it to this menu item.

This is it. The XML code above should display the way as the image posted above.