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

Issue

I'm having a problem with an item in my action bar:

The refresh icon is too close to the title "REFRESH". It looks awkward.

I am aware that one approach to fix this it to edit the image to forcibly add padding to it, or wrap it in an XML drawable that does so.

It seems like I should not have to add space in the image itself to fix this. I feel that there should be an easy way to change a padding or margin attribute to fix the problem. I'm surprised they are so close together here.

Any ideas?

Solution

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.

Answered By - Chad Schultz