मैं TabLayout के चयनित टैब के आइकन का रंग कैसे बदलूं?

82

मैं एक के TabLayoutसाथ प्रयोग कर रहा हूं ViewPagerऔर मैं सोच रहा हूं कि मैं टैबलैटआउट में चयनित टैब के आइकन के रंग को सबसे कुशलता से कैसे बदल सकता हूं।

इसे कैसे लागू किया जाता है, इसके लिए एक सही संदर्भ Google का Youtube ऐप है । मुख्य पृष्ठ पर, चार चिह्न हैं जो गहरे भूरे रंग के हैं। जब एक विशिष्ट टैब चुना जाता है, तो टैब का आइकन सफेद हो जाता है।

किसी भी तीसरे पक्ष के पुस्तकालयों के बिना , मैं एक ही प्रभाव कैसे प्राप्त कर सकता हूं?

एक संभव समाधान स्पष्ट रूप से चयनकर्ताओं के साथ है। लेकिन उस स्थिति में, मुझे आइकन का एक सफेद और एक ग्रे संस्करण दोनों ढूंढना होगा और तब आइकन को स्विच करना होगा जब टैब चयनित या अचयनित हो जाएगा। मैं सोच रहा था कि क्या कोई और प्रभावी तरीका है जहां मैं सिर्फ आइकन रंग या कुछ और उजागर कर सकता हूं। मुझे यह किसी भी ट्यूटोरियल में नहीं मिला है।

संपादित करें

जिस समाधान का मैं सीधे उल्लेख करता हूं, उसके लिए प्रत्येक टैब के आइकन के लिए दो ड्रॉबल्स के उपयोग की आवश्यकता होती है। अगर वहाँ एक तरीका है मैं सोच रहा हूँ कि मैं इसे प्रत्येक टैब के आइकन के लिए एक ड्रा करने योग्य प्रोग्राम के साथ कर सकता हूं ।

java  android  mobile  material-design  android-tablayout 
— दूर दूर
स्रोत
1
कृपया android-studioआईडीई के लिए विशिष्ट होने पर केवल टैग का उपयोग करें ।
— सूफियान
@AyWay को इस समस्या का हल मिला? मैं भी उसी की तलाश में हूं।
— राजू

जवाबों:

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);
                }
            }
    );
— क्रिस्टियन होयोस
स्रोत
क्या आप मुझे बता सकते हैं कि मैं उसी तरह से चलने की कोशिश कर रहा हूं, लेकिन दुर्भाग्य से मेरी ऑनटैबलेक्टेड कॉल नहीं हो रही है, जबकि इसकी कॉलिंग
— व्यूपेजर.सेटऑनएजेज चेंजलिस्टनर
मुझे नहीं पता कि onTabSelected को क्यों नहीं बुलाया जा रहा है, लेकिन मैं आपको यह जानने के लिए एक कोड डिबग करने की सिफारिश कर सकता हूं कि समस्या कहां है। यदि आप निश्चित रूप से गलती नहीं पाते हैं, तो मुझे लगता है कि आप इसे setOnPageChangeListener के साथ प्राप्त कर सकते हैं, लेकिन ऐसा करना कठिन हो सकता है।
— क्रिस्टियन होयोस
3
setOnTabSelectedListener को हटा दिया गया है, addOnTabSelectedListener का उपयोग करें
— Nick Asher
1
hi, tablayout के लिए customView का उपयोग करते हुए im, लेकिन आइकन का रंग बदलने और customView का उपयोग करके टैब चयन पर बैकग्राउंड रंग देखने में विफल रहा? किसी भी विचार मैं कैसे करूँगा?
— एरुम
50

यह बहुत सरलता से, पूरी तरह से xml में किया जा सकता है।

app:tabIconTint="@color/your_color_selector"नीचे के रूप में , अपने xml में अपने TabLayout में एक पंक्ति जोड़ें :

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

यह मानता है कि आपके रंग में 2 रंग, "चयनित_ रंग" और "अचयनित_ रंग" हैं। xml फ़ाइल।

— विन नॉर्मन
स्रोत
1
if (Build.VERSION.SDK_INT> = 23) {यह काम करता है} और {{ stackoverflow.com/a/36161252/8072092 }
— Joonsoo
@joonsoo यह 23 से कम संस्करणों पर काम करता है। मैं परियोजनाओं में एपीआई 19 का उपयोग कर रहा हूं।
— विन नोर्मन
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) {

        }
    });
}
— नूरकहादीन
स्रोत
İt ने शुरुआत में बीटी पर ठीक काम किया जब आप अपने द्वारा दिए गए रंग को पहले ओना बंद कर देते हैं।
— सैम
इसे रोकने के लिए आप कॉल कर सकते हैं setCurrentItem(0)उदाहरण के लिए गतिविधि से जब onBackButton()विधि को आमंत्रित किया जाता है, और उपयोगकर्ता हमेशा पहले टुकड़े पर वापस आ जाएगा जब वह ऐप से बाहर निकलने की कोशिश करता है।
— दुसान दिमित्रिजेविक
आप tab.getIcon () का उपयोग कर सकते हैं। ClearColorFilter (); फ़िल्टर हटाने के लिए
— अहमद देहणवी
2
setOnTabSelectedListener को पदावनत किया गया। इसके बजाय addOnTabSelectedListener का उपयोग करें। डेवलपर
— Red M
37

आप एक 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);
    }
}

सबसे पहले, आप अपने XML से ColorStateList को पकड़ो (विषय के बिना विधि पदावनत है, लेकिन पूर्व-मार्शमैलो उपकरणों के लिए आवश्यक है)। फिर आप प्रत्येक टैब के आइकन के लिए सेट करते हैं, जो कलरस्टैटिस्ट के लिए टिंटलिस्ट है; पुराने संस्करणों को भी समर्थन देने के लिए DrawableCompat (समर्थन पुस्तकालय) का उपयोग करें।

बस!

— फेलिक्स एडलमैन
स्रोत
4
यह अब तक का सबसे अच्छा समाधान है, क्योंकि यह मैन्युअल रूप से आइकन का रंग बदलने के लिए नहीं है
— xleon
मैं नहीं करता हूं, लेकिन आपको केवल अपनी गतिविधि के ऑनक्रिएट (..) पद्धति में बाद वाले कोड को तब डालना होगा जब तबलेयआउट (नाम tabLayout) को इनिशियलाइज़ किया गया हो।
— फेलिक्स एडलमैन
क्या हम इसे svg आइकन फ़ाइल पर लागू कर सकते हैं?
— रेड एम
आप एंड्रॉइड में (अतिरिक्त पुस्तकालयों के बिना) एंड्रॉइड में svg का उपयोग नहीं कर सकते हैं, लेकिन मेरा समाधान एंड्रॉइड वेक्टर ड्रॉबल्स (जिसमें svg जैसे समान फायदे हैं) के साथ भी काम करता है ।
— फेलिक्स एडेलमैन
आपका समाधान काम करता है लेकिन नीचे एंड्रॉइड 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" />

— अंशुल त्यागी
स्रोत
तो इस विधि के साथ, यह वही है जो प्रश्न में वर्णित है? मुझे प्रत्येक टैब के आइकन के लिए दो ड्रॉबल्स खोजने होंगे जो मेरे पास लेआउट में हैं (प्रत्येक रंग में से एक)?
— वेवे
बिल्कुल सही। अधिक स्पष्टीकरण के लिए अपने प्रश्न को कोड के साथ संपादित करें।
— अंशुल त्यागी
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"
— अर्जुन वर्मा
स्रोत
1
if (Build.VERSION.SDK_INT> = 23) {यह काम करता है} बाकी { stackoverflow.com/a/36161252/8072092 }
— जूनो 19
5

आप अपने आइकॉन के लिए आइकॉन फॉन्ट (जैसे फॉन्ट भयानक) का उपयोग क्यों नहीं करते हैं? तब टैब टेक्स्ट के फ़ॉन्ट को अपने इच्छित फ़ॉन्ट आइकन में बदल दें। अपने टैब आइकन पर चयनित टेक्स्ट रंग बदलने का आनंद लें!

मैं, स्वयं, इस पद्धति का उपयोग करता था और यह वास्तव में अच्छा और साफ है :)

सबसे पहले, अपने इच्छित आइकन फ़ॉन्ट से शीर्षक सेट करें:

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);
    }

तब आपको टैब शीर्षक के फ़ॉन्ट को फ़ॉन्ट-भयानक में बदलना चाहिए:

    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 और tabSelectedTextfolor के लिए रंग सेट करें:

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

और color.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
स्रोत
आइकन फोंट कुछ उपकरणों पर काम नहीं करते हैं। कृपया सावधानी के साथ उपयोग करें।
— शंक
4

निम्नलिखित कोड की जाँच करें। अपने आइकन को कस्टमाइज़ करें एक रंग है और दूसरा कोई रंग नहीं है।

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

दूसरे उत्तर के संदर्भ में, जो दिखाता है कि अलग से रंग कैसे सेट किया जाए, बहुत से लोग सोच रहे होंगे कि अगले एक पर स्विच करते समय पहले आइकन के रंग को कैसे हटाया जाए। आप जो कर सकते हैं वह इस प्रकार है:

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

आप उपयोग कर सकते हैं 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) {

    }
});
— शक्ति दिलशान
स्रोत
1

"हाइलाइटिंग" आइकन का एक संभावित तरीका छवि को देखने और रंग फिल्टर सेट करने के लिए है। SetColorFilter (int color) 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) {

        }
    });
— एम्मोबॉन्ग अकपनएप्पो
स्रोत
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>
— निकीफो
स्रोत
-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) {
    }
});
— करुणा नेपोलियन
स्रोत
यह थीम थीम जैसे मैटेरियल थीम के साथ काम नहीं कर रहा है। सामग्री.कॉमपेंट।डायनाइट
— किशन सोलंकी
-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 ​​/ colours.xml (color.xml में जोड़ें)

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

app / src / main / res / color / custom_tab_icon.xml (रेस में रंग नामक फ़ोल्डर बनाएं) फ़ोल्डर में एक कस्टम टैब 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>

ऐप / 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>
— बेइतुल्लाह
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.