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.

Ferdous Ahamed · Accepted Answer · 2017-04-13T06:24:50.140

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~

score 0 · Answer 2 · answered Apr 13 '17 at 06:11

If your style theme is AppCompact(see in manifest file) then your class should be extend AppCompactActivity class otherwise it will throw error. I think viewPager is comfortable to use.

Look at This code How i change textcolor,height,tabindicator color in ViewPager

<android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#499b97"
            app:tabGravity="fill"
            app:tabIndicatorColor="#cfc31b"
            app:tabIndicatorHeight="6dp"
            app:tabMode="fixed" />
    </android.support.design.widget.AppBarLayout>

<style name="MyTrasparent" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:colorBackground">@android:color/transparent</item>
    <item name="android:windowBackground">@color/soloColor</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowAnimationStyle">@android:style/Animation</item>

Custom theme for tabbed page's in android

2 Answers2