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.
Related
I can't seem to find a solution on how to add even more space between each item of my navigation drawer. Here is the image of what it looks like now.
.
I want to my items in my navigation drawer to have even more space in between. I tried android:paddingTop and android:layout_marginTop in my NavigationView of my activity.xml but it doesn't seem to work. How can I add more space between Items?
To help here is my code for my activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
tools:context=".Location.Location"
android:id="#+id/drawer_layout"
tools:openDrawer="start"
>
<com.google.android.material.navigation.NavigationView
android:id="#+id/drawerNavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_drawer_header"
app:menu="#menu/navigation_drawer_menu"
android:fitsSystemWindows="true"
app:insetForeground="#android:color/transparent">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
It might help, here is my Menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/homeNavigationDrawer"
android:title="Home"
android:icon="#drawable/icon_home_nav_drawer"
/>
<item
android:id="#+id/profileNavigationDrawer"
android:title="Profile"
android:icon="#drawable/icon_profile_nav_drawer"
/>
<item
android:id="#+id/topicsNavigationDrawer"
android:title="Topics"
android:icon="#drawable/icon_latest_news_black"
/>
<item
android:id="#+id/settingsNavigationDrawer"
android:title="Settings"
android:icon="#drawable/icon_settings"
/>
</group>
</menu>
For more space between each item You can apply following Theme in your styles.xml for Navigation Drawer
style name="NavigationTheme" parent="AppTheme">
<item name="android:textSize">16sp</item>
<item name="android:layout_marginBottom">8dp</item>
</style>
Apply this theme in Navigation Drawer
android:theme="#style/NavigationTheme"
I made a navigation drawer following a youtube video.
Here is my activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#color/menuColor"
app:headerLayout="#layout/header"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:paddingStart="20px"
app:menu="#menu/drawermenu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
And here is custom drawermenu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/title"
android:title="Title"
android:layout_gravity="center"/>
<item
android:id="#+id/first"
android:title="First item" />
<item
android:id="#+id/second"
android:title="Second Item"
android:layout_gravity="center"/>
How can I add custom fonts and font sizes for the items like - Making the "Title" with a size of 26sp and other items with a size of 18sp. How can I also make them centered and also add padding to it?
I tried doing that from the design interface but it doesn't have any of those options. Using android:layout_gravity="center" that did not work for me either.
Try to having the
android:actionMenuTextAppearance
item under your action bar style, move it under your app theme.
Add this to strings.xml from values folder. Here for size their are different terms like and and to change font face you can use face inside font tag.
<resources>
<string name="history"><big><font face="serif" color="#303030">History</font></big></string>
<string name="favourites"><big><font color="#303030">Favourites</font></big></string>
</resource>
And change below one where you add menuitems.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/history"
android:title="#string/history" />
<item android:id="#+id/favourites"
android:title="#string/favourites"/>
</menu>
I need your help please help me.
I have a navigation drawer in my app. i want to move navigation drawer to right completely . I moved the navigation itself but i want to move menu items to right too.
My Screenshot of Navigation Drawer
Activity_main:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginleft="100dip"
android:fitsSystemWindows="true"
tools:openDrawer="end">
<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="end"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
My items of menu in xml :
Activity_Main_Drawer:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_home_black_24dp"
android:title="#string/nav_home" />
<item
android:id="#+id/nav_photos"
android:icon="#drawable/ic_photo_library_black_24dp"
android:title="#string/nav_photos" />
<item
android:id="#+id/nav_movies"
android:icon="#drawable/ic_local_movies_black_24dp"
android:title="#string/nav_movies" />
<item
android:id="#+id/nav_notifications"
android:icon="#drawable/ic_notifications_black_24dp"
android:title="#string/nav_notifications" />
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black_24dp"
android:title="#string/nav_settings" />
</group>
<item android:title="Other">
<menu>
<item
android:id="#+id/nav_about_us"
android:title="#string/nav_about_us" />
<item
android:id="#+id/nav_privacy_policy"
android:title="#string/privacy_policy" />
</menu>
</item>
</menu>
first: You can put your device in RTL mode, go to develop settings (Force RTL layout direction).
After doing this all the layouts will mirror correctly.
If you don't want to change the whole device into RTL use this code in onCreate method of mainactivity before super and before you inflate the content view
window.decorView.layoutDirection = View.LAYOUT_DIRECTION_RTL
You need to use a custom layout for NavigationView.
According to this: http://www.kamilslesinski.com/home/navigation-drawer-customising-navigationview-items you can override the layout by copying original file and customizing it, or you can add a reference to your custom layout, like that:
how to customize snackBar's layout?
in refs.xml.
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"
/>
My question is related to recently released Navigation View from Design Support Library.
I want to position Log In at the bottom of the Navigation View, how I can do this?
My menu XML right now, look 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/navigation_sub_item_1"
android:icon="#drawable/ic_action_event"
android:title="#string/home" />
<item
android:id="#+id/navigation_sub_item_2"
android:icon="#drawable/ic_action_person"
android:title="#string/profile" />
<item
android:id="#+id/navigation_sub_item_3"
android:icon="#drawable/ic_action_labels"
android:title="#string/tags" />
<item
android:id="#+id/navigation_sub_item_4"
android:icon="#drawable/ic_action_settings"
android:title="#string/log_in" />
</group>
</menu>
Here is my layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/white_1000">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/main_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer_menu" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
Do you want your "Log In" item to be fixed at the bottom of the Navigation View?
You can do that by nesting additional views/layouts within NavigationView. NavigationView extends FrameLayout, so you can wrap it around child views.
I posted more information on NavigationView footers here. Also see the other answers in that post for more layout options.
Edit
FYI: If you use the "fixed footer" approach, you are basically removing the footer item (e.g. "Log In" in your example) from the menu. That means you have to implement click and other handlers yourself.
I think navigation menu works like a listview. So Items will be placed in a list.
If you want one item to be placed at the bottom, you can customise within the NavigationView Tag in layout xml