नया TabLayout संकेतक रंग और ऊंचाई कैसे बदलें


124

मैं नए के साथ चारों ओर खेल रहा था android.support.design.widget.TabLayout, और एक समस्या मिली, कक्षा की परिभाषा में, संकेतक रंग, और डिफ़ॉल्ट ऊंचाई को बदलने के लिए कोई विधियाँ नहीं हैं।

कुछ शोध करते हुए, पाया गया कि डिफ़ॉल्ट संकेतक रंग AppTheme से लिया गया है। विशेष रूप से यहाँ से:

<item name="colorAccent">#FF4081</item>

अब, मेरे मामले में, अगर मैं colorAccentइसे बदलता हूं, तो यह अन्य सभी विचारों को प्रभावित करेगा जो इस मूल्य को पृष्ठभूमि रंग के रूप में उपयोग करता है, उदाहरण के लिए प्रोग्रेसबार

अब क्या संकेतक को बदलने का कोई तरीका है, इसके अलावा अन्य चीज़ के लिए colorAccent?

जवाबों:


250

इस समस्या के होने के बाद कि नया TabLayout मूल्य से संकेतक रंग का उपयोग करता है colorAccent, मैंने android.support.design.widget.TabLayoutकार्यान्वयन में खुदाई करने का फैसला किया, यह पाते हुए कि इसे अनुकूलित करने के लिए कोई सार्वजनिक तरीके नहीं हैं। हालाँकि मुझे TabLayout की यह शैली विशिष्टता मिली:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

इस शैली के विनिर्देशन के बाद, अब हम TabLayout को इस तरह से अनुकूलित कर सकते हैं:

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/pages_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

और हल की गई समस्या, टैब संकेतक रंग और ऊंचाई दोनों को उनके डिफ़ॉल्ट मानों से बदला जा सकता है।


5
जावा कोड के माध्यम से 'tabSelectedTextColor' (नहीं टैबइंडिलेटर रंग या ऊंचाई) को बदलने का एक तरीका है।
प्रकाश

2
एप्लिकेशन: tabLayout xml विजेट में tabIndicatorColor विशेषता इस मुद्दे को ठीक करने के लिए आवश्यक एकमात्र परिवर्तन है। धन्यवाद!
ब्रैडेन होल्ट

मैंने इसे मूल शैली के रूप में बनाया:parent="@style/Base.Widget.Design.TabLayout"
अल्टिमो_म

यह समाधान वैध पाया जाता है
निखिल

101

डिज़ाइन समर्थन लाइब्रेरी के साथ अब आप उन्हें xml में बदल सकते हैं:

TabLayout संकेतक का रंग बदलने के लिए :

app:tabIndicatorColor="@color/color"

TabLayout संकेतक की ऊंचाई बदलने के लिए :

app:tabIndicatorHeight="4dp"

4
मैंने यह लाइन लगाई, लेकिन रंग अभी भी उच्चारण रंग है
महदी

@Kenji क्या आपको यकीन है कि यह लाइन TabLayout में डाली गई थी और xml के टूलबार बिट में नहीं? बनाने के लिए आसान मिसप्लेमेंट :)
वेस विन्न

ऊंचाई के लिए सही समाधान। यह बढ़िया काम करता है। धन्यवाद मालेक।
हार्दिक जोशी

1
क्या होगा अगर मैं इसके बजाय एक ढाल रंग लागू करना चाहता हूं?
हमजा खान

35

चूंकि मैं एंड्रॉइड डेवलपर की टिप्पणी का अनुसरण नहीं कर सकता , इसलिए यहां किसी और के लिए एक अद्यतन उत्तर दिया गया है, जिसे चयनित टैब संकेतक रंग को प्रोग्रामेटिक रूप से सेट करने की आवश्यकता है:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

इसी तरह, ऊंचाई के लिए:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

ये तरीके केवल हाल ही में सपोर्ट लाइब्रेरी के 23.0.0 में संशोधन किए गए थे , यही वजह है कि सोहिल सेतेशी का उत्तर प्रतिबिंब का उपयोग करता है।


2
setSelectedTabIndicatorHeight को अब हटा दिया गया है, अब किसी भी विचार का क्या उपयोग करना है?
20


13

साथ desing समर्थन पुस्तकालय v23 आप प्रोग्राम रंग और ऊंचाई सेट कर सकते हैं।

बस ऊंचाई के लिए उपयोग करें:

TabLayout.setSelectedTabIndicatorHeight(int height)

यहां आधिकारिक जावदोक

बस रंग के लिए उपयोग करें:

TabLayout.setSelectedTabIndicatorColor(int color)

यहां आधिकारिक जावदोक

यहां आप Google ट्रैकर में जानकारी पा सकते हैं ।


क्या पूर्णांक हम रंग के लिए उपयोग करने वाले हैं?
the_prole

आप रंग वर्ग का उपयोग कर सकते हैं उदाहरण के लिए Color.RED
सौम्या

setSelectedTabIndicatorHeight को अब हटा दिया गया है
एपीपी

9

सूचक रंग और ऊंचाई को प्रोग्रामेटिक रूप से बदलने के लिए आप परावर्तन का उपयोग कर सकते हैं। नीचे दिए गए संकेतक रंग उपयोग कोड के लिए उदाहरण के लिए:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

और संकेतक सेट का उपयोग करने के लिए "setSelectedIndicatorColor" के बजाय "setSelectedIndicatorHeight" का उपयोग करें और फिर अपनी इच्छित ऊंचाई से इसे लागू करें


1
धन्यवाद! यह मेरी मदद करता है! मुझे लगता है कि Google उनके समर्थन पुस्तकालय में इसके लिए विधि प्रदान करना भूल गया।
शिन्टा एस

1
यदि यह पहले से ही सार्वजनिक कार्यों के रूप में उपलब्ध है, तो प्रतिबिंब का उपयोग क्यों करें? डेवलपर
android/

@SoheilSetayeshi ओह, ठीक है। धन्यवाद। शायद आपको जवाब अपडेट करना चाहिए।
एंड्रॉइड डेवलपर

1
लेकिन यह समर्थन पुस्तकालय 23.0.0 से नीचे एपीआई के लिए एक सही समाधान है। मेरा मतलब है वाहो! बहुत बढ़िया जवाब!
सूद

6

फ़ोटो संकेतक इसका उपयोग करते हैं:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color

6

xml से:

app:tabIndicatorColor="#fff"

जावा से:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));


0

बस इस लाइन को अपने कोड में डालें। यदि आप रंग बदलते हैं तो कोष्ठकों में रंग मान बदलें।

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

0

Android इसे आसान बनाता है।

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

तो, हम सिर्फ कहते हैं

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

यह हमें एक नीला सामान्य रंग और बैंगनी चयनित रंग देगा।

अब हम ऊँचाई निर्धारित करते हैं

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

और ऊंचाई के लिए हम कहते हैं

mycooltablayout.setSelectedIndicatorHeight(6);
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.