Define TabLayout style in theme

Question

I have two different styles of TabLayout in my app:

<style name="TabLayoutPower" parent="Widget.Design.TabLayout">
    <item name="tabSelectedTextColor">@android:color/white</item>
    <item name="tabTextColor">@android:color/white</item>
</style>

<style name="TabLayoutFree" parent="Widget.Design.TabLayout">
    <item name="tabSelectedTextColor">@android:color/black</item>
    <item name="tabTextColor">@android:color/black</item>
</style>

How can I define the default TabLayout style for a theme? I cannot find any info which item name should I use to build my theme. I'd like to add the TabLayout the same way I added my listview:

<style name="Free" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/black</item>
        <item name="colorPrimaryDark">@color/black</item>
        <item name="colorAccent">@color/main_red</item>
        <item name="android:windowBackground">@color/main_bg_light</item>
        <item name="android:listViewStyle">@style/MyListView</item>
    </style>

Anomalism

Did you find a solution? – Minstrel

nope . I had to implement the view change manually. – Anomalism

@sliwkacz, I found you an answer that actually works! Can you mark that one as the correct one? – Autogenesis

Answer 1

For Support Library TabLayout, you can set tabStyle attribute in your theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- ... -->
    <item name="tabStyle">@style/AppTheme.TabLayout</item>
</style>

<style name="AppTheme.TabLayout" parent="Widget.Design.TabLayout">
    <item name="tabSelectedTextColor">@android:color/white</item>
    <item name="tabTextColor">@android:color/white</item>
</style>

Rainy

If I use tabStyle, it doesn't compile. – Anteroom

@MarkBuikema it works with com.google.android.material.tabs.TabLayout, but not necessarily with standard TabLayout – Rainy

Answer 2

If you wan to use 2 different styles for your TabLayout based on theme of your application then you should define your style inside attrs.xml

here is the Sample code for that

First you create an attrs.xml file ( Like this )

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="textColor" format="reference|color" />
    <attr name="backColor" format="reference|color" />
    <attr name="myTabStyle" format="reference" />
</resources>

define various theme as per your requirements inside styles.xml

Note: i have used 3 different themes for demo

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="tabStyle">@style/TabLayoutPower</item>
        <item name="textColor">@android:color/white</item>
        <item name="backColor">@color/colorPrimary</item>
    </style>

    <style name="AppTheme2" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@android:color/holo_green_dark</item>
        <item name="colorPrimaryDark">@android:color/white</item>
        <item name="colorAccent">@android:color/holo_blue_dark</item>
        <item name="textColor">@android:color/white</item>
        <item name="tabStyle">@style/TabLayoutFree</item>
        <item name="backColor">#FF00</item>

    </style>

    <style name="AppTheme3" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#ff00</item>
        <item name="colorPrimaryDark">#ff0</item>
        <item name="colorAccent">#0a91d4</item>
        <item name="tabStyle">@style/TabLayoutNew</item>
        <item name="textColor">#FF00</item>
        <item name="backColor">@android:color/white</item>
    </style>

    <style name="TabLayoutPower" parent="Widget.Design.TabLayout">
        <item name="tabSelectedTextColor">@android:color/white</item>
        <item name="tabTextColor">@android:color/white</item>
    </style>

    <style name="TabLayoutFree" parent="Widget.Design.TabLayout">
        <item name="tabSelectedTextColor">@android:color/holo_blue_bright</item>
        <item name="tabTextColor">@android:color/holo_blue_bright</item>
    </style>

    <style name="TabLayoutNew" parent="Widget.Design.TabLayout">
        <item name="tabSelectedTextColor">@android:color/holo_green_dark</item>
        <item name="tabTextColor">@android:color/holo_green_dark</item>
    </style>

</resources>

Now use this style in your TabLayout like this inside layout.xml files

Use like this style="?myTabStyle" it will select style based on current theme of your application

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnThemeOne"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Theme One" />

        <Button
            android:id="@+id/btnThemeTwo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Theme Two" />


        <Button
            android:id="@+id/btnThemeThree"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Theme Three" />


    </LinearLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="?myTabStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        android:background="@color/colorAccent"
        app:tabMode="fixed" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>

sample code of TabsActivity to change theme

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class TabsActivity extends AppCompatActivity {

    PrefManager prefManager;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private Button btnThemeOne, btnThemeTwo, btnThemeThree;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        prefManager = new PrefManager(this);
        getTheme().applyStyle(prefManager.getTheme(), true);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tabs);


        btnThemeOne = findViewById(R.id.btnThemeOne);

        btnThemeOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(TabsActivity.this, "Applying theme one", Toast.LENGTH_SHORT).show();
                prefManager.setTheme(R.style.AppTheme);
                recreate();
            }
        });

        btnThemeTwo = findViewById(R.id.btnThemeTwo);

        btnThemeTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(TabsActivity.this, "Applying theme two", Toast.LENGTH_SHORT).show();
                prefManager.setTheme(R.style.AppTheme2);
                recreate();
            }
        });


        btnThemeThree = findViewById(R.id.btnThemeThree);

        btnThemeThree.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(TabsActivity.this, "Applying theme three", Toast.LENGTH_SHORT).show();
                prefManager.setTheme(R.style.AppTheme3);
                recreate();
            }
        });

        viewPager = findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }


    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new OneFragment(), "TWO");
        adapter.addFragment(new OneFragment(), "THREE");

        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

PrefManager class to save theme info

import android.content.Context;
import android.content.SharedPreferences;

public class PrefManager {

    // Shared preferences file name
    private final String PREF_NAME = "theme-pref";
    private final String THEME = "theme";
    SharedPreferences pref;
    SharedPreferences.Editor editor;


    public PrefManager(Context context) {
        pref = context.getSharedPreferences(PREF_NAME, 0);
        editor = pref.edit();
    }

    public int getTheme() {
        return pref.getInt(THEME, R.style.AppTheme);
    }

    public void setTheme(int themeId) {
        editor.putInt(THEME, themeId);
        editor.commit();
    }

}

you can check the output video of above code

https://www.youtube.com/watch?v=uup072IDGd0

Rhyme

Answer 3

You can find that name in Android theme -

<item name="android:tabWidgetStyle">@style/Your.Style</item>

Nidus

Answer 4

    <style name="Base.Widget.Design.TabLayout" parent="">
        <item name="tabSelectedTextColor">@android:color/white</item>
        <item name="tabTextColor">@android:color/white</item>
    </style>

<style name="Free" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/black</item>
        <item name="colorPrimaryDark">@color/black</item>
        <item name="colorAccent">@color/main_red</item>
        <item name="android:windowBackground">@color/main_bg_light</item>
        <item name="android:listViewStyle">@style/MyListView</item>
<item name="android:tabWidgetStyle">@style/Base.Widget.Design.TabLayout</item>
    </style>

Deceitful

For me works- just leave parent empty and apply to android:tabWidgetStyle ;) – Deceitful