我们如何在android中更改Selected Tablayout Icon和Text颜色

时间:2017-04-14 10:44:46

标签: android android-viewpager

您好我是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);
                    }
                }
        );

屏幕: -

enter image description here

6 个答案:

答案 0 :(得分:1)

更改选定的标签图标使用选择器

喜欢这个

var codes = $("select[name='code[]']").serializeArray();

答案 1 :(得分:1)

您可以使用它轻松更改 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" />

答案 2 :(得分:0)

尝试在 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"/>

我希望它对你有用。

答案 3 :(得分:0)

你可以这样编程,

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">

答案 4 :(得分:0)

我已经使用了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);
    }
}

以上代码会生成结果: - Screenshot

1)tab_home_selected image

tab_home_selected image

2)tab_home_unselected image(透明)

enter image description here

答案 5 :(得分:0)

使用属性app:tabTextColor设置标签normal text color并使用属性app:tabSelectedTextColor设置标签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" />

<强>输出:

enter image description here

希望这会有所帮助〜