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




android mobile (9)

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

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

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

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

संपादित करें

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


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

        }
    });
}

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

        }
    });

मुझे एक ऐसा रास्ता मिला जो आसान हो सकता है।

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

यह बहुत सरलता से, पूरी तरह से 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 फ़ाइल।


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


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

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


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

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

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

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

ColorStateList के साथ मेरे पसंदीदा उत्तर को here से बढ़ाते हुए, यदि आप कस्टम टैब का उपयोग कर रहे हैं, तो आप निम्न समाधान का उपयोग कर सकते हैं।

अपनी गतिविधि के 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>

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

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





android-tablayout