How to increase padding or margin between menu item icon and title in app toolbar?

I can't believe it took me so long to figure this out!

Eventually it occurred to me to use the Android Device Monitor. I went to Tools > Android > Android Device Monitor. When that started up, I clicked the package name of my app in the "Devices" tab and then I clicked the "Dump View Hierarchy for UI Automator" button (which looks like multiple phones stacked on top of each other) at the top of the "Devices" tab. This showed me the UI of my current screen. Then I could click on the "Refresh" button and discover that it was not two Views next to each other--it was one TextView with a DrawableLeft. I know, I know, that's obvious and should have been the first thing I thought of.

I had already found ActionBarSherlock - How to set the padding of each actionbar's icon? , but that didn't work for me. However, that gave me an example of something I needed--changing the ActionButton style.

Now that I knew it was a TextView with a DrawableLeft, I knew I needed to change DrawablePadding. That's the change I needed to make to styles.

To change the ActionButton theme I needed to add this to my styles.xml:

<style name="ActionButton" parent="@android:style/Widget.ActionButton">
    <item name="android:drawablePadding">@dimen/action_button_padding</item>
</style>

dimen.xml:

<dimen name="action_button_padding">4dp</dimen>

Then a tweak to the Theme section of style.xml:

<style name="Theme.MyTheme"
       parent="Theme.AppCompat.Light.NoActionBar">
    <!-- other styles -->
    <item name="android:actionButtonStyle">@style/ActionButton</item>
</style>

And it just works! No need to set a custom ActionProvider, edit the image to add spacing in the image file, or use extra XML files for each button.

use custom layout set in menu item like as:

<item
    android:id="@+id/common_submenu_sync_contact"
    android:title="Refresh"
    app:actionLayout="@layout/custom_menu_item" />

create layout file and use this file set as app:actionLayout.

custom_menu_item.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/refresh"
    android:padding="10dp" />

Happy coding.

You could also just use an inset drawable with the padding baked into it. That would also prevent you from having to apply the style to all menu buttons in the app or worry about weird padding if you use that menu item image somewhere else in the app.

<inset
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/your_drawable"
   android:insetTop="3dp"
   android:insetRight="3dp"
   android:insetBottom="3dp"
   android:insetLeft="3dp" />