CODEWITHSUNDEEP
androidandroid-layout
Chad Schultz
Chad Schultz

Reputation: 7860

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

I'm having a problem with an item in my action bar: enter image description here

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?

Upvotes: 26

Views: 57514

Answers (5)

Borys Draus
Borys Draus

Reputation: 24

This may not be the best practice, but you can put "empty", not clickable item between others:

<item
    android:id="@+id/action_save_estimator"
    android:icon="@drawable/ic_action_tick_white"
    android:orderInCategory="1"
    android:title="@string/action_save_estimator"
    app:showAsAction="always"/>

<!--EMPTY ITEM-->
<item
    android:orderInCategory="2"
    android:title=""
    app:actionLayout="@layout/empty_item"
    app:showAsAction="always"/>

<item
    android:id="@+id/action_add"
    android:icon="@drawable/ic_add_white_24dp"
    android:title="@string/action_add"
    android:orderInCategory="3"
    app:showAsAction="always"/>

In layout group create empty_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:padding="5dp" 
    android:clickable="false"/>

Upvotes: -1

dipali
dipali

Reputation: 11188

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.

Upvotes: 20

Trader
Trader

Reputation: 71

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

Upvotes: 7

wizcheu
wizcheu

Reputation: 860

Fix @Chad Schultz's answer, his solution did't work for me. But I change the ActionButton's style:

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

Upvotes: 6

Chad Schultz
Chad Schultz

Reputation: 7860

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.

Upvotes: 33

Related Questions