I have searched all things and experimented but not luck with NavigationView.
itemIconTint, itemTextColor and itemBackground working with ripple effect. but problem is state selected not working in selector drawable
I have also created drawable-v21 and put ripple_navigation_selector.xml
My goal is when open drawer again previous selected item should be in
yellow color eg. Notifications item
NavigationView inside main_layout.xml
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#color/black"
app:headerLayout="#layout/header"
app:itemIconTint="#drawable/navigation_view_icon_tint_selector"
app:itemTextColor="#drawable/navigation_view_text_selector"
app:menu="#menu/drawer"
app1:itemBackground="#drawable/ripple_navigation_selector"
/>
ripple_navigation_selector.xml inside drawable-v21
<item
android:id="#android:id/mask"
android:drawable="#drawable/navigation_selector"/>
<item android:drawable="#drawable/navigation_selector"/>
navigation_selector.xml inside drawable-v21
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#color/left_light_yellow" android:state_pressed="true"></item>
<item android:drawable="#color/left_light_yellow" android:state_activated="true"></item>
<item android:drawable="#color/left_light_yellow" android:state_checked="true"></item>
<item android:drawable="#android:color/black"></item>
color string named left_light_yellow
<color name="left_light_yellow">#F6CE20</color>
I think you have to make your menu items checkable
<item
android:id="#+id/wishlist"
android:checkable="true"
android:title="Wishlist" />
Why do you have app1?
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#color/black"
app:headerLayout="#layout/header"
app:itemIconTint="#drawable/navigation_view_icon_tint_selector"
app:itemTextColor="#drawable/navigation_view_text_selector"
app:menu="#menu/drawer"
app1:itemBackground="#drawable/ripple_navigation_selector"
/>
I think that if you remove the "1" it should work:
...
app:itemBackground="#drawable/ripple_navigation_selector"
/>
Related
I am looking for a way to customize the Highlight color of items in navigation drawer like in picture above in "Inbox" item.
i want to change heights and edges of highlight press color ..
How can i do that ?
many thanks in advance.
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>
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">
I have a problem with obtaining on-click effect visible at my drawer.
I have activity xml layout as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<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/nav_header_main"
app:menu="#menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
As you can see I put NavigationView into my DrawerLayout and then populate NavigationView using menu xml file.
My activity_main_drawer.xml looks as follows:
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
>
<group>
<item
android:id="#+id/id1"
android:title="Item 1"/>
<item
android:id="#+id/id2"
android:title="Item 2"/>
<item
android:id="#+id/id3"
android:title="Item 3"/>
<item
android:id="#+id/id4"
android:title="Item 4"/>
</group>
Unfortunately, when I do it that way I don't have any visual effect after clicking on item in that drawer menu. What I would like is to have so called "ripple effect". How can I do it?
I have also faced this problem
Please Remove this attributes:
clickable=true
focusableOnTouch=true
then apply ripple effect XML
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#android:color/transparent"
tools:targetApi="lollipop"> <!-- ripple color -->
<item android:drawable="#android:color/transparent" /> <!-- normal color -->
I Hope it will help you
You can use set the attribute itemBackground with ?android:attr/selectableItemBackground to get the ripple effect for your NavigationView items
<android.support.design.widget.NavigationView
/* ... other attributes... */
app:itemBackground="?android:attr/selectableItemBackground"/>
Ripple Effect can be added in following way.
Add itemBackground into NavigationView inside your xml file the following attribute:
app:itemBackground="#drawable/ripple_navigation_selector"
Also, inside the drawable-v21 folder, add ripple_navigation_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/ripplecolor" >
<item android:drawable="#color/accentColor" />
<item
android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
If you are using appcompat you can add this to the XML for your navigation drawer item android:background="?attr/selectableItemBackground".
The above solution is taken from this answer.
Hope this helps you.
It might be due to slow performance, try adding a 200-300ms delay before doing anything at onClick.
public void itemClicked(MenuItem item) {
Handler theHandler = new Handler();
theHandler.postDelayed(new Runnable() {
#Override
public void run() {
//whatever you wish to do
}
}, 200);
}
Don't worry this much delay wont be visible to the user, but will show the ripple effect smoothly.
I want to put a selector for the color of a text in my navigation view for itemTextColor :
navigation_view :
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="225dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/bleu"
android:fitsSystemWindows="true"
app:itemTextColor=""
app:itemBackground="#drawable/item_background"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
My selector :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/bleu" />
<item android:state_focused="true" android:drawable="#color/bleu" />
<item android:state_checked="true" android:drawable="#color/bleu" />
</selector>
But I can't choose a file in res/drawable. Where put my selector? I've seen on internet in res/color/my_selector.xml but it's not working because it says me selector not allowed in an xml in res/color. And if I put my selector in res/colors.xml, I don't know how to select it from the colors.xml file.
Please tell me how to do?
You can reference the selector directly from your app:itemBackground attribute on your NavigationView
app:itemBackground="#drawable/my_selector"
This should work just fine
I have seen this questions at many places but everywhere they have used a custom listview inside the navigation menu.
My code for navigationview is 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/nav_header_insta_drawer"
app:menu="#menu/activity_insta_drawer_drawer" />
where my #menu/activity_insta_drawer_drawer is like this :
<?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_applnform"
android:icon="#drawable/application_form"
android:title="Application Form"
android:checkable="true"
/>
<item
android:id="#+id/nav_penddocs"
android:icon="#drawable/pending_doc"
android:title="Pending Documents"
/>
<item
android:id="#+id/nav_viewdocs"
android:icon="#drawable/view_doc"
android:title="View Documents" />
<item
android:id="#+id/nav_payfee"
android:icon="#drawable/pay_free"
android:title="Pay Fee" />
<item
android:id="#+id/nav_refereedetail"
android:icon="#drawable/refree_detail"
android:title="Referee Details" />
<item
android:id="#+id/nav_informcorner"
android:icon="#drawable/information"
android:title="Information Corner" />
<item
android:id="#+id/nav_changepass"
android:icon="#drawable/change_pass"
android:title="Change Password" />
<item
android:id="#+id/nav_postquery"
android:icon="#drawable/ic_menu_send"
android:title="Post Query" />
</group>
</menu>
code for navigationview :
navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
How to i change the selected item of the menu?
Finally after trying out everything i got the answer
You must change the colorAccent in the colors file to which ever color you want :
<color name="colorAccent">whichever color required</color>
This solution worked for me
Try to change your NavigationView like below with adding app:itemTextColor="#drawable/nav_draw_selector" to change navigation menu 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"
android:fitsSystemWindows="true"
app:itemTextColor="#drawable/nav_draw_selector"
app:headerLayout="#layout/nav_header_insta_drawer"
app:menu="#menu/activity_insta_drawer_drawer" />
nav_header_insta_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#4281ca" android:state_checked="true" /> <!-- This is the default text color -->
<item android:color="#DEDEDE" />
</selector>
Given a NavigationView with a section with sub menu items like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Sub items">
<menu>
<item android:title="Sub item 1" />
<item android:title="Sub item 2" />
</menu>
</item>
</menu>
Question: How do I change the background color of the Sub items row?
In my experiments, it looks like the color used for the sub menu header row/item is the same as the background color of the NavigationView (android:backgroundTint and android:background) but I have not found a way to specify the two separately. I need the background color to be one color and the sub menu header row/item another color.
itemBackground, itemIconTint and itemTextColor are simple xml-attributes that can be set, though you have to use a custom prefix instead of the android: one.
Example
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Other layout views -->
<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:itemBackground="#drawable/my_ripple"
app:itemIconTint="#2196f3"
app:itemTextColor="#009688"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
Example
Create a new *.xml file in /res/color - let's name it state_list.xml - with the following content:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is used when the Navigation Item is checked -->
<item android:color="#009688" android:state_checked="true" />
<!-- This is the default text color -->
<item android:color="#E91E63" />
</selector>
and the simply reference it like this: app:itemTextColor="#color/state_list"
The same goes for itemIconTint. itemBackground expects a resource id.
use compile 'com.android.support:appcompat-v7:23.1.1'
<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/nav_header_main_navigation"
app:itemBackground="#drawable/nav_view_item_background"
app:itemTextColor="#color/nav_item_text_color"
app:menu="#menu/activity_main_navigation_drawer" />
uses to the following XML file for item backgroud: nav_view_item_background.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" android:state_checked="true" />
<item android:drawable="#android:color/transparent" />
uses to the following XML file for Text Color: nav_item_text_color
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_checked="true" />
<item android:color="#android:color/black" />