नीचे नेविगेशन दृश्य में चयनित टैब का रंग


142

मैं BottomNavigationViewएक प्रोजेक्ट में जोड़ रहा हूं , और मैं चयनित टैब के लिए एक अलग पाठ (और आइकन टिंट) रंग रखना चाहूंगा (गैर-चयनित टैब प्रभाव को प्राप्त करने के लिए)। android:state_selected="true"एक रंग चयनकर्ता संसाधन फ़ाइल के साथ एक अलग रंग का उपयोग करना काम नहीं करता है। मैंने अतिरिक्त आइटम प्रविष्टियों के साथ android:state_focused="true"या android:state_enabled="true", दुर्भाग्य से कोई प्रभाव नहीं होने की कोशिश की । state_selectedडिफ़ॉल्ट (गैर-चयनित) रंग के लिए झूठी (स्पष्ट रूप से) विशेषता को बिना किसी भाग्य के साथ सेट करने का प्रयास किया ।

इस प्रकार मैं अपने लेआउट में दृश्य जोड़ता हूं:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/silver"
        app:itemIconTint="@color/bnv_tab_item_foreground"
        app:itemTextColor="@color/bnv_tab_item_foreground"
        app:menu="@menu/bottom_nav_bar_menu" />

यहाँ मेरा रंग चयनकर्ता ( bnv_tab_item_foreground.xml) है:

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

और मेरा मेनू संसाधन ( bottom_nav_bar_menu.xml):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_local_taxi_black_24dp"
        android:title="@string/home" />
    <item
        android:id="@+id/action_rides"
        android:icon="@drawable/ic_local_airport_black_24dp"
        android:title="@string/rides"/>
    <item
        android:id="@+id/action_cafes"
        android:icon="@drawable/ic_local_cafe_black_24dp"
        android:title="@string/cafes"/>
    <item
        android:id="@+id/action_hotels"
        android:icon="@drawable/ic_local_hotel_black_24dp"
        android:title="@string/hotels"/>

</menu>

किसी भी सहायता के लिए धन्यवाद।

जवाबों:


310

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@android:color/holo_blue_dark" />
    <item android:color="@android:color/darker_gray"  />
</selector>

और जिस राज्य के साथ प्रयोग किया जाना है BottomNavigationBarवह state_checkedनहीं है state_selected


77
इसे <android.support.design.widget.BottomNavigationView ऐप पर जोड़ें: itemIconTint = "@ drawable / nav_item_color_state" ऐप: itemTextColor = "@ draw / nav_item_color_state" />
dianakarenms

1
मेरे मामले में मुझे डायनेमिक मेनू बनाने की आवश्यकता थी, और यह समाधान काम नहीं कर रहा था। केवल काम कर समाधान मैन्युअल रूप से मेनू आइटम की स्थापना की गई थी stackoverflow.com/a/7106111/2098878
राफेल

9
"State_checked नहीं State_selected"। क्या समय बचाने वाला :) धन्यवाद!
पियोट्र areलेस्रेव

3
इसे <android.support.design.widget.BottomNavigationView ऐप पर जोड़ें: itemIconTint = "@ color / nav_item_color_state" ऐप: itemTextColor = "@ color / nav_item_color_state" /> के बजाय @ drawable
Anton Makov

1
किसी के लिए जो मेरी तरह अटक गया, मुझे "रेस" में "रंग" निर्देशिका बनाना था, और इस फ़ाइल को वहां डाल दिया।
तैयब मजहर

67

1. इनसाइड रेस क्रिएट फोल्डर विथ नेम कलर (जैसे ड्रा करने योग्य)

2. कलर फोल्डर पर राइट क्लिक करें। का चयन करें new-> रंग संसाधन फ़ाइल> color.xml फ़ाइल बनाने (bnv_tab_item_foreground) (चित्रा 1: फ़ाइल संरचना)

3. कॉपी और bnv_tab_item_foreground पेस्ट करें

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            app:itemBackground="@color/appcolor"//diffrent color
            app:itemIconTint="@color/bnv_tab_item_foreground" //inside folder 2 diff colors
            app:itemTextColor="@color/bnv_tab_item_foreground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/navigation" />

bnv_tab_item_foreground:

 <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:color="@color/white" />
        <item android:color="@android:color/darker_gray"  />
    </selector>

चित्र 1: फ़ाइल संरचना:

चित्र 1: फ़ाइल संरचना


53

BottomNavigationViewचयनित टैब के लिए लागू थीम से colorPrimary का उपयोग करता है और यह निष्क्रिय टैब आइकन टिंट के लिए उपयोग करता है android:textColorSecondary

तो आप पसंदीदा प्राथमिक रंग के साथ एक शैली बना सकते हैं और इसे अपने विषय के रूप में सेट कर सकते हैं BottomNavigationView में एक्सएमएल लेआउट फ़ाइल में ।

style.xml :

 <style name="BottomNavigationTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/active_tab_color</item>
        <item name="android:textColorSecondary">@color/inactive_tab_color</item>
 </style>

your_layout.xml :

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            android:theme="@style/BottomNavigationTheme"
            app:menu="@menu/navigation" />

3
android:textColorSecondaryकाम नहीं करता। android:colorForegroundइसके बजाय का उपयोग करना चाहिए
Mahdi Moqadasi

यह सबसे अच्छा जवाब है, "चयनकर्ता" विधि निष्क्रिय टैब रंग के रूप में "darker_gray" का उपयोग करती है जो मूल रूप से भिन्न होती है। android:textColorSecondaryमेरे लिए भी काम करता है। धन्यवाद!
सैम चेन

9

यदि आप आइकन और ग्रंथों के रंगों को प्रोग्रामेटिक रूप से बदलना चाहते हैं:

ColorStateList iconsColorStates = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{
                    Color.parseColor("#123456"),
                    Color.parseColor("#654321")
            });

    ColorStateList textColorStates = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{
                    Color.parseColor("#123456"),
                    Color.parseColor("#654321")
            });

    navigation.setItemIconTintList(iconsColorStates);
    navigation.setItemTextColor(textColorStates);

5

उत्तर देने में बहुत देर हो चुकी है लेकिन किसी के लिए मददगार हो सकता है। मैं एक बहुत ही मूर्खतापूर्ण गलती कर रहा था, मैं bottom_color_nav.xml नामक चयनकर्ता फ़ाइल का उपयोग कर रहा था चयन और अचयनित रंग परिवर्तन के लिए लेकिन फिर भी यह नीचे दिए गए किसी भी रंग परिवर्तन को प्रतिबिंबित नहीं कर रहा था।

तब मुझे एहसास हुआ, मैं onNavigationItemSelected पद्धति में गलत लौट रहा था । यदि आप इस विधि में सही लौटेंगे तो यह ठीक काम करेगा।


2

चयनकर्ता आइटम विशेषताओं के android:state_enabledबजाय उपयोग करने का प्रयास करें android:state_selected


जैसा कि प्रश्न में उल्लेख किया गया है, मैंने State_enabled को भी आज़माया है, लेकिन इस विशिष्ट विजेट के साथ उपयोग की जाने वाली सही स्थिति विशेषता नहीं है। समस्या यह थी कि उत्तर में क्या उल्लेख किया गया था: 1. आदेश गलत था (चयनकर्ता में डिफ़ॉल्ट राज्य अंतिम आइटम होना चाहिए) 2. state_checked निचला राज्य विशेषता है जिसका उपयोग नीचे की ओर से किया गया है।
जावद सादिक़ज़ादेह

1

TextColor सेट करने के लिए, BottomNavigationViewदो शैली गुण हैं जिन्हें आप सीधे xml से सेट कर सकते हैं:

  • itemTextAppearanceActive
  • itemTextAppearanceInactive
In your layout.xml file:

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bnvMainNavigation"
            style="@style/NavigationView"/>

In your styles.xml file:

<style name="NavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
  <item name="itemTextAppearanceActive">@style/ActiveText</item>
  <item name="itemTextAppearanceInactive">@style/InactiveText</item>
</style>
<style name="ActiveText">
  <item name="android:textColor">@color/colorPrimary</item>
</style>
<style name="InactiveText">
  <item name="android:textColor">@color/colorBaseBlack</item>
</style>

1

मैं एक का उपयोग कर रहा हूँ com.google.android.material.bottomnavigation.BottomNavigationView(ओपी के समान नहीं है) और मैंने ऊपर सुझाए गए समाधानों की एक किस्म की कोशिश की, लेकिन केवल एक चीज जो काम कर रही थी वह सेटिंग थी app:itemBackgroundऔर app:itemIconTintमेरे चयनकर्ता रंग ने मेरे लिए काम किया।

        <com.google.android.material.bottomnavigation.BottomNavigationView
            style="@style/BottomNavigationView"
            android:foreground="?attr/selectableItemBackground"
            android:theme="@style/BottomNavigationView"
            app:itemBackground="@color/tab_color"
            app:itemIconTint="@color/tab_color"
            app:itemTextColor="@color/bottom_navigation_text_color"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/bottom_navigation" />

मेरा color/tab_color.xmlउपयोग करता हैandroid:state_checked

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/grassSelected" android:state_checked="true" />
    <item android:color="@color/grassBackground" />
</selector>

और मैं भी एक चयनित राज्य रंग का उपयोग कर रहा हूं color/bottom_navigation_text_color.xml

यहां छवि विवरण दर्ज करें

यहां पूरी तरह से प्रासंगिक नहीं है, लेकिन पूरी पारदर्शिता के लिए, मेरी BottomNavigationViewशैली इस प्रकार है:

    <style name="BottomNavigationView" parent="Widget.Design.BottomNavigationView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/bottom_navigation_height</item>
        <item name="android:layout_gravity">bottom</item>
        <item name="android:textSize">@dimen/bottom_navigation_text_size</item>
    </style>


0

चयनकर्ता बनाने के बजाय, शैली बनाने का सर्वोत्तम तरीका।

<style name="AppTheme.BottomBar">
    <item name="colorPrimary">@color/colorAccent</item> 
</style>

और चयनित या गैर चयनित पाठ का आकार बदलने के लिए।

<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>

Android का आनंद लें!

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