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




android mobile (10)

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

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

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

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

संपादित करें

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


क्रमशः निम्न चरणों का पालन करें।

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>

"हाइलाइटिंग" आइकन का एक संभव तरीका छवि को देखने और रंग फिल्टर सेट करने के लिए है। SetColorFilter (int color) ImageView विधि का उपयोग करके और सफेद रंग को लागू करने का प्रयास करें।


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

    }
});

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

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

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

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 फ़ाइल में, आपके टैबटॉरर और टैब के लिए रंग सेट करें।

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

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

आप टैब लेआउट के निम्नलिखित 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"

इसके लिए आपको प्रत्येक टैब के लिए चयनकर्ता वर्ग का उपयोग करके टैब आइकन को अनुकूलित करना होगा:

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


निम्नलिखित कोड की जाँच करें:

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

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

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


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

अपने 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>

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


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

        }
    });




android-tablayout