Customize TABS in ActionBar - ActionBarCompat

Question

I want to achieve this:

But I am haven't been able to decrease the height of the tabs in ActionBarCompat. My tab height currently is the default one.

I read that if I decrease the size of ActionBar I can decrease the size of the tabs, and I have tried that but I want my ActionBar to stay at its normal size.

I have tried generating custom styles from Android Action Bar Style Generator but it didn't help me change the height of the tabs.

This is my style.xml

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

    <style name="Theme.Musclemonster" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="actionBarItemBackground">@drawable/selectable_background_musclemonster</item>
        <item name="popupMenuStyle">@style/PopupMenu.Musclemonster</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Musclemonster</item>
        <item name="actionBarTabStyle">@style/Theme.Musclemonster.TabsStyle</item>
        <item name="actionDropDownStyle">@style/DropDownNav.Musclemonster</item>
        <item name="actionBarStyle">@style/ActionBar.Solid.Musclemonster</item>
        <item name="actionModeBackground">@drawable/cab_background_top_musclemonster</item>
        <item name="actionModeSplitBackground">@drawable/cab_background_bottom_musclemonster</item>
        <item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Musclemonster</item>
        <item name="actionBarTabTextStyle">@style/Theme.Musclemonster.TabsTextStyle</item>

        <!-- Light.DarkActionBar specific -->
        <item name="actionBarWidgetTheme">@style/Theme.Musclemonster.Widget</item>
    </style>

    <style name="ActionBar.Solid.Musclemonster" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/ab_solid_musclemonster</item>
        <item name="backgroundStacked">@drawable/ab_stacked_solid_musclemonster</item>
        <item name="backgroundSplit">@drawable/ab_bottom_solid_musclemonster</item>
        <item name="progressBarStyle">@style/ProgressBar.Musclemonster</item>
    </style>

    <style name="ActionBar.Transparent.Musclemonster" parent="@style/Widget.AppCompat.ActionBar">
        <item name="background">@drawable/ab_transparent_musclemonster</item>
        <item name="progressBarStyle">@style/ProgressBar.Musclemonster</item>
    </style>

    <style name="PopupMenu.Musclemonster" parent="@style/Widget.AppCompat.PopupMenu">
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_musclemonster</item>
    </style>

    <style name="DropDownListView.Musclemonster" parent="@style/Widget.AppCompat.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_musclemonster</item>
    </style>

    <style name="ActionBarTabStyle.Musclemonster" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_musclemonster</item>
    </style>

    <style name="DropDownNav.Musclemonster" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
        <item name="android:background">@drawable/spinner_background_ab_musclemonster</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_musclemonster</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_musclemonster</item>
    </style>

    <style name="ProgressBar.Musclemonster" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_musclemonster</item>
    </style>

    <style name="ActionButton.CloseMode.Musclemonster" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_musclemonster</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Musclemonster.Widget" parent="@style/Theme.AppCompat">
        <item name="popupMenuStyle">@style/PopupMenu.Musclemonster</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Musclemonster</item>
    </style>

    <!-- This style is for tabs -->
    <style name="Theme.Musclemonster.TabsStyle" parent="@style/Widget.AppCompat.Base.ActionBar.TabView">
        <item name="android:background">@drawable/tabbackground</item>
    </style>

    <style name="Theme.Musclemonster.TabsTextStyle" parent="@style/Widget.AppCompat.Base.ActionBar.TabText">
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

This was generated by the Action Bar Style Generator. I have tried a lot of links from Google. I have around 20 tabs opened up in my Google Chrome right now. If I have missed any, kindly let me know. Or just let me know how can I achieve this style of tabs. Thanks!

Answer 1

What you need is ViewPager with title strip control instead of tabs, look at tutorial here and download the sample app to customize it.

<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.view.PagerTitleStrip
    android:id="@+id/pager_title_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:background="#33b5e5"
    android:textColor="#fff"
    android:paddingTop="4dp"
    android:paddingBottom="4dp" />

Hope this helped!