TabLayout का उपयोग करते समय मैं टैब पृष्ठभूमि का रंग कैसे बदलूं?

Question

यह मुख्य गतिविधि में मेरा कोड है

public class FilterActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_filter);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    PageAdapter pageAdapter = new PageAdapter(getSupportFragmentManager(), FilterActivity.this);
    viewPager.setAdapter(pageAdapter);

    // Give the TabLayout the ViewPager
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);



  }
}

और यह XML में मेरा कोड है

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar">
    </include>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="fill_parent"
        style="@style/MyCustomTabLayout"
        android:layout_height="48dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

मैं चयनित होने पर एक टैब का पृष्ठभूमि रंग बदलना चाहता हूं

Answer 1

आखिरकार मेरे लिए जो काम किया गया वह @ 我 是, डीजे के समान है, लेकिन फ़ाइल tabBackgroundमें होना चाहिए layoutऔर अंदर नहीं होना चाहिए style, इसलिए ऐसा दिखता है:

res/layout/somefile.xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

और चयनकर्ता res/drawable/tab_color_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

Comments

आप उस विशेषता के लिए एक रंग मान भी जोड़ सकते हैं: यानी: ऐप: tabBackground: @ color / colorAccent

— Val Martinez

समाधान के लिए धन्यवाद। हालाँकि, मैंने इसके साथ डिफ़ॉल्ट रिपल इफ़ेक्ट खो दिया।

— केन रतनचाई एस।

मैं इसे कैसे प्रोग्राम कर सकता हूं?

— टीएसआर

@ सीटीआर, यदि आपको प्रत्येक टैब के लिए अलग-अलग रंगों की आवश्यकता नहीं है, तो आप कर सकते हैं tabLayout.setBackgroundColor(colorInt)। आप प्रत्येक टैब के लिए इसकी आवश्यकता है, तो आप अपने TabLayout से बच्चों को निकाल सकते हैं

— कार्ल

रंगरूप में सुधार करने, मुझे लगता है कि हम भी जोड़ना चाहिए state_pressed : <आइटम Android: drawable = "@ रंग / tab_background_selected" एंड्रॉयड: state_pressed = "true" />

— सोचो दो बार कोड एक बार

Answer 2

आप यह कोशिश कर सकते हैं:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/background</item>
</style>

आपकी पृष्ठभूमि में xml फ़ाइल:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/white" />
    <item android:drawable="@color/black" />
</selector>

Comments

और इसे कैसे लागू किया जाए?

— टीएसआर

Answer 3

Xml में एट्रीब्यूट जोड़ें:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

और ड्रा करने योग्य फ़ोल्डर में बनाएँ, tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

Answer 4

क्या आपने एपीआई की जाँच करने की कोशिश की है ?

आपको OnTabSelectedListenerइवेंट के लिए एक श्रोता बनाने की आवश्यकता होगी , तब जब कोई उपयोगकर्ता किसी भी टैब का चयन करता है जिसे आपको जांचना चाहिए कि क्या यह सही है, तो पृष्ठभूमि का उपयोग करके रंग बदलें tabLayout.setBackgroundColor(int color), या यदि यह सही टैब नहीं है, तो सुनिश्चित करें कि आप वापस बदलना सुनिश्चित करें एक ही विधि के साथ फिर से सामान्य रंग।

Comments

हां, मैंने कोशिश की है कि, लेकिन टैबलैट पूर्ण टैब विजेट रंग बदलता है, और मुझे टैबलैटआउट पर कोई विधि नहीं मिल रही है। केवल टैब रंग बदल जाता है और अन्य टैब उसी रंग के साथ बने रहते हैं।

— जोएल लारा

मैं 100% निश्चित नहीं हूं कि आप आखिर क्या हैं। यदि आप केवल एक टैब के रंग को रंगना चाहते हैं तो आप उस टैब के अंदर एक कंटेनर / दृश्य जोड़ सकते हैं, तो आपको XML की तरह कंटेनर / दृश्य पृष्ठभूमि रंग को सामान्य रूप से सेट करने में सक्षम होना चाहिए, उदाहरण के लिए निम्नलिखित पृष्ठभूमि सेट करेगा लाल करने के लिएandroid:background=FF0000

— टोना

ये अन्य प्रश्न / उत्तर आपकी मदद कर सकते हैं: stackoverflow.com/questions/30904138/… और stackoverflow.com/a/30755351/1270000

— 22

Answer 5

आप इसे xml में रख सकते हैं।

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabTextColor="@color/colorGray"
        app:tabSelectedTextColor="@color/colorWhite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Answer 6

जैसा कि मुझे मेरे लिए सबसे अच्छा और उपयुक्त विकल्प मिला और यह एनीमेशन के साथ भी काम करेगा।

आप indicatorइसे एक पृष्ठभूमि के रूप में उपयोग कर सकते हैं ।

आप app:tabIndicatorGravity="stretch"पृष्ठभूमि के रूप में उपयोग करने के लिए विशेषता सेट कर सकते हैं ।

उदाहरण:

   <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorGravity="stretch"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/colorAccent">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chef" />


        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User" />

    </android.support.design.widget.TabLayout>

आशा है कि यह आपकी मदद करेगा।

Comments

यह उच्चारण रंग को स्वतः ले रहा है। उच्चारण के रंग को बदले बिना इसे अलग रंग कैसे दें। धन्यवाद

— १२:१६ पर माइंडोस्टरमेयर

आप app:tabIndicatorColor

— प्रतीक बुटानी

Answer 7

आप इस तरह से प्रत्येक टैब की पृष्ठभूमि या लहर रंग बदल सकते हैं:

    //set ripple color for each tab
    for(int n = 0; n < mTabLayout.getTabCount(); n++){

        View tab = ((ViewGroup)mTabLayout.getChildAt(0)).getChildAt(n);

        if(tab != null && tab.getBackground() instanceof RippleDrawable){
            RippleDrawable rippleDrawable = (RippleDrawable)tab.getBackground();
            if (rippleDrawable != null) {
                rippleDrawable.setColor(ColorStateList.valueOf(rippleColor));
            }
        }
    }

Answer 8

इसके आस-पास कुछ गड़बड़ होने के बाद, मुझे वांछित लुक (कम से कम एमुलेटर में) मिला है और यह तरंग प्रभाव रखता है।

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_selector"
    app:tabIconTint="@drawable/tab_selector"
    app:tabIconTintMode="src_atop"
    app:tabTextColor="@drawable/tab_selector" />

और @drawable/tab_selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:drawable="@color/colorPrimaryDark" android:state_selected="true" />
    <item android:color="@color/colorPrimaryDark" android:drawable="@color/colorPrimary" />
</selector>

FYI करें: यह है कि एमुलेटर ने मुझे colorतर्क जोड़ने से पहले दिखाया था @drawable/tab_selector:

Answer 9

आप इस विशेषता द्वारा टैब का पृष्ठभूमि रंग बदल सकते हैं

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
'android:background="@color/primary_color"/>'

Answer 10

सरलतम समाधानों में से एक है color.rimml से colorPrimary को बदलना।