How to change the tab layout theme programmatically?

Question

I have created a custom style for my tab layout in styles.xml file.

styles.xml:

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabPaddingStart">6dp</item>
    <item name="tabPaddingEnd">6dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/range</item>
</style>

<!-- for text -->
<style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@color/orange</item>
    <item name="textAllCaps">false</item>
</style>

Apply:

<android.support.design.widget.TabLayout
    style="@style/AppTabLayout"
    app:tabTextAppearance="@style/AppTabTextAppearance"
    android:layout_width="match_parent"
    .... />

I used this code for my tablayout. Everything works fine. But I want to change the style at runtime. I have gone through stackoverflow, but haven't found anything about this. Is it possible ?

score 1 · Answer 1 · answered Apr 26 '22 at 16:58

styles.xml

<resources>
    <attr name="tabLayoutStyle" format="reference" />
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    </style>

    <style name="AppTheme.Blue">
        <item name="tabLayoutStyle">@style/Blue.TabLayout</item>
    </style>

    <style name="Blue.TabLayout" parent="Base.Widget.Design.TabLayout">
        <item name="tabSelectedTextColor">@color/selected_textBlue</item>
        <item name="tabIndicatorColor">@color/accent_blue</item>
        <item name="tabBackground">@color/primary_blue</item>
    </style>

    <style name="AppTheme.Red">
        <item name="tabLayoutStyle">@style/Red.TabLayout</item>
    </style>

    <style name="Red.TabLayout" parent="Base.Widget.Design.TabLayout">
        <item name="tabSelectedTextColor">@color/selected_textRed</item>
        <item name="tabIndicatorColor">@color/accent_red</item>
        <item name="tabBackground">@color/primary_red</item>
    </style>

    <color name="selected_textBlue">#000055</color>
    <color name="accent_blue">#0000ff</color>
    <color name="primary_blue">#0099ff</color>
    <color name="selected_textRed">#880022</color>
    <color name="accent_red">#550000</color>
    <color name="primary_red">#ff0000</color>
</resources>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        style="?attr/tabLayoutStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabItem
            android:text="Tab 1" />

        <android.support.design.widget.TabItem
            android:text="Tab 2" />

    </android.support.design.widget.TabLayout>

    <Button
        android:id="@+id/mainButton0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Red"
        android:onClick="onClick" />

    <Button
        android:id="@+id/mainButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Blue"
        android:onClick="onClick" />

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setTheme(PreferenceManager.getDefaultSharedPreferences(this)
                 .getInt("theme", R.style.AppTheme_Blue));

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onClick(android.view.View v) {
        switch (v.getId()) {
            case R.id.mainButton0:
                PreferenceManager.getDefaultSharedPreferences(this)
                    .edit().putInt("theme", 
R.style.AppTheme_Red).commit();
            break;

            case R.id.mainButton1:
                PreferenceManager.getDefaultSharedPreferences(this)
                    .edit().putInt("theme", 
R.style.AppTheme_Blue).commit();
            break;
        }
    
        recreate();
     }
}

How to change the tab layout theme programmatically?

1 Answers1