टैबलायट (एंड्रॉइड डिज़ाइन लाइब्रेरी) टेक्स्ट कलर

Question

मैं नए TabLayout का उपयोग Android Design लाइब्रेरी से कर रहा हूं। मैंने टेक्स्टकॉल स्टैटिस्टलिस्ट का उपयोग करने में कामयाबी हासिल कीtabLayout.setTabTextColors(colorstatelist)

मैं शैलियों का उपयोग करके इसे कैसे प्राप्त कर सकता हूं। xml?

Answer 1

XML विशेषताएँ:

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="@color/your_unselected_text_color"
        app:tabSelectedTextColor="@color/your_selected_text_color"/>

इसके अतिरिक्त, आगे की स्टाइलिंग के लिए tabIndicatorColor या tabIndicatorHeight जैसी विशेषताएँ हैं।

कोड में:

tabLayout.setTabTextColors(
    getResources().getColor(R.color.your_unselected_text_color),
    getResources().getColor(R.color.your_selected_text_color)
);

चूंकि यह पुराना तरीका एपीआई 23 के रूप में पदावनत है, इसलिए विकल्प यह है:

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);

Comments

अगर मैं व्यावहारिक रूप से बदलना चाहता हूं तो क्या होगा?

— प्रियंकाचौहान 7

@ pcpriyanka टिप के लिए धन्यवाद, मैंने कोड में चयनित और अचयनित रंग को परिभाषित करने के आसान तरीके के साथ अपना उत्तर अपडेट किया है।

— Fe Le

Answer 2

यहाँ पाठ शैली और चयनित पाठ रंग को ओवरराइड करने के लिए स्निपेट कोड है

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">@color/tab_text_act</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/tab_text</item>
</style>

और यहाँ लेआउट के लिए स्निपेट कोड है

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyCustomTabLayout" />

Comments

धन्यवाद - यह मेरे लिए काम करता है। बस इंगित करना चाहते हैं कि tabSelectedTextColor टैब के नीचे की रेखा और टैब के चयनित होने पर टैब के पाठ के लिए रंग है।

— साइमन

आप विजेट क्यों ले रहे हैं।

— SpaceMonkey

हमें TabLayout पर "शैली" का उपयोग क्यों करना है? अगर मैं "एंड्रॉइड: थीम" का उपयोग करता हूं तो यह काम क्यों नहीं करता है?

— SpaceMonkey

@Spacemonkey क्योंकि Widget.Design.TabLayout इस तरह के "tabIndicatorColor", "tabIndicatorHeight" की तरह टैब के लिए आधार शैलियों शामिल

— sweetrenard

@sweetrenard ओह, इसलिए यह "एंड्रॉइड: थीम" में निर्दिष्ट विषय को ओवरराइड कर रहा है?

— SpaceMonkey

Answer 3

उपरोक्त सभी उत्तर सही हैं, लेकिन मुझे लगता है कि डिफ़ॉल्ट शैलियों को ओवरराइड करना बेहतर है और केवल उस विशिष्ट तत्व को बदलना है जिसे आप बदलना चाहते हैं। नीचे दिए गए उदाहरण से पाठ बोल्ड हो जाएगा:

<style name="Widget.TabItem" parent="TextAppearance.Design.Tab">
    <item name="android:textStyle">bold</item>
</style>

फिर..,

app:tabTextAppearance="@style/Widget.TabItem"

Comments

क्षमा करें, लेकिन आपको यह रास्ता कहां मिला?

— डेडफिश

Answer 4

आपको बस android:textAppearanceस्टाइल को ओवरराइड करना है। क्योंकि TabLayout textAppearance का उपयोग करते हैं। यहाँ शैली का छोटा स्निपेट कोड है।

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Below will reference with our custom style -->
    <item name="android:textAppearance">@style/my_tab_text</item>
</style>

<style name="my_tab_text" parent="Base.TextAppearance.AppCompat">
    <item name="android:textColor">@android:color/holo_blue_dark</item>
</style>

और अगर आप अपने Apptheme से संदर्भ नहीं लेना चाहते हैं, तो आप सीधे नीचे दिए गए स्निपेट का उपयोग करके TabLayout को निर्दिष्ट कर सकते हैं।

 <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/my_tab_text"
            app:tabIndicatorHeight="48dp"/>

Comments

सुनिश्चित करें कि आप एक माता

— AppCompact

ठीक है तुम सही हो, यह काम करता है। लेकिन केवल "अचयनित" -टैब के लिए। चयनित टैब-टेक्स्ट मेरे लिए हमेशा काला है

— सेबस्टियन

ठीक है, डिजाइन समर्थन पुस्तकालय में चयनित टैब के एक पाठ को असाइन करने के लिए डिज़ाइन लाइब्रेरी में कोई कोड उपलब्ध नहीं है। इसलिए चयनित टैब टेक्स्ट रंग के लिए आपको इसे संपत्ति का उपयोग करके सेट करना होगा ..

— मोइनखान

Answer 5

कस्टम टैब के लिए हमें निम्नलिखित को ओवरराइड करना होगा: 1) ऐप: tabTextColor // for_unselected.tein "

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            style="@style/MyCustomTabLayout"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="?attr/colorPrimary"
            android:scrollbarSize="24sp"
            android:visibility="gone"
            app:tabTextColor="@color/white_40_percent"
            app:tabMode="scrollable" />

2) tabSelectedTextColor // चयनित टैब रंग के लिए 3) tabIndicatorColor // रंग बॉक्स के लिए सूचक

   <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabTextAppearance">@style/TabTextStyle</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="android:tabStripEnabled">true</item>
    <item name="android:padding">0dp</item>
  </style>



<style name="TabTextStyle">
    <item name="android:fontFamily">@string/font_fontFamily_medium</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:textColor">@color/tab_text_color</item>
    <item name="android:textSize">16sp</item>
</style>

tab_text_color.xml

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

Answer 6

सामग्री घटक लाइब्रेरीTabLayout में दिए गए साथ आप कर सकते हैं:

• एक कस्टम शैली का उपयोग करें

  <com.google.android.material.tabs.TabLayout
      style="@style/My_Tablayout"
      ..>

और अपनी शैली में tabTextColorएक चयनकर्ता के साथ प्रयोग करें ।

<!-- TabLayout -->
<style name="My_Tablayout" parent="Widget.MaterialComponents.TabLayout" >
    <item name="tabTextColor">@color/tab_layout_selector</item>
</style>


<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_selected="true"/>
  <item android:alpha="0.60" android:color="?attr/colorOnSurface"/>
</selector>

• app:tabTextColorअपने लेआउट में उपयोग करें :

  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/tab_layout_selector"
      ..>

Answer 7

आसान और सही तरीका:

Xml फ़ाइल में ::

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextAppearance="@style/TabText"/>

मान-शैली फ़ाइल में:

नोट: "cairo_semibold" एक बाहरी फ़ॉन्ट है, आप इसे अपने फ़ॉन्ट से बदल सकते हैं।

<style name="TabText" parent="TextAppearance.Design.Tab">
    <item name="android:textColor">#1f57ff</item>
    <item name="android:textSize">14sp</item>
    <item name="android:fontFamily">@font/cairo_semibold</item>
</style>

Answer 8

सबसे अच्छा या छोटा और सरल तरीका है कस्टम ऐपबार जैसा

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent"
    app:theme="@style/myCustomAppBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageButton
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_toEndOf="@+id/btn_back"
            android:layout_toRightOf="@+id/btn_back"
            android:text="Title"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

    </RelativeLayout>
    </android.support.v7.widget.Toolbar>

Answer 9

XML विशेषताएँ

<com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@color/white"
                    app:tabBackground="@color/colorAccent"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextColor="@color/white"
                    app:tabMode="scrollable" />

कोटलिन में प्रोग्राम किया

(tab_layout as TabLayout).setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary))
(tab_layout as TabLayout).setSelectedTabIndicatorColor(ContextCompat.getColor(mContext, R.color.white))
(tab_layout as TabLayout).setTabTextColors(ContextCompat.getColor(mContext, R.color.white),
                ContextCompat.getColor(mContext, R.color.white))