我们如何在 android 中更改 Selected Tablayout 图标和文本颜色

Question

嗨，我是 android 新手，在我的应用程序中，我必须将选定的 TabLayout图标和文本颜色更改为蓝色，其余未选定的图标和文本颜色应为白色，为此我写了下面的代码，但这里只更改图标颜色我如何更改文本颜色还

我的代码：-

   setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setOnTabSelectedListener(
                new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {

                    @Override
                    public void onTabSelected(TabLayout.Tab tab) {
                        super.onTabSelected(tab);
                        int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                        tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                    }

                    @Override
                    public void onTabUnselected(TabLayout.Tab tab) {
                        super.onTabUnselected(tab);
                        int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                        tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                    }

                    @Override
                    public void onTabReselected(TabLayout.Tab tab) {
                        super.onTabReselected(tab);
                    }
                }
        );

屏幕：-

Answer 1

要更改选定的选项卡图标使用选择器

像这样

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_on" android:state_selected="true"/>
    <item android:drawable="@drawable/icon_off"/> <!-- default -->
</selector>

tab.setIcon(R.drawable.yourselectorname)

Answer 2

你可以像这样以编程方式做到这一点，

tabLayout.setTabTextColors(getResources().getColorStateList(R.color.selector));

或在这样的 XML 布局中，

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabGravity="fill">

Answer 3

您可以使用它轻松更改 Tablelyout 中 Tab 上所需的图标

TabViewPager = (ViewPager) findViewById(R.id.viewpager);
        SelectedTab(TabViewPager);
        TabLayout = (TabLayout) findViewById(R.id.tabs);
        TabLayout.setupWithViewPager(TabViewPager);
        setupTabIcons();

现在设置选项卡图标

   private void setupTabIcons() {
    TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_icon_video_imageseloctor, 0);
    TabLayout.getTabAt(0).setCustomView(tabOne);

    TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_icon_audio_selector, 0);
    TabLayout.getTabAt(1).setCustomView(tabTwo);
}

在 Drawable 中创建一个 ic_icon_video_imageseloctor 文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_icon_video_selected" <!-- On select state of Tab -->
android:state_selected="true"/>
<item android:drawable="@drawable/ic_icon_video"/> <!-- default -->
</selector>

最后设置表格布局

 private void SelectedTab(ViewPager viewPager) {
    viewfragmentpag adapter = new viewfragmentpag(getSupportFragmentManager());
    adapter.AddFrag(new SelectVideoFragment(), "VIDEO");
    adapter.AddFrag(new getMP3Files_Fragment(), "Converted File");
    viewPager.setAdapter(adapter);
}

这是您的自定义 TalbLayout

 <?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@android:id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:background="@drawable/tab_selector"
    android:gravity="center"
    android:paddingLeft="12dp"
    android:paddingTop="10dp"
    android:paddingRight="12dp"
    android:paddingBottom="10dp"
    android:textColor="@drawable/tab_text_color_selector"
    android:textSize="@dimen/whatsapp_tab_txt_size" />

Answer 4

尝试在您的TabLayout 中使用以下解决方案

 <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabTextColor="@color/colorTabNotSelect"
        app:tabSelectedTextColor="@color/colorAccent"
        android:background="#fff"
        app:tabGravity="fill"/>

我希望它对你有用。

Answer 5

我已经使用过 TabWidget，但您可以尝试一下，它对我有用。

private FragmentTabHost tabHost;
private MyView viewHome, viewCity;

tabHost = (FragmentTabHost) findViewById(R.id.tabHost);
tabHost.setup(this, getFragmentManager(), android.R.id.tabcontent);

//ToDo: This is custom view for tabs which is selected and not selected
viewHome = new MyView(this, R.drawable.tab_home_selected, R.drawable.tab_home_unselected, "");

//ToDo: Add all the tabs here
tabHost.addTab(tabHost.newTabSpec("Search Restaurant").setIndicator(viewHome), SearchRestaurantFragment.class, null);
tabHost.addTab(tabHost.newTabSpec("My City").setIndicator(viewCity), MyCityFragment.class, null);

//ToDo: Custom view for tabs
private class MyView extends LinearLayout {
    public MyView(Context c, int drawable, int drawableselec, String label) {
        super(c);

        LayoutInflater inflater = LayoutInflater.from(DashBoardActivity.this);
        View view = inflater.inflate(R.layout.tabicon, null); // Here tabicon layout contains imageview
        final ImageView icon = (ImageView) view.findViewById(R.id.icon);

        StateListDrawable listDrawable = new StateListDrawable();
        listDrawable.addState(SELECTED_STATE_SET, this.getResources().getDrawable(drawable));
        listDrawable.addState(ENABLED_STATE_SET, this.getResources().getDrawable(drawableselec));

        icon.setImageDrawable(listDrawable);
        icon.setBackgroundColor(Color.TRANSPARENT);
        setGravity(Gravity.CENTER);

        addView(view);
    }
}

以上代码将生成结果：-截图

1) tab_home_selected 图片

2) tab_home_unselected 图片（透明）

Answer 6

使用属性app:tabTextColor设置 Tab normal text color并使用属性app:tabSelectedTextColor设置 Tab selected text color 。

更新您的TabLayout XML，如下所示：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorHeight="3dp"
    app:tabIndicatorColor="@color/blue"
    app:tabTextColor="@color/white"
    app:tabSelectedTextColor="@color/blue" />

输出：

希望这会有所帮助~