TabLayoutの選択したタブのアイコンの色を変更するにはどうすればよいですか？

82

とを使用しTabLayoutていViewPagerますが、TabLayoutで選択したタブのアイコンの色を最も効率的に変更するにはどうすればよいのでしょうか。

これがどのように実装されるかについての完璧なリファレンスは、GoogleのYoutubeアプリです。メインページには、濃い灰色の4つのアイコンがあります。特定のタブを選択すると、タブのアイコンが白になります。

サードパーティのライブラリがない場合、どうすれば同じ効果を達成できますか？

考えられる解決策の1つは、明らかにセレクターを使用することです。ただし、その場合は、アイコンの白バージョンと灰色バージョンの両方を見つけて、タブが選択または選択解除されたときにアイコンを切り替える必要があります。アイコンの色などを強調するだけの、もっと効果的な方法があるのではないかと思います。私はどのチュートリアルでもこれを見つけることができませんでした。

編集

上記の解決策では、各タブのアイコンに2つのドローアブルを使用する必要があります。私はプログラム的にそれを行うことができる方法があります場合、私は思ったんだけどONE各タブのアイコンの描画可能に。

java  android  mobile  material-design  android-tablayout 
— ウェイウェイ
ソース
1
android-studioタグはIDEに固有の場合にのみ使用してください。
— スーフィアン2016
@WayWayはこの問題の解決策を手に入れましたか？私も同じものを探しています。
— ラジュ2016

回答:

93

簡単な方法を見つけました。 

    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);
                }
            }
    );
— クリスチャンホヨス
ソース
uがplsは私が同じ方法に従うことをしようとしたが、そのはviewpager.setOnPageChangeListener呼び出し中に、残念ながら私のonTabSelectedが呼び出さ取得されていない伝えることができます
— Erum
onTabSelectedが呼び出されない理由はわかりませんが、コードデバッグを行って、どこに問題があるのか​​を知ることをお勧めします。間違いなく間違いが見つからない場合は、setOnPageChangeListenerで同じことを達成できると思いますが、それを行うのは難しいかもしれません。
— Cristian Hoyos 2016年
3
setOnTabSelectedListenerは非推奨です。addOnTabSelectedListenerを使用してください
— Nick Asher
1
こんにちは、タブレイアウトにcustomViewを使用していますが、customViewを使用したタブ選択でアイコンの色とビューの背景色を変更できませんでしたか？どうすればいいですか？
— Erum 2017
50

これは非常に簡単に、完全にxmlで実行できます。

app:tabIconTint="@color/your_color_selector"以下のように、xmlのTabLayoutに1行追加します。

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

次に、res / colorディレクトリにカラーセレクタファイル（上記の「your_color_selector.xml」という名前）を作成します。

<?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ファイルに「selected_color」と「unselected_color」の2色があることを前提としています。

— ヴィン・ノーマン
ソース
1
（Build.VERSION.SDK_INT> = 23）であれば{それが動作}他{ stackoverflow.com/a/36161252/8072092 }
— Joonsoo
@joonsooそれは私がAPI 19までのプロジェクトで使用しているバージョンでは23より低い動作します
— ヴィンノーマン
43 
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) {

        }
    });
}
— ヌルカヤディン
ソース
アプリケーションを閉じて開くと、最初のbtで正常に機能しました。最初に、指定した色でオナが開始されます。
— サム
これを防ぐにはsetCurrentItem(0)、onBackButton()メソッドが呼び出されたときにviewPagerのインスタンスをアクティビティから呼び出すことができます。ユーザーは、アプリを終了しようとすると、常に最初のフラグメントで返されます。
— Dusan Dimitrijevic 2016
tab.getIcon（）。clearColorFilter（）;を使用できます。フィルタを削除するには
— Ahmad Dehnavi 2016年
2
setOnTabSelectedListenerは非推奨になりました。代わりにaddOnTabSelectedListenerを使用してください。developer.android.com/reference/android/support/design/widget/...
— レッドM
37

ColorStateListを使用できます。

まず、/color/tab_icon.xml次のような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);
    }
}

まず、XMLからColorStateListを取得します（テーマのないメソッドは非推奨ですが、マシュマロ以前のデバイスには必要です）。次に、各タブのアイコンにTintListをColorStateListに設定します。DrawableCompat（サポートライブラリ）を使用して、古いバージョンもサポートします。

それでおしまい！

— フェリックス・エーデルマン
ソース
4
これは、アイコンの色を手動で変更することを意味しないため、これまでのところ最良の解決策です
— xleon 2016
私はしませんが、TabLayout（named tabLayout）が初期化された後、アクティビティのonCreate（..）メソッドに後者のコードを挿入するだけで済みます。
— Felix Edelmann 2016
これをsvgアイコンファイルに適用できますか？
— 赤M
Androidでsvgを使用することはできません（追加のライブラリなしで）が、私のソリューションはAndroid Vector Drawables（svgと同様の利点があります）でも機能します。
— Felix Edelmann 2017
あなたのソリューションは機能しますが、Android 23未満では機能しません。すべてのタブが同じ色になり、非アクティブな色になります。理由や回避策について何か考えはありますか？
— ジョン
17

そのためには、次のように各タブのセレクタークラスを使用してタブアイコンをカスタマイズする必要があります。

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

— アンシュル・ティヤギ
ソース
それで、この方法では、それは質問で説明されているものと同じですか？レイアウトにあるタブのアイコンごとに2つのドローアブル（各色の1つ）を見つける必要がありますか？
— ウェイウェイ
丁度。より明確にするために、コードで質問を編集してください。
— Anshul Tyagi
9

これを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"
— Arjun Verma
ソース
1
（Build.VERSION.SDK_INT> = 23）であれば{それが動作}他{ stackoverflow.com/a/36161252/8072092 }
— Joonsoo
5

アイコンにアイコンフォント（font 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.TabLayout>

および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>
— par4301
ソース
アイコンフォントは、一部のデバイスでは機能しません。注意して使用してください。
— シャンク2016年
4

次のコードを確認してください。アイコンをカスタマイズします。1つはカラーで、もう1つはカラーではありません。

<?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)-->

— プラタップバダバス
ソース
2

色を個別に設定する方法を示す2番目の回答を参照すると、多くの人は、次のアイコンに切り替えるときに最初のアイコンの色を削除する方法について疑問に思うかもしれません。あなたができることはこのように行くことです：

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) {

    }
});}

私は2番目の答えについてコメントしたでしょうが、それについて十分な評判がありませんでした！ごめんなさい。しかし、あなたはあなたの時間とあなたの頭痛を節約するだろうということに従ってください！幸せな学習

— Alok
ソース
2

あなたは使うことができます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) {

    }
});
— Shakthi Dilshan
ソース
1

アイコンを「強調表示」する1つの可能な方法は、画像ビューにアクセスしてカラーフィルターを設定することです。setColorFilter（int color）ImageViewメソッドを使用して、白を適用してみてください。

— ヨーアサレ
ソース
はい、でもタブが選択されたときにどのように我々はImageViewのにアクセスすることができます
— Erum
1

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) {

        }
    });
— Ememobong AkpanEkpo
ソース
0

色合いを変更するために、ドローブルタブアイコンが持っているものと同じ色を設定することもできます

   <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>
— マンサン・パテル
ソース
-1

ここから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>
— NikiFo
ソース
-1

次のコードを確認してください。 

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) {
    }
});
— カルーニャネポリアン
ソース
これはTheme.MaterialComponents.DayNightのような素材をテーマに動作していない
— のKishan Solanki
-1

タブレイアウトの次の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"
— シュリニバサン
ソース
動作しません。動作しないことは別として、name_of_fileがdrawable / name_of_file.xmlである場合は、そのようにマークする必要があります。そうでない場合は、読者に意味を推測させます。
— ミッチ
name_of_fileは、読者が自分のドローアブルファイルの名前を示すものです。
— シュリニバサン
-1

それぞれ次の手順を実行します。

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（resにcolorという名前のフォルダーを作成します。フォルダー内にカスタムタブ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>
— Beytullah
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.