How to increase the registration or margin between the icon and the title of an element in the application toolbar?

Question

I have a problem with an item in my action bar:

The refresh icon is too close to the name "REFRESH". It looks uncomfortable.

I know that one approach to fix this is to edit the image to forcibly add an add-on to it, or wrap it in an XML drawing that does this.

It seems that I did not need to add space to the image to fix this. I believe that to fix the problem there should be an easy way to change the fill attribute or field. I am surprised that they are so close to each other.

Any ideas?

Answer 1

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

In the end, it occurred to me to use the Android Device Monitor. I went to Tools> Android> Android Device Monitor. When this started, I clicked the package name of my application on the "Devices" tab, and then clicked on the "Hierarchy dump-view for the user interface" button (which looks like several phones stacked on top of each other) at the top of the "Devices" tab. This showed me the interface of my current screen. Then I could click on the Refresh button and find that it was not two Views next to each other - it was one TextView with DrawableLeft. I know, I know, this is obvious and should have been the first thing I thought of.

I already found ActionBarSherlock - How to install an addition to the icon of each action bar? but that didn't work for me. However, this gave me an example of what I need - changing the ActionButton style.

Now that I realized that it was a TextView with DrawableLeft, I knew that I needed to change DrawablePadding. This is the change I needed to make for 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 change the theme of the style.xml section:

 <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 distance to the image file, or use additional XML files for each button.

Answer 2

use the custom layout set in the menu item, for example:

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

create a layout file and use this set of files 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" /> 

Good coding.

Answer 3

Correct @Chhud Schultz answer, his solution does not work for me. But I am changing the style of ActionButton:

 <style name="ActionButton" parent="@android:style/Widget.ActionButton"> <item name="android:paddingStart">0dp</item> <item name="android:paddingEnd">0dp</item> <item name="android:minWidth">0dp</item> </style> 

Answer 4

You can also just use the insert with the ability to add gaskets to it. It also prevents you from applying style to all the menu buttons in the application or worrying about strange additions if you use this image of a menu item somewhere else in the application.

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