Custom theme for tabbed page's in android

Question

I have made an app for android with Xamarin form in VS2015. I have added TabbedPage, but my TabbedPage's action bar has problem.

If tabbedPage has many ContentPage, title text is not 1 line, and I can't change tab's height, width, color(font, background), and scrollable tab.

I know the problem is theme, but I don't know how do I customized theme.

Below is my theme:

    <?xml version="1.0" encoding="UTF-8"?>
    <resources>
        <style name="MyTheme" parent="MyTheme.Base">
        </style>
        <!-- Base theme applied no matter what API -->
        <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
            <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
            <item name="windowNoTitle">true</item>
            <!--We will be using the toolbar so no need to show ActionBar-->
            <item name="windowActionBar">false</item>
            <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
            <!-- colorPrimary is used for the default action bar background -->
            <item name="colorPrimary">#2196F3</item>
            <!-- colorPrimaryDark is used for the status bar -->
            <item name="colorPrimaryDark">#1976D2</item>
            <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
            <item name="colorAccent">#FF4081</item>
            <!-- You can also set colorControlNormal, colorControlActivated
             colorControlHighlight and colorSwitchThumbNormal. -->
            <item name="windowActionModeOverlay">true</item>
            <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
        </style>
        <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
            <item name="colorAccent">#FF4081</item>
        </style>
    </resources>

now, my app need AppCompact theme, so I don't know how do I fix it.

Answer 1

Try using "scrollable" Tab mode.

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        style="@style/MyCustomTabLayout" />

Here I used customized TabLayout style. Below is the MyCustomTabLayout style. Define this style into your values/styles.xml file.

values/styles.xml

<!-- TabLayout Style -->
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">#FFFFFF</item>
    <item name="tabIndicatorHeight">3dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">#FFFFFF</item>
</style>

Hope this will help~