How to Reduce the Spacing Between the Action Item Icons on Action Bar

how to remove spacing between ActionBar icons

AFAIK, the spacing is because of the padding on the TabView.
You should changing the padding on the TabView something like below.

<style name="ActionBarTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">@android:color/transparent</item>

<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
</style>

The default padding on the TabView seems to be 16dp.

Spacing between Action bar icon and Title.

I added some spacing like this:

actionBar.setTitle("  " + myTitle);

I don't think it should be done this way but I've searched a lot I couldn't find any solution for this without using custom view which I can't because I'm using AB tabs.

So if anyone else has a better (cleaner) solution, do answer. For others, this works better than anything else I tried.

Cheers!

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.

Padding between ActionBar's home icon and title

I adapted Cliffus answer and assigned the logo-drawable in my actionbar style definition, for instance like this in res/style.xml:

<item name="android:actionBarStyle">@style/MyActionBar</item>

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#3f51b5</item>
<item name="android:titleTextStyle">@style/ActionBar.TitleText</item>
<item name="android:textColor">#fff</item>
<item name="android:textSize">18sp</item>
<item name="android:logo">@drawable/actionbar_space_between_icon_and_title</item>
</style>

The drawable looks like Cliffus' one (here with the default app launcher icon) in res/drawable/actionbar_space_between_icon_and_title.xml:

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

In the android_manifest.xml you can still set a different app icon (launcher icon on 'desktop'. Any different logo definition here are visible in activities without an action bar.



Related Topics



Leave a reply



Submit