1. 技术文章
  2. Define TabLayout style in theme

Define TabLayout style in theme

由 旧街凉风 提交于 2019-11-30 08:01:58

问题


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>

回答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>



回答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




回答3:


You can find that name in Android theme - 

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



回答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>


来源：https://stackoverflow.com/questions/34613595/define-tablayout-style-in-theme

标签
android
android-theme
android-tablayout
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!