नेविगेशन ड्रावर में चेक किए गए मेनू आइटम का रंग बदलें


103

मैं अपने आवेदन में एक नेविगेशन दराज को लागू करने के लिए नए एंड्रॉइड डिज़ाइन समर्थन पुस्तकालय का उपयोग कर रहा हूं।

मैं यह नहीं जान सकता कि किसी चयनित वस्तु का रंग कैसे बदला जाए!

यहाँ मेनू का xml है:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/navigation_item_1"
        android:icon="@drawable/ic_1"
        android:title="@string/navigation_item_1"/>

    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_2"
        android:title="@string/navigation_item_2"/>
</group>

और यहाँ नेविगेशनव्यू xml है जो एक के अंदर रखा गया है android.support.v4.widget.DrawerLayout:

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/black"
    app:itemTextColor="@color/primary_text"
    app:menu="@menu/menu_drawer">

    <TextView
        android:id="@+id/main_activity_version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:textColor="@color/primary_text" />

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

आपके सहयोग के लिए धन्यवाद !

[संपादित करें] मैंने पहले ही इस तरह के समाधानों पर ध्यान दिया है: एंड्रॉइड मेनू का पृष्ठभूमि रंग बदलें

यह काफी हैक लगता है और मुझे लगा कि नई डिज़ाइन सपोर्ट लाइब्रेरी के साथ, कुछ क्लीनर पेश किया गया होगा?


जवाबों:


244

वैसे आप कलर स्टेट रिसोर्स का उपयोग करके इसे प्राप्त कर सकते हैं । यदि आप अपने अंदर नोटिस NavigationViewकर रहे हैं तो आप उपयोग कर रहे हैं

app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"

यहाँ का उपयोग करने के बजाय @color/blackया @color/primary_test, का उपयोग करें Color State List Resource। उसके लिए, पहले निर्देशिका के xmlअंदर एक नया (जैसे drawer_item.xml) बनाएं color(जो कि resनिर्देशिका के अंदर होना चाहिए ।) यदि आपके पास पहले से कोई निर्देशिका नहीं है, तो एक colorबनाएं।

अब अंदर drawer_item.xmlही कुछ ऐसा करें

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="checked state color" android:state_checked="true" />
    <item android:color="your default color" />
</selector>

अंतिम चरण अपने को बदलना होगा NavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/drawer_item"  // notice here
    app:itemTextColor="@color/drawer_item" // and here
    app:itemBackground="@android:color/transparent"// and here for setting the background color to tranparent
    app:menu="@menu/menu_drawer">

इस तरह आप के लिए अलग रंग राज्य सूची संसाधन का उपयोग कर सकते IconTint, ItemTextColor, ItemBackground

अब जब आप एक आइटम को जाँच के रूप में ( xmlया प्रोग्राम में) सेट करते हैं, तो विशेष आइटम पर अनियंत्रित लोगों की तुलना में अलग रंग होगा।


याद रखें कि काम करने के लिए दबाए जाने के लिए आपको इसे एंड्रॉइड से बदलने की आवश्यकता है: State_checked to android: state_pressed।
प्रोग्रामस्टा

32
आइटमबैकग्राउंड के लिए आपको रंग के बजाय एक ड्रॉबल का उपयोग करने की आवश्यकता है क्योंकि आप रंग संसाधन का उपयोग करके पृष्ठभूमि को परिभाषित नहीं कर सकते हैं।
sirFunkenstine

@ यदि हम चुनिंदा नेविगेशन आइटम पर आइकन छवि बदलना चाहते हैं तो हम यह कैसे करेंगे?
मोहित

@sirFunkenstine यदि आप रंग चयनकर्ता का उपयोग कर रहे हैं तो आप इसे अपने res फ़ोल्डर में रंग फ़ोल्डर में रख सकते हैं।
किशन वाघेला

@KishanVaghela क्या आप जो सुझाव देते हैं वह इस त्रुटि को उत्पन्न करता है: बाइनरी एक्सएमएल फ़ाइल लाइन # 3: <आइटम> टैग को एक
ड्रॉबल

66

मेरा मानना app:itemBackgroundहै कि एक drawable की उम्मीद है। तो नीचे दिए गए चरणों का पालन करें:

highlight_color.xmlनिम्नलिखित सामग्रियों से एक ड्रा करने योग्य फ़ाइल बनाएं :

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="YOUR HIGHLIGHT COLOR"/>
</shape>

nav_item_drawable.xmlनिम्नलिखित सामग्रियों के साथ एक और ड्रा करने योग्य फ़ाइल बनाएं :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/highlight_color" android:state_checked="true"/>
</selector>

अंत app:itemBackgroundमें NavView में टैग जोड़ें :

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"
app:itemBackground="@drawable/nav_item_drawable"
app:menu="@menu/menu_drawer">

यहाँ highlight_color.xml फ़ाइल पृष्ठभूमि के लिए एक ठोस रंग को परिभाषित करता है। बाद में यह रंग drawable nav_item_drawable.xml चयनकर्ता को सौंपा गया है।

इसने मेरे लिए काम किया। उम्मीद है कि इससे मदद मिलेगी।

********************************************** UPDATED *** *******************************************

हालांकि उपर्युक्त उत्तर आपको कुछ गुणों पर ठीक नियंत्रण देता है, लेकिन मैं जिस तरह का वर्णन करने वाला हूं वह अधिक ठोस लगता है और थोड़ा शांत होता है

तो आप क्या कर सकते हैं, आप इस तरह से नेविगेशन व्यू के styles.xmlलिए एक ThemeOverlay परिभाषित कर सकते हैं :

    <style name="ThemeOverlay.AppCompat.navTheme">

        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/color_of_your_choice</item> 

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/color_of_your_choice</item> 

    </style>

अब इस ThemeOverlay को app:themeनेविगेशन दृश्य की विशेषता पर लागू करें , जैसे:

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:theme="@style/ThemeOverlay.AppCompat.navTheme"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer">

मुझे उम्मीद है कि इससे सहायता मिलेगी।


1
इसके अलावा, इस विधि का उपयोग android:background="@drawable/nav_item_drawable"अन्य विजेट जैसे रेडियोबटन, चेकबॉक्स, बटन आदि के लिए भी किया जा सकता है , जो setOnCheckedChangeListenerकेवल रंग को उजागर करने के लिए ब्लोटवेयर प्रोग्रामिंग को कम करता है ।
रूपिंदरजीत

@ यह काम करता है, लेकिन टेक्स्ट और आइकन गायब हो जाते हैं, मैंने आइटम टिंट का रंग भी सेट कर दिया है, लेकिन यह काम नहीं कर रहा है। क्या आप मुझे यह सुझाव दे सकते हैं कि यह कैसे किया जा सकता है
उपयोगकर्ता

1
@ मुझे पता नहीं है कि आपके कोड में क्या गलत है, लेकिन मैंने जवाब में जोड़ दिया है। कम प्रयास के साथ एक ही चीज को प्राप्त करने का एक पूरी तरह से अलग तरीका। आप इसे देख सकते हैं।
अंकुश

1
इसे उत्तर के रूप में स्वीकार किया जाना चाहिए! बहुत बहुत धन्यवाद, बहुत मददगार !!!
स्वेतलाना रोझकोवा

4

NavigateItemजब भी आइटम NavigateViewपर क्लिक किया जाता है, तो उसे सही पर सेट करने की आवश्यकता होती है

//listen for navigation events
NavigationView navigationView = (NavigationView)findViewById(R.id.navigation);
navigationView.setNavigationItemSelectedListener(this);
// select the correct nav menu item
navigationView.getMenu().findItem(mNavItemId).setChecked(true);

NavigationItemSelectedListenerपर जोड़ेंNavigationView

  @Override
  public boolean onNavigationItemSelected(final MenuItem menuItem) {
    // update highlighted item in the navigation menu
    menuItem.setChecked(true);
    mNavItemId = menuItem.getItemId();

    // allow some time after closing the drawer before performing real navigation
    // so the user can see what is happening
    mDrawerLayout.closeDrawer(GravityCompat.START);
    mDrawerActionHandler.postDelayed(new Runnable() {
      @Override
      public void run() {
        navigate(menuItem.getItemId());
      }
    }, DRAWER_CLOSE_DELAY_MS);
    return true;
  }

आपकी मदद के लिए धन्यवाद विकास, लेकिन मैं पहले से ही ऐसा कर रहा हूं ( setChecked(true))। मैं चेक किए गए आइटम के रंग को देख सकता हूं, लेकिन मैं इसे खुद को संशोधित नहीं कर सकता, रंग हमेशा नेविगेटरव्यू पृष्ठभूमि का हल्का संस्करण होता है।
ग्रेग

@Greg डिफ़ॉल्ट रूप से आपके द्वारा उपयोग किए जाने वाले थीम के बैकग्राउंड कलर setChecked(true)को Viewबदल देता है। यदि आप आइटम की पृष्ठभूमि को किसी अन्य रंग में बदलते हैं, तो आपको अपने लेआउट को DrawerLayoutया NavigationViewअपने आप को संभालने की आवश्यकता है।
विकलप पटेल

धन्यवाद फिर से, मैंने वह करने की कोशिश की है जो आपने मुझे बताया था, लेकिन सफलता के बिना, क्या आपके पास एक लिंक होगा जो यह बताएगा कि कृपया कैसे करें?
ग्रेग

2

इसे प्राप्त करने का दूसरा तरीका यहां दिया गया है:

public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();

    item.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            item.setEnabled(true);
            item.setTitle(Html.fromHtml("<font color='#ff3824'>Settings</font>"));
            return false;
            }
        });


    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

}


मेरा डोबट इस बात से संबंधित था कि क्या मैं पॉपअप मेनू के चयनित आइटम का रंग बदलना चाहता हूं, लेकिन आपको धन्यवाद कि मुझे चयनित मेनू आइटम का रंग बदलने के लिए आपके इस समाधान से एक बढ़िया विचार मिला ... इसलिए आपको वोट दे रहा हूं !!! और आस-पास का काम पसंद है :: item.setTitle (Html.fromHtml ("<font color = '# ff3824'> Settings </ font>");
टैरिट रे

1

यहां बताया गया है कि आप इसे अपनी गतिविधि के ऑनक्रिट विधि में कैसे कर सकते हैं:

NavigationView navigationView = findViewById(R.id.nav_view);
ColorStateList csl = new ColorStateList(
    new int[][] {
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_checked}  // checked
    },
    new int[] {
        Color.BLACK,
        Color.RED
    }
);
navigationView.setItemTextColor(csl);
navigationView.setItemIconTintList(csl);

1

चरण 1: एक जाँच / अनियंत्रित चयनकर्ता बनाएँ:

selector.xml

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

चरण 2: पाठ रंग का चयन करने के लिए विजेट के app:itemTextColorभीतर xml विशेषता का उपयोग करें NavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/navigation_header_layout"
    app:itemTextColor="@drawable/selector"
    app:menu="@menu/navigation_menu" />

चरण 3:
किसी कारण से जब आप NavigationViewमेनू से कोई आइटम हिट करते हैं , तो वह इसे बटन जांच नहीं मानता है। तो आपको मैन्युअल रूप से चयनित आइटम को जांचने और पहले से चयनित आइटम को साफ़ करने की आवश्यकता है। ऐसा करने के लिए नीचे श्रोता का उपयोग करें

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {

    int id = item.getItemId();

    // remove all colors of the items to the `unchecked` state of the selector
    removeColor(mNavigationView);

    // check the selected item to change its color set by the `checked` state of the selector
    item.setChecked(true);

    switch (item.getItemId()) {
      case R.id.dashboard:
          ...
    }

    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
}

private void removeColor(NavigationView view) {
    for (int i = 0; i < view.getMenu().size(); i++) {
        MenuItem item = view.getMenu().getItem(i);
        item.setChecked(false);
    }
}

चरण 4:
आइकन रंग बदलने के लिए, मेनू आइटम app:iconTintमें विशेषता का उपयोग करें NavigationView, और उसी चयनकर्ता पर सेट करें।

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/nav_account"
        android:checked="true"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="My Account"
        app:iconTint="@drawable/selector" />
    <item
        android:id="@+id/nav_settings"
        android:icon="@drawable/ic_settings_black_24dp"
        android:title="Settings"
        app:iconTint="@drawable/selector" />

    <item
        android:id="@+id/nav_logout"
        android:icon="@drawable/logout"
        android:title="Log Out"
        app:iconTint="@drawable/selector" />
</menu>

परिणाम:

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