Your options menu might resemble something like this:
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:title="@string/language"
android:id="@+id/optionsMenuItemLanguage"
android:icon="@drawable/flag_gb_round"
>
<menu>
<item
android:title="@string/english"
android:titleCondensed="@string/english_code"
android:id="@+id/optionsSubmenuItemEnglish"
/>
<item
android:title="@string/spanish"
android:titleCondensed="@string/spanish_code"
android:id="@+id/optionsSubmenuItemSpanish"
/>
<item
android:title="@string/croatian"
android:titleCondensed="@string/croatian_code"
android:id="@+id/optionsSubmenuItemCroatian"
/>
</menu>
</item>
<item ...
Once the list of sub-menu items is opened, it will be displayed on the screen as follows:
You would probably want to enhance the usability of your options menu by adding an icon for each sub-menu item. The menu item tag supports the android:icon attribute, so the example might look like the following (for brevity, I am showing changes only for a single sub-menu item):
android:title="@string/english"
android:titleCondensed="@string/english_code"
android:id="@+id/optionsSubmenuItemEnglish"
android:icon="@drawable/flag_en"
/>
Surprisingly, the menu now looks like the following:
Not sure who would be satisfied with that much padding. To keep things as simple as possible, I was looking for an XML-only solution that would work on Android devices starting from API level 21, the lowest level that I am still supporting. So, here is the solution:For each sub-menu item icon, you will need to define a layer list. Here is an example for my case, the file is named drawables/flag_en_layer.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/layer_padding"
android:right="@dimen/layer_padding"
android:drawable="@drawable/flag_en"
/>
</layer-list>
I have experimented with the padding value and found that -70dp suits my case the best. Here is the values/dimens.xml file:
<resources>
<dimen name="layer_padding">-70dp</dimen>
</resources>
Now, update your options menu XML file so that each item references the new layer list instead of the original drawable, as follows:
android:title="@string/english"
android:titleCondensed="@string/english_code"
android:id="@+id/optionsSubmenuItemEnglish"
android:icon="@drawable/flag_en_layer"
/>
Do that for each sub-menu item, and your final menu will look like the following:
You're welcome!