Is there a way to reduce the spacing between the Action Item Icons on Action Bar?

Question

I wanted to reduce the spacing bettween Action Item icons added to the ActionBar. Is there a way we can do this?

Subtitle

The top answer seems pretty good to me - is there a reason it hasn't been accepted? – Briard

Answer 1

use a custom android:actionButtonStyle.

<item name="android:actionButtonStyle">@style/ActionButtonStyle</item>

and the magic is here:

<style name="ActionButtonStyle" parent="@android:style/Widget.Holo.Light.ActionButton">
    <item name="android:minWidth">0dip</item>
    <item name="android:paddingLeft">0dip</item>
    <item name="android:paddingRight">0dip</item>                  
</style>

normaly minWidth is set to 56 dip.

Wheelchair

Not workig for me in API level 11. Working in API levels 14+. – Mixer

To work with older API, we must also set <item name="actionButtonStyle">@style/ActionButtonStyle</item> – Transcendental

note that setting android:minWidth to 0 causes crashes when long-pressing edittext in some situations. (on some popular devices like the SGSII) – Wamble

Does the default minWidth of 56 dp apply to all drawable versions? – Voe

If not working put in different folders like put in values-v21, values-v17 (if these folder exist) put in these folder's style.xml also – Lousy

How to use that on Toolbar? – Adamis

im confused as to where to put <item name="android:actionButtonStyle">@style/ActionButtonStyle</item> ? – Becharm

Is it possible to apply this to a single item? – Nettie

It does not worked for me without <item name="android:maxWidth">30dp</item> – Heroin

This way works even for material toolbar – Deloresdeloria

Answer 2

For SDK versions 17+ you should use paddingStart and paddingEnd properties, if you have minSdkVersion < 17 you must use different styles for each version, like this:

res/values/styles.xml :

<item name="android:actionButtonStyle">@style/ActionButtonStyle</item>

<style name="ActionButtonStyle" parent="@android:style/Widget.Holo.Light.ActionButton">
    <item name="android:minWidth">0dip</item>
    <item name="android:paddingLeft">0dip</item>
    <item name="android:paddingRight">0dip</item>                  
</style>

res/values-v17/styles.xml :

<item name="android:actionButtonStyle">@style/ActionButtonStyle</item>

<style name="ActionButtonStyle" parent="@android:style/Widget.Holo.Light.ActionButton">
    <item name="android:minWidth">0dip</item>
    <item name="android:paddingStart">0dip</item>
    <item name="android:paddingEnd">0dip</item>                  
</style>

Ailina

This should be the correct approach for overriding padding for 17+ devices. Thanks. – Downstream

This one worked for me! In case this helps, I added <item name="android:actionButtonStyle">@style/ActionButtonStyle</item> just once inside my <style name="AppTheme" parent="Theme.AppCompat.Light"> element of res/values/styles.xml. Then added the <style name="ActionButtonStyle" ... versions in both styles.xml files. Android will pick the correct definition of @style/ActionButtonStyle depending on the platform version. – Heathenize

To correct my previous comment: I actually added <item name="actionButtonStyle">@style/ActionButtonStyle</item> (in the default styles.xml and <style name="ActionButtonStyle" parent="Widget.AppCompat.ActionButton"> in both styles.xml (default and v17). See this answer. – Heathenize

It does not worked for me without <item name="android:maxWidth">30dp</item> – Heroin

Answer 3

Thanks to Shai for his hint, that works pretty well for me (on an Android 4.0.x device): (my whole style.xml)

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<!--
    Base application theme, dependent on API level. This theme is replaced
    by AppBaseTheme from res/values-vXX/styles.xml on newer devices.

-->
<style name="AppBaseTheme" parent="android:Theme.Light">
    <!--
        Theme customizations available in newer API levels can go in
        res/values-vXX/styles.xml, while customizations related to
        backward-compatibility can go here.

    -->
</style>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">

    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="android:actionButtonStyle">@style/ActionButtonStyle</item>
</style>

<style name="ActionButtonStyle" parent="@android:style/Widget.Holo.Light.ActionButton">
    <item name="android:minWidth">0dip</item>
    <item name="android:paddingLeft">0dip</item>
    <item name="android:paddingRight">0dip</item>
</style>

Nadler

Answer 4

For supporting older version using appCompat you need nothing but this:

In your application's appTheme :

<item name="actionButtonStyle">@style/ActionButtonStyle</item>

and create a style in style.xml

 <!--this will reduce space between actionBar Icons-->
    <style name="ActionButtonStyle" parent="Widget.AppCompat.ActionButton">
        <item name="android:minWidth">0dip</item>
        <item name="android:maxWidth">50dip</item>
        <item name="android:paddingLeft">0dip</item>
        <item name="android:paddingRight">0dip</item>
    </style>

That's it. You are done.

Showker

To make it work in v17 and above I also added the res/values-v17/styles.xml version with paddingStart and paddingEnd as pedroca's answer suggests. – Heathenize

The secret is the <item name="android:maxWidth">30dp</item> – Heroin

Answer 5

In appTheme add

<item name="actionButtonStyle">@style/CustomActionButtonStyle</item>

and then in style.xml create this style

<style name="CustomActionButtonStyle" parent="Widget.AppCompat.ActionButton">
        <item name="android:paddingStart">0dip</item>
        <item name="android:paddingEnd">0dip</item>
    </style>

Goggles

Answer 6

I think you may find that this is hard-to-impossible to accomplish without getting extremely hackish or just creating your own custom ActionBar. See here for what seems like a pretty similar question. I did some testing myself overriding android:actionButtonStyle, and while I was able to override certain things (like the background), it refused to honor any kind of padding attributes i specified.

Alienate

Thanks for the link Hankystyles, I tried to override android:actionButtonStyle , however was not able to change the background too. Here is how i am doing it. 'code'(<style name="customactionbuttonstyle" parent="@android:style/Widget.Holo.ActionButton"> <item name="android:background">@drawable/selectableitem_selector</item> </style> <style name="CustomActionBar" parent="@android:style/Theme.Holo"> <item name="android:actionButtonStyle">@style/customactionbuttonstyle</item> </style>) 'code' Then i tried overriding android:selectableItemBackground that dint work either. – Subtitle

Answer 7

None of the answers worked for me. So I wrapped the icon in a drawable xml using layer-list and give it a negative left margin, and it worked for me this way.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="-20dp">
        <bitmap
            android:src="@drawable/actionbar_logo"
            android:gravity="left" />
    </item>
</layer-list>

Olivarez

Answer 8

If you are creating a custom ActionBar, you can add custom spacing, between elements, if you want to move items closer to each other, you can use negative values for your attributes. Like this pseudo-code (in your layout xml file):

<ImageView 
android:layout_marginLeft="-2dp"

Europa