Customize Padding of ActionBar Tabs Support

Question

I want to remove the padding (spaces) between the tabs of the ActionBar.

I am using the Android Support Library V7 (Appcompat) to use Fragments and the ActionBar in Android 2.2 API 8 as minSDK and 4.4 API 19 as maxSDK.

I have tried the following but it does not change anything.

My styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">
    </style>

    <style name="AppTheme" parent="AppBaseTheme">
        <item name="@style/Widget.AppCompat.ActionBar.TabView">@style/TabBarStyle</item>
    </style>

   <style name="TabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:paddingLeft">2dp</item>
        <item name="android:paddingRight">2dp</item>
    </style>
</resources>

My Activity from AndroidManifest.xml

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:uiOptions="splitActionBarWhenNarrow" >

Can someone show me please how to extend and use the custom theme correctly.

Answer 1

configure your AndroidManifest.xml to use a custom Theme:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    <application
        ...
        android:theme="@style/AppTheme"
        ...
    >
    ...
    </application>
    ....
</manifest>

Define your custom Theme in res/values/styles.xml

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

    <!-- Use a custom Application theme extending an existing AppCompat theme. -->
    <style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">
    </style>

    <!-- customize parts of your theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- indicate that the actionBar uses a custom style and configure the link -->
        <item name="actionBarTabStyle">@style/TabBarStyle</item>
    </style>

    <!-- configure your real custom style for the tab bar-->
    <style name="TabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:paddingLeft">5dp</item>
        <item name="android:paddingRight">5dp</item>
        <item name="android:minWidth">10dp</item>
        <item name="android:maxWidth">15dp</item>
    </style>

</resources>

The following should be placed in res/values/styles-v11.xml and res/values/styles-v14.xml

<style name="AppTheme" parent="AppBaseTheme">
    <item name="actionBarTabStyle">@style/TabBarStyle</item>
</style>

<style name="TabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:paddingLeft">5dp</item>
    <item name="android:paddingRight">5dp</item>
    <item name="android:minWidth">10dp</item>
    <item name="android:maxWidth">15dp</item>
</style>