I wonder if anyone is having problems when redefining the background of the items on a NavigationView with app:itemBackground"? I get the behavior shown on the screenshot, no matter what item I press the last item shows the ripple instead.
Here is my drawer_menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single" android:id="#+id/first_group">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_home"
android:title="#string/nav_home" />
</group>
<group android:id="#+id/second_group">
<item
android:id="#+id/nav_settings"
android:title="#string/nav_settings" />
<item
android:id="#+id/nav_about"
android:title="#string/nav_about" />
<item
android:id="#+id/nav_logout"
android:title="#string/nav_logout" />
</group>
</menu>
My my_ripple.xml:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffff0000">
<item
android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
My NavigationView:
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/drawer_header"
app:itemBackground="#drawable/my_ripple"
app:itemIconTint="#color/drawer_item"
app:itemTextColor="#color/drawer_item"
app:menu="#menu/drawer_menu" />
Possible workaround for now - Just for people looking and just in case....
Adding addOnGlobalLayoutListener in onCreate for the navigation view and applying the Drawable on each menu item.
/**
* Contains the {#link MenuItem} views in the {#link NavigationView}
*/
private final ArrayList<View> mMenuItems = new ArrayList<>(5);
// Grab the NavigationView Menu
final Menu navMenu = mNavigationView.getMenu();
mNavigationView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// Remember to remove the installed OnGlobalLayoutListener
mNavigationView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
// Loop through and find each MenuItem View
for (int i = 0, length = 5; i < length; i++) {
final MenuItem item = navMenu.getItem(i);
mNavigationView.findViewsWithText(mMenuItems, item.getTitle(), View.FIND_VIEWS_WITH_TEXT);
}
// Loop through each MenuItem View and apply your custom Typeface
for (final View menuItem : mMenuItems) {
//Create RippleDrawable called myRipple
((TextView) menuItem).setBackground(myRipple);
}
}
});
Ripple drawables should be defined like this sample:
<!-- A red ripple masked against an opaque rectangle. -->
<ripple android:color="#ffff0000">
<item android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
read more
https://developer.android.com/reference/android/graphics/drawable/RippleDrawable.html
Apply the itemBackground attribute to the menu rather than the NavigationView. The ripple will then stay contained to the menu item handling the touch event.
Related
I want to change my navigation drawer list item's background colour to be changed when i click on it.
Also it should change the text and icon colour of that item as well.
Thanks in advance..
This is quite simple and is similar to changing the background of any view that you use. You can simply create a method and write all the change code into it. Pass the view as a parameter in the method.
Whenever you click on any of the navigation drawer items, pass your view on the method.
For instance, check this method
private boolean viewSelected(View view) {
ViewHolder currentViewHolder = (ViewHolder) view.getTag();
KTextView yourtextView = currentViewHolder.yourtextView;
view.setBackgroundColor(ResourceUtil.getInstance().getColor(R.color.colorSideMenuSelectedBackground));
currentViewHolder.viewSelector.setVisibility(View.VISIBLE);
yourtextView.setTypeface(yourtextView.getContext(), ResourceUtil.getInstance().getString(R.string.yourFontName));
if (lastSelectedView == null) {
lastSelectedView = view;
return true;
}
if (lastSelectedView != view) {
ViewHolder oldViewHolder = (ViewHolder) lastSelectedView.getTag();
oldViewHolder.viewSelector.setVisibility(View.GONE);
lastSelectedView.setBackgroundColor(ResourceUtil.getInstance().getColor(android.R.color.white));
KTextView newTextView = oldViewHolder.yourtextView;
newTextView.setTypeface(yourtextView.getContext(), ResourceUtil.getInstance().getString(R.string.yourfontname));
lastSelectedView = view;
return true;
}
return false;
}
This method will simply change the background, font and color of the views.
Hope this helps!
This can be done using https://developer.android.com/guide/topics/resources/color-list-resource.
Create two drawable files :
1.drawer_background
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="checked_background_color" android:state_checked="true" />
<item android:color="default_background_color" />
</selector>
2.drawer_text_background
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="checked_text_color" android:state_checked="true" />
<item android:color="default_text_color" />
</selector>
And add these two properties to your NavigationView ie
app:itemIconTint="#drawable/drawer_background"
app:itemTextColor="#color/drawer_text_background"
one more if some color is overlapping with some other color
app:itemBackground="#android:color/transparent"
Now, All you have to do is to set an item as checked on Click listener of that item to change background and text color. You can do it programmatically.
I solved it setting this attribute to my NavigationView app:itemBackground="#drawable/drawer_selector"
and my drawer_selector is as below
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/white" />
<item android:state_focused="true" android:drawable="#color/white" />
<item android:state_activated="true" android:drawable="#color/white" />
<item android:drawable="#color/orange" />
I want to change the color of the text of an item that groups a menu.
The xml file:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_mi_cuenta"
android:icon="#mipmap/ic_mi_cuenta"
android:title="#string/mi_cuenta" />
</group>
<item android:title="#string/herramientas">
<menu>
<item
android:id="#+id/nav_configuracion"
android:icon="#mipmap/ic_config"
android:title="#string/configuraci_n" />
</menu>
</item>
</menu>
I wnat to change text color of:
<item android:title="#string/herramientas">
As you can see, Herramientas comes out in black and as the background is also black it barely looks. I can not find any property to change it. The color of the item 'Mis datos' and 'Configuración' change it programmatically as follows from an external json file of a server:
colorElegido = getParseColor(json.getString("colorMenuLateral"));
navigationView.setBackgroundColor(colorElegido);
colorElegido = getParseColor(json.getString("colorFuenteMenuLateral"));
ColorStateList colorList = getColorList(colorElegido);
navigationView.setItemTextColor(colorList);
The following code will workout,
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_mi_cuenta"
android:icon="#mipmap/ic_mi_cuenta"
android:title="#string/mi_cuenta" />
</group>
<item
android:id="#+id/herramientas"
android:title="#string/herramientas">
<menu>
<item
android:id="#+id/nav_configuracion"
android:icon="#mipmap/ic_config"
android:title="#string/configuraci_n" />
</menu>
</item>
</menu>
Add this in your styles,
<style name="TextAppearance44">
<item name="android:textColor">#FF0000</item>
<item name="android:textSize">20sp</item>
</style>
<style name="NavigationDrawerStyle">
<item name="android:textSize">16sp</item><!-- text size in menu-->
<item name="android:textColor">#880ACE0A</item>
<item name="itemTextColor">#880ACE0A</item>
</style>
And in your activity,
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
Menu menu = navigationView.getMenu();
MenuItem tools= menu.findItem(R.id.herramientas);
SpannableString s = new SpannableString(tools.getTitle());
s.setSpan(new TextAppearanceSpan(this, R.style.TextAppearance44), 0, s.length(), 0);
tools.setTitle(s);
navigationView.setNavigationItemSelectedListener(this);
Change according to you,
And other text color change you can use like in your xml file,
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
style="#style/NavigationDrawerStyle"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
to make a custom popup make an ImageView in toolbar
private ImageView setting;
public void menuOptions() {
PopupMenu popup = new PopupMenu(MainActivity.this, setting);
// Inflating the Popup using xml file
popup.getMenuInflater()
.inflate(R.menu.menu_main, popup.getMenu());
//registering popup with OnMenuItemClickListener
popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.button1:
return (true);
case R.id.button2:
// block contacts
return (true);
}
return true;
}
});
popup.show(); //showing popup menu
}
on Button click call above function
menuOptions();
in the layout you inflate menu_main.xml, make your desired view.
I have this menu structure for my navigation view:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_clients"
android:icon="#drawable/ic_group"
android:title="#string/nav_clients"/>
<item
android:id="#+id/nav_products"
android:icon="#drawable/ic_box"
android:title="#string/nav_products" />
<item
android:id="#+id/nav_orders"
android:icon="#drawable/ic_buy"
android:title="#string/nav_orders" />
</group>
<item android:title="#string/nav_title_app">
<menu>
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black"
android:title="#string/nav_settings" />
<item
android:id="#+id/nav_sync"
android:icon="#drawable/ic_sync_black"
android:title="#string/nav_sync" />
</menu>
</item>
I have succeeded to change the menu items text size, but only the item which contains a menu didn't changed the size?
Any ideas?
I haven't found any official way of doing so, neither by style, but you can achieve it programmatically, take a look below.
private void setMenuHeadTitleSize(int itemId) {
Menu menu = mNavigationView.getMenu();
MenuItem menuItem = menu.findItem(itemId);
MenuItem subMenuItem = menuItem.getSubMenu().getItem();
String title = String.valueOf(subMenuItem.getTitle());
SpannableString mNewTitle = new SpannableString(title);
mNewTitle.setSpan(new RelativeSizeSpan(1.1f), 0, title.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
subMenuItem.setTitle(mNewTitle);
}
Also give an Id to your SubMenu item
<item android:id="#+id/nav_top"
android:title="#string/nav_title_app">
<menu>
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black"
android:title="#string/nav_settings" />
<item
android:id="#+id/nav_sync"
android:icon="#drawable/ic_sync_black"
android:title="#string/nav_sync" />
</menu>
</item>
and finally, once NavigationView is inflated, and the menu attached, call the function above
setMenuHeadTitleSize(R.id.nav_top);
I am using the new Android Design Support library to implement a navigation drawer in my application.
I can't figure out how to change the color of a selected item!
Here is the xml of the menu :
<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>
And here is the navigationview xml which is placed inside a 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>
Thank you for your help !
[EDIT]
I have already looked at solutions such as this one : Change background color of android menu.
It seems to be quite a hack and I thought that with the new Design Support Library, something cleaner would have been introduced?
Well you can achieve this using Color State Resource. If you notice inside your NavigationView you're using
app:itemIconTint="#color/black"
app:itemTextColor="#color/primary_text"
Here instead of using #color/black or #color/primary_test, use a Color State List Resource. For that, first create a new xml (e.g drawer_item.xml) inside color directory (which should be inside res directory.) If you don't have a directory named color already, create one.
Now inside drawer_item.xml do something like this
<?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>
Final step would be to change your 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">
Like this you can use separate Color State List Resources for IconTint, ItemTextColor, ItemBackground.
Now when you set an item as checked (either in xml or programmatically), the particular item will have different color than the unchecked ones.
I believe app:itemBackground expects a drawable. So follow the steps below :
Make a drawable file highlight_color.xml with following contents :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="YOUR HIGHLIGHT COLOR"/>
</shape>
Make another drawable file nav_item_drawable.xml with following contents:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/highlight_color" android:state_checked="true"/>
</selector>
Finally add app:itemBackground tag in the 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">
here the highlight_color.xml file defines a solid color drawable for the background. Later this color drawable is assigned to nav_item_drawable.xml selector.
This worked for me. Hopefully this will help.
********************************************** UPDATED **********************************************
Though the above mentioned answer gives you fine control over some properties, but the way I am about to describe feels more SOLID and is a bit COOLER.
So what you can do is, you can define a ThemeOverlay in the styles.xml for the NavigationView like this :
<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>
now apply this ThemeOverlay to app:theme attribute of NavigationView, like this:
<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">
I hope this will help.
One need to set NavigateItem checked true whenever item in NavigateView is clicked
//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);
Add NavigationItemSelectedListener on 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;
}
Step 1: Build a checked/unchecked selector:
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>
Step 2: use the XML attribute app:itemTextColor within NavigationView widget for selecting the text color.
<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" />
Step 3 & 4:
Step 3: To make menu icons check-able: wrap all items in a <group> and setandroid:checkableBehavior="single"
Step 4: To change icon color: set the selector to all the items with app:iconTint
<?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">
<group android:checkableBehavior="single">
<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" />
</group>
</menu>
Step 5:: make sure that onNavigationItemSelected() callback returns true to consume selection event
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
drawerLayout.closeDrawer(GravityCompat.START);
return true;
}
});
Result:
Side Note:
If setting android:checkableBehavior="single" not working, then you handle this programmatically by manually making the selected item checked and clear the previously selected item:
#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);
}
}
Here is the another way to achive this:
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);
}
}
Here's how you can do it in your Activity's onCreate method:
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);
if you want to keep the fillet of selected item in material 3, use app:itemShapeFillColor="#color/main_navigation_view" instead of app:itemBackground="#color/main_navigation_view"
I used Android Studio to implement the Navigation Drawer and I can't get the blue colour that is used to show which section we're currently in to change.
I've tried numerous things, I'm currently using a listSelector which looks like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:drawable="#color/selected" />
<item android:state_pressed="true" android:drawable="#color/highlight" />
</selector>
I've also tried state_checked. state_pressed works in this situation but the currently selected item is still blue.
EDIT:
I've been examining this more and when the adapter is created the context that is passed is getActionBar().getThemedContext() so I'm thinking if I can find the right attribute to assign to my actionbar style I can change it from there. I've tried a few different attributes with no luck. Does anyone know the exact attribute?
I've also realised if I put
<item name="android:activatedBackgroundIndicator">#drawable/nav_listview_selector</item>
in the main part of my theme and change getActionBar().getThemedContext() for getActivity.getBaseContext then I can change the color but I don't think this is the correct way. I think the themed context should be used. So if anyone knows where the activatedBackgroundIndicator could be put so that it would be used in getActionBar.getThemedContext()
EDIT2:
So the text view used for the listview is one within the SDK it looks like this:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:paddingStart="?android:attr/listPreferredItemPaddingStart"
android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
android:background="?android:attr/activatedBackgroundIndicator"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
/>
So I tried modifying the "?android:attr/activatedBackgroundIndicator" at the theme level but it has no effect for checked/selected/activated but it does for pressed. Does anyone know why this is? And how I can change it?
To solve this problem:
1- You don't need android:listSelector under your ListView.
2- Open (or Create) styles.xml under (res/values).
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:activatedBackgroundIndicator">#drawable/drawer_list_selector</item>
</style>
3- Under res/drawable folder create drawer_list_selector.xml file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/light_gray_color" />
<item android:state_activated="true" android:drawable="#drawable/red_color" />
<item android:drawable="#android:color/transparent" />
</selector>
4- Under res/drawable create red_color.xml / light_gray_color.xml (or any other name) and add your desired Hex color:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#C8FF0000"/>
</shape>
5- Open your project AndroidManifest.xml and add android:theme tag (if not exist)
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
Reference / Credit: Changing Navigation Drawer Selected Item Color from default blue
To change the "Navigation Drawer item background colour for selected item" you could do it with the attribut:
colorControlHighlight
In your "styles.xml" it could look like this:
<style name="YourStyleNameFor.NavigationDrawer" parent="ThemeOverlay.AppCompat.Light">
<item name="colorControlHighlight">#color/your_highlight_color</item>
</style>
Don't forget to apply your Style in the tag:
android.support.design.widget.NavigationView
For example in your activity_main.xml it could look like this:
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/navigationdrawer_header"
<!-- the following line referes to your style -->
app:theme="#style/YourThemeNameFor.NavigationDrawer"
<!-- the following two lines are maybe also interesting for you -->
app:itemIconTint="#color/gray3"
app:itemTextColor="#color/gray3"
app:menu="#menu/navigationdrawer_main" />
This is working for me:
First define a drawable item_bg.xml as:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/nav_menu_bg" />
</selector>
Then use this drawable in navigation_main_layout.xml as:
<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:itemBackground="#drawable/item_bg"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_navigation"
app:menu="#menu/navigation_main_layout_drawer" />
here is how i have done and it is working, the brief concept is maintain the position of selected item in adapter and call notifyDataSetChanged on calling notifyDatasetChanged the getView method is called again and in get view check the position on the selected position change the background view. Here is the code :
Adapter of NavigationDrawer List View
public class MenuAdapter extends BaseAdapter {
private static final int TYPE_HEADER = 0;
private static final int TYPE_ITEM = 1;
private Context mContext;
private String name;
private int profile;
private int mIcons[];
private int selectedPosition = 0;
private String mNavTitles[];
private LayoutInflater mInflater;
public MenuAdapter(String titles[], int icon[], String Name, int profile) {
mNavTitles = titles;
mIcons = icon;
name = Name;
this.profile = profile;
}
public MenuAdapter(String Titles[], int Icons[], Context mContext) {
mNavTitles = Titles;
mIcons = Icons;
this.mContext = mContext;
mInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return mNavTitles.length;
}
#Override
public Object getItem(int position) {
return position;
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = mInflater.inflate(R.layout.item_row, parent, false);
TextView textView = (TextView) convertView.findViewById(R.id.rowText);
ImageView imageView = (ImageView) convertView.findViewById(R.id.rowIcon);
final LinearLayout layout = (LinearLayout) convertView.findViewById(R.id.outerLayout);
imageView.setImageResource(mIcons[position]);
textView.setText(mNavTitles[position]);
if (position == selectedPosition)
layout.setBackgroundColor(mContext.getResources().getColor(R.color.app_bg));
else
layout.setBackgroundColor(mContext.getResources().getColor(R.color.normal_bg));
return convertView;
}
public void setSelectedPosition(int position) {
this.selectedPosition = position;
}
}
in your activity do this
private class DrawerItemClickListener implements ListView.OnItemClickListener {
#Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
mMenuAdapter.setSelectedPosition(position - 1);
mMenuAdapter.notifyDataSetChanged();
}
}
if anyone still face any difficulty, feel free to ask.
I have implement drawer menu with custom adapter class. May be it will help someone Drawer List
<ListView
android:id="#+id/listview_drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/menu_item_color"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:fadingEdge="none"
/>
drawer_list_item.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/menu_selector"
>
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:src="#drawable/ic_menu_home" />
<TextView
android:id="#+id/lblName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/imgIcon"
android:minHeight="48dp"
android:textColor="#color/menu_txt_color" />
menu_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<!-- selected -->
<item android:drawable="#color/menu_item_active_color" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#color/menu_item_active_color" android:state_pressed="true"/>
<item android:drawable="#color/menu_item_active_color" android:state_activated="true"/>
<item android:drawable="#color/menu_item_active_color" android:state_checked="true"/>
<item android:drawable="#color/menu_item_active_color" android:state_selected="true"/>
<item android:drawable="#color/menu_item_color" android:state_activated="false"/>
Add this on item click listner of listview
yourlistview.setItemChecked(position, true);
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/list_item_back_pressed" android:state_pressed="true" />
<item android:state_activated="true"><color android:color="#color/primary_blue"/></item>
<item android:drawable="#color/list_item_back_normal"/>
</selector>
In addition to providing a custom selector drawable for the listSelector, you should also set the background resource of the list item to a similar selector drawable that has different drawables for the different states.
I usually use my custom adapter that has an int selection field, and a setSelection(int) function. And in the getView function I set the background of the view according to position == selection.
Still not sure why it is that it doesn't work. But the way I found around it is to use my own simple_list_item_activated layout to be passed to the ArrayAdapter which was basically the same except for setting the text colour to white. I then replaced getActionBar().getThemedContext() with getActivity().getBaseContext() and it now has an effect.
This may not be the correct way and may have repercussions in the future, but for now I have it working the way I want it to.
I know its too late but I have solved this issue in my app.
Pls dont think it is silly, just simply change the position of "state_pressed" to top.
<item android:drawable="#drawable/list_item_bg_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/list_item_bg_normal" android:state_activated="false"/>
<item android:drawable="#drawable/list_item_bg_selected" android:state_activated="true"/>
In Future if anyone comes here using, Navigation Drawer Activity (provided by Studio in Activity Prompt window)
The answer is -
Use this before OnCreate() in MainActivity
int[][] state = new int[][] {
new int[] {android.R.attr.state_checked}, // checked
new int[] {-android.R.attr.state_checked}
};
int[] color = new int[] {
Color.rgb(255,46,84),
(Color.BLACK)
};
ColorStateList csl = new ColorStateList(state, color);
int[][] state2 = new int[][] {
new int[] {android.R.attr.state_checked}, // checked
new int[] {-android.R.attr.state_checked}
};
int[] color2 = new int[] {
Color.rgb(255,46,84),
(Color.GRAY)
};
ColorStateList csl2 = new ColorStateList(state2, color2);
and use this in onNavigationItemSelected() in MainActivity (you dont need to Write this function if you use Navigation Drawer activity, it will be added in MainActivity).
NavigationView nav = (NavigationView) findViewById(R.id.nav_view);
nav.setItemTextColor(csl);
nav.setItemIconTintList(csl2);
nav.setItemBackgroundResource(R.color.white);
Tip - add this code before If else Condition in onNavigationItemSelected()
This worked for me :
implemented menu drawer not by populating the navigation view with list, but with menu items.
created a drawable like this :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/drawer_menu_selector_color" android:state_checked="true"></item>
<item android:drawable="#color/drawer_menu_selector_color" android:state_activated="true"></item>
and in onCreate method , set the id of the menu item which corresponds to selected activity as checked.
and implement the drawable selector file to your navigation drawer like this
app:itemBackground="#drawable/drawer_menu_selector"
fyi : need to define your 'app' namespace.
I searched for solution on this issue, tried everything, and only this solution worked for me.
You can find it on this link https://tuchangwei.github.io/2016/07/18/The-solution-that-the-menu-item-of-Navigation-View-can-t-change-its-background-When-it-is-selected-checked/
All the credit to https://tuchangwei.github.io/