Как изменить цвет значка выбранной вкладки TabLayout?

Question

Как изменить цвет значка выбранной вкладки TabLayout?

Я использую TabLayout с ViewPager и мне интересно, как я могу наиболее эффективно изменить цвет значка выбранной вкладки в TabLayout.

Прекрасным примером того, как это реализовано, является приложение Google для Youtube. На главной странице есть четыре иконки темно-серого цвета. Когда выбрана конкретная вкладка, значок вкладки становится белым.

Без каких-либо сторонних библиотек, как я могу добиться того же эффекта?

Одно из возможных решений, по-видимому, с селекторами. Но в этом случае мне придется найти как белую, так и серую версию значка, а затем переключать значок, когда вкладка становится выбранной или отмененной. Мне интересно, есть ли более эффективный метод, где я могу просто выделить цвет значка или что-то в этом роде. Я не смог найти это ни в одном учебнике.

РЕДАКТИРОВАТЬ

Решение, которое я упомянул выше, требует использования двух элементов рисования для значка каждой вкладки. Мне интересно, есть ли способ, которым я могу сделать это программно с ОДНОЙ прорисовкой для значка каждой вкладки.

103

java android mobile material-design android-tablayout

Источник

user1318213 02 янв '16 в 02:48

19 ответов

Другие вопросы по тегам java android mobile material-design android-tablayout

user3444057 17 фев '16 в 15:39 2016-02-17 15:39 · Answer 1 · 2016-02-17 15:39

Я нашел способ, который может быть легким.

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    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);
                }
            }
    );

user6842292 12 ноя '18 в 09:10 2018-11-12 09:10 · Answer 2 · 2018-11-12 09:10

Это можно сделать очень просто, полностью в XML.

Добавьте одну строку к вашему TabLayout в вашем XML, app:tabIconTint="@color/your_color_selector", как показано ниже:

 <android.support.design.widget.TabLayout
     android:id="@+id/tab_layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:tabIconTint="@color/your_color_selector"
     app:tabIndicatorColor="@color/selected_color"/>

Затем создайте файл селектора цвета (с именем "your_color_selector.xml" выше) в каталоге res/color:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/selected_color" android:state_selected="true"/>
    <item android:color="@color/unselected_color"/>
</selector>

Предполагается, что в вашем файле colors.xml есть 2 цвета: selected_color и unselected_color.

user6006407 02 мар '16 в 07:29 2016-03-02 07:29 · Answer 3 · 2016-03-02 07:29

private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
    tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    tabLayout.getTabAt(3).setIcon(tabIcons[3]);

    tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);


    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
        }

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

        }
    });
}

user2796524 22 мар '16 в 17:27 2016-03-22 17:27 · Answer 4 · 2016-03-22 17:27

Вы можете использовать ColorStateList.

Сначала создайте XML-файл (например, /color/tab_icon.xml), который выглядит следующим образом и определяет различные оттенки для разных состояний:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/icon_light"
        android:state_selected="true" />

    <item android:color="@color/icon_light_inactive" />
</selector>

Затем добавьте это в свой код:

ColorStateList colors;
if (Build.VERSION.SDK_INT >= 23) {
    colors = getResources().getColorStateList(R.color.tab_icon, getTheme());
}
else {
    colors = getResources().getColorStateList(R.color.tab_icon);
}

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    Drawable icon = tab.getIcon();

     if (icon != null) {
        icon = DrawableCompat.wrap(icon);
        DrawableCompat.setTintList(icon, colors);
    }
}

Во-первых, вы извлекаете ColorStateList из вашего XML (метод без темы устарел, но необходим для устройств, предшествующих Зефиру). Затем вы устанавливаете для значка каждой вкладки его TintList в ColorStateList; используйте DrawableCompat (библиотека поддержки) для поддержки более старых версий.

Это оно!

user2404262 02 янв '16 в 04:03 2016-01-02 04:03 · Answer 5 · 2016-01-02 04:03

Для этого вам нужно будет настроить значки вкладок, используя класс селектора для каждой вкладки, например:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/advisory_selected" android:state_selected="true" />
<item android:drawable="@drawable/advisory_normal" android:state_selected="false" />

17

Источник

user2404262 02 янв '16 в 04:03

user10875657 03 окт '19 в 20:50 2019-10-03 20:50 · Answer 6 · 2019-10-03 20:50

Добавьте это в res > colors каталог:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true" android:color="@android:color/holo_orange_dark"/>
  <item android:color="@android:color/holo_red_light"/>
</selector>

Добавьте код в виде вкладки в xml:

app:tabIconTint="@color/selector_tab"

14

Источник

user10875657 03 окт '19 в 20:50

user3812129 11 фев '16 в 04:27 2016-02-11 04:27 · Answer 7 · 2016-02-11 04:27

Почему вы не используете иконки иконки (например, шрифт Awesome) для ваших иконок? затем измените шрифт текста вкладки на желаемый значок шрифта.ttf и наслаждайтесь изменением выбранного цвета текста на значки вкладок!

Я сам использовал этот метод, и он действительно хорош и чист:)

во-первых, установите заголовки из нужного шрифта значка:

в string.xml:

    <string name="ic_calculator">&#xf1ec;</string>
    <string name="ic_bank">&#xf19c;</string>

затем в MainActivity.Java:

    private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new FragmentBank(), getString(R.string.ic_bank));
    adapter.addFragment(new FragmentCalculate(), getString(R.string.ic_calculator));
    viewPager.setAdapter(adapter);
    }

Затем вы должны изменить шрифт заголовков вкладок на font-awesome:

    Typeface typeFaceFont = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    for (int j = 0; j < tabsCount; j++) {
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(typeFaceFont);
            }
        }
    }

и, наконец, что не менее важно, в связанном XML-файле установите цвет для ваших tabTextColor и tabSelectedTextColor:

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="horizontal"
        android:background="@color/colorPrimaryDark"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/textColorPrimary"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>

и в colors.xml:

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorHighlight">#FFFFFF</color>
    <color name="textColorPrimary">#E1E3F3</color>
</resources>

user5159867 02 янв '16 в 04:29 2016-01-02 04:29 · Answer 8 · 2016-01-02 04:29

Проверьте следующий код. Настройте свой значок один цвет, а другой нет цвета.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/mybookings_select" android:state_selected="true"/><!-- tab is selected(colored icon)-->
<item android:drawable="@drawable/mybookings" /><!-- tab is not selected(normal no color icon)-->

5

Источник

user5159867 02 янв '16 в 04:29

user7225126 11 июн '21 в 21:39 2021-06-11 21:39 · Answer 9 · 2021-06-11 21:39

Я знаю, что это немного устарело, но я столкнулся с той же проблемой, и кажется, что ответы здесь устарели.

Используйте список состояний цвета и добавьте его непосредственно в XML-элемент TabLayout.

Учитывая файл tab_icon.xml ниже: -

      <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_selected="true" />
    <item android:color="@android:color/darker_gray" />
</selector>

И элемент XML TabLayout (обратите внимание на атрибут tabIconTint )

      <com.google.android.material.tabs.TabLayout
        android:id="@+id/favourites_selectionTL"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIconTint="@color/tab_icon"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabInlineLabel="true"
        app:tabSelectedTextColor="@color/colorPrimary" />

Вот и все.

user549372 24 окт '21 в 02:12 2021-10-24 02:12 · Answer 10 · 2021-10-24 02:12

В единственном есть две записи: android.R.attr.state_selectedи подстановочный знак по умолчанию. Их можно изменить, например. с участием src/main/res/xml/tab_layout_color_state.xml:

      <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_selected="true"/>
    <item android:color="@color/white"/>
</selector>

Тогда xml ресурс может применяться как ColorStateList:

      private void applyColorStateList(@NonNull TabLayout tabLayout, int resId) {
    ColorStateList stateList = requireContext().getColorStateList(resId);
    tabLayout.setTabIconTint(stateList);
}

user9562588 05 июл '19 в 13:49 2019-07-05 13:49 · Answer 11 · 2019-07-05 13:49

Вы можете использовать addOnTabSelectedListener, меня устраивает.

tablayout = findViewById(R.id.viewall_tablayout);
pager = findViewById(R.id.viewall_pager);
adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragments(new RestFragment(),"Restaurant");
adapter.addFragments(new BarFragment(),"Bar");
adapter.addFragments(new HotelFragment(),"Hotel");
adapter.addFragments(new CoffeeFragment(),"Coffee Shop");
pager.setAdapter(adapter);
tablayout.setupWithViewPager(pager);

tablayout.getTabAt(0).setIcon(R.drawable.ic_restaurant);
tablayout.getTabAt(1).setIcon(R.drawable.ic_glass_and_bottle_of_wine);
tablayout.getTabAt(2).setIcon(R.drawable.ic_hotel_black_24dp);
tablayout.getTabAt(3).setIcon(R.drawable.ic_hot_coffee);

tablayout.getTabAt(0).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(1).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(2).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(3).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        tab.getIcon().setTint(getResources().getColor(R.color.colorPrimary,getTheme()));
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tab.getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
    }

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

    }
});

user7408350 25 дек '20 в 16:12 2020-12-25 16:12 · Answer 12 · 2020-12-25 16:12

Для изменения оттенка даже вы можете установить тот же цвет, что и у вашего значка вкладки.

         <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                android:background="@color/bgFrag"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:layout_gravity="bottom"
                app:tabGravity="fill"
                app:tabTextColor="@drawable/tab_search_text_clr"
                app:tabIconTintMode="multiply"
                app:tabIconTint="#ffffff"
                app:tabIndicator="@null"
                app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                app:tabInlineLabel="true"
                app:tabMode="fixed" >

            </com.google.android.material.tabs.TabLayout>

tab_search_text_clr.xml

      <?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#ffffff"/>  <!-- checked -->
    <item android:state_selected="true" android:color="#ffffff"/>  <!-- checked -->
    <item android:color="#acacac"/><!-- anything else -->
</selector>

user7232944 19 июл '17 в 06:57 2017-07-19 06:57 · Answer 13 · 2017-07-19 06:57

Что касается второго ответа, который показывает, как установить цвет отдельно, многие могут задаться вопросом, как убрать цвет первого значка при переключении на следующий. Что вы можете сделать, это пойти так:

private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);

tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(1).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(2).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(3).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);


tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        tab.getIcon().setColorFilter(Color.GREEN,PorterDuff.Mode.SRC_IN);

    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        //for removing the color of first icon when switched to next tab
        tablayout.getTabAt(0).getIcon().clearColorFilter();
        //for other tabs
        tab.getIcon().clearColorFilter();

    }

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

    }
});}

Я бы прокомментировал второй ответ, но мне не хватило репутации для этого! Сожалею. Но, пожалуйста, следите за тем, чтобы сэкономить время и головную боль! Счастливого обучения

user4048760 02 янв '16 в 03:00 2016-01-02 03:00 · Answer 14 · 2016-01-02 03:00

Одним из возможных способов "выделения" значка является доступ к представлению изображения и настройка цветового фильтра. Попробуйте использовать метод ImageView setColorFilter(int color) и применить белый цвет.

2

Источник

user4048760 02 янв '16 в 03:00

user7338759 12 ноя '18 в 21:09 2018-11-12 21:09 · Answer 15 · 2018-11-12 21:09

tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {...}Был объявлен устаревшим. Скорее используйте

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

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

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

        }
    });

user11580236 06 июл '19 в 13:38 2019-07-06 13:38 · Answer 16 · 2019-07-06 13:38

Выполните следующие шаги соответственно.

app / src / main / res / values /colors.xml (добавить в colors.xml)

<color name="icon_enabled">#F3D65F</color>
<color name="icon_disabled">#FFFFFF</color>

app / src / main / res / color / custom_tab_icon.xml (создайте папку с именем color в res. Создайте пользовательскую вкладку icon.xml в папке.)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:color="@color/icon_enabled" android:state_selected="true"/>
 <item android:color="@color/icon_disabled" android:state_selected="false"/>
</selector>

app / src / main / res / drawable / ic_action_settings.png (Создать)

дважды щелкните на action_settings, чтобы добавить

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="21.6"
android:viewportHeight="21.6"
android:tint="@color/custom_tab_icon">
<group android:translateX="-1.2"
  android:translateY="-1.2">
  <path
      android:fillColor="#FF000000"
 android:pathData="M19.1,12.9a2.8,2.8 0,0 0,0.1 -0.9,2.8 2.8,0 0,0 -0.1,-0.9l2.1,-1.6a0.7,0.7 0,0 0,0.1 -0.6L19.4,5.5a0.7,0.7 0,0 0,-0.6 -0.2l-2.4,1a6.5,6.5 0,0 0,-1.6 -0.9l-0.4,-2.6a0.5,0.5 0,0 0,-0.5 -0.4H10.1a0.5,0.5 0,0 0,-0.5 0.4L9.3,5.4a5.6,5.6 0,0 0,-1.7 0.9l-2.4,-1a0.4,0.4 0,0 0,-0.5 0.2l-2,3.4c-0.1,0.2 0,0.4 0.2,0.6l2,1.6a2.8,2.8 0,0 0,-0.1 0.9,2.8 2.8,0 0,0 0.1,0.9L2.8,14.5a0.7,0.7 0,0 0,-0.1 0.6l1.9,3.4a0.7,0.7 0,0 0,0.6 0.2l2.4,-1a6.5,6.5 0,0 0,1.6 0.9l0.4,2.6a0.5,0.5 0,0 0,0.5 0.4h3.8a0.5,0.5 0,0 0,0.5 -0.4l0.3,-2.6a5.6,5.6 0,0 0,1.7 -0.9l2.4,1a0.4,0.4 0,0 0,0.5 -0.2l2,-3.4c0.1,-0.2 0,-0.4 -0.2,-0.6ZM12,15.6A3.6,3.6 0,1 1,15.6 12,3.6 3.6,0 0,1 12,15.6Z"/>
</group>
</vector>

user2080959 29 мар '18 в 19:22 2018-03-29 19:22 · Answer 17 · 2018-03-29 19:22

Расширяя мой предпочтительный ответ с ColorStateList отсюда, вы можете использовать следующее решение, если вы используете пользовательские вкладки.

Настройте вкладки в xml своей деятельности

 ...

<android.support.design.widget.TabLayout
    android:id="@+id/main_tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TabItem
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/nav_bar_tab_item"/>

    <android.support.design.widget.TabItem
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/nav_bar_tab_item"/>
</android.support.design.widget.TabLayout>

...

И пользовательский макет вкладки nav_bar_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="@+id/nav_bar_item_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingEnd="@dimen/_5sdp"
android:paddingStart="@dimen/_5sdp">

<ImageView
    android:id="@+id/item_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:id="@+id/item_description"
    android:layout_width="wrap_content"
    android:gravity="center"

<!-- Use selector here to change the text color when selected/unselected -->
    android:textColor="@color/nav_bar_icons_color"

    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/item_img"/>

</android.support.constraint.ConstraintLayout>

В вашей деятельности

    tabLayout = findViewById(R.id.main_tablayout);

    ConstraintLayout navMyHotelLayout = (ConstraintLayout) tabLayout.getTabAt(0)
            .getCustomView();
    tab1Icon = navMyHotelLayout.findViewById(R.id.item_img);
    tab1TextView = navMyHotelLayout.findViewById(R.id.item_description);

    tab1Icon.setImageResource(R.drawable.ic_tab1);

    // Use the selector here to change the color when selected/unselected
    tintImageViewSelector(tab1Icon, R.color.nav_bar_icons_color);

    tab1TextView.setText("tab 1");

    ConstraintLayout navTtdLayout = (ConstraintLayout) tabLayout.getTabAt(1)
            .getCustomView();
    tab2Icon = navTtdLayout.findViewById(R.id.item_img);
    tab2View = navTtdLayout.findViewById(R.id.item_description);

    tab2Icon.setImageResource(R.drawable.ic_tab2);
    tintImageViewSelector(tab2Icon, R.color.nav_bar_icons_color);
    tab2TextView.setText("tab 2");

И добавить эти вспомогательные функции для изменения цвета

public static void tintDrawableSelector(Drawable vd, final @ColorRes int clrRes, Context context) {

    DrawableCompat.setTintList(vd, ContextCompat.getColorStateList(context, clrRes));
}

public static void tintImageViewSelector(ImageView imgView, final @ColorRes int clrRes, Context context) {

    tintDrawableSelector(imgView.getDrawable(), clrRes);
}

Наконец, селектор nav_bar_icons_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_checked="true"/>
    <item android:color="@android:color/white" android:state_selected="true"/>
    <item android:color="@android:color/black"/>
</selector>

user8630803 24 май '19 в 15:41 2019-05-24 15:41 · Answer 18 · 2019-05-24 15:41

Вы можете изменить цвет текста выбранной вкладки, используя следующий атрибут xml макета вкладки:

app:tabSelectedTextColor="your desired color"

Чтобы настроить цвет значка выбранной вкладки, необходимо использовать селектор. Создайте XML-файл в папке для рисования:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="selected_item_color" android:state_activated="true" />
   <item android:color="unselected_item_color" />
</selector>

и добавьте этот селектор в атрибут xml макета вкладки, как показано ниже:

app:tabIconTint="@drawable/name_of_file"

user11207089 15 мар '19 в 09:53 2019-03-15 09:53 · Answer 19 · 2019-03-15 09:53

Проверьте следующий код:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        if(tab.getPosition() == 0){
            tabLayout.getTabAt(0).setIcon(tabIcons1[0]);
        }
        if(tab.getPosition() == 1){
            tabLayout.getTabAt(1).setIcon(tabIcons1[1]);
        }
        if(tab.getPosition() == 2){
            tabLayout.getTabAt(2).setIcon(tabIcons1[2]);
        }
    }
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }
    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});