How To Remove NavigationView Item Background
This seems like it should be trivial with the itemBackground
attribute, but for some reason, it isn't working.
As shown below, I can successfully add my own background (in blue), but the original ripple (grey rectangle) is still visible.
Setting itemBackground
to null
doesn't seem to do the trick either.
My navigation view:
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
style="@style/Widget.MaterialComponents.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:itemBackground="@drawable/nav_item_background"
app:menu="@menu/main_drawer" />
(Basically untouched style wise from the generated view)
My ripple:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/accent_ripple">
<item
android:id="@android:id/mask"
android:right="8dp">
<shape android:shape="rectangle">
<corners
android:bottomRightRadius="50dp"
android:topRightRadius="50dp" />
<solid android:color="#fff" />
</shape>
</item>
</ripple>
My app theme also extends Theme.MaterialComponents
, so I'm out of ideas.
Answer
If you want a custom shape in your Item Background don't use the app:itemBackground
attribute.
Use the app:itemShapeAppearanceOverlay
and the app:itemShapeFillColor
attributes:
<com.google.android.material.navigation.NavigationView
app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Item"
app:itemShapeFillColor="@color/nav_item_shape_fill"
android:theme="@style/ThemeOverlay.NavigationView"
../>
where:
<style name="ShapeAppearanceOverlay.Item" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeBottomRight">16dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerSizeTopLeft">0dp</item>
</style>
and the color selector is something like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_activated="true"/>
<item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_checked="true"/>
<item android:color="@android:color/transparent"/>
</selector>
Currently there isn't a method to remove the ripple outside the shape in the item.
However you can use the android:theme
to override the color used by the ripple.
<style name="ThemeOverlay.NavItem.Ripple" parent="">
<item name="android:colorControlHighlight">@android:color/transparent</item>
</style>
Check this issue for updates.
Related Questions
- → should I choose reactjs+f7 or f7+vue.js?
- → Phonegap Android write to sd card
- → Local reference jquery script in nanohttpd (Android)
- → Click to navigate on mobile devices
- → How to allow api access to android or ios app only(laravel)?
- → Access the Camera and CameraRoll on Android using React Native?
- → React native change listening port
- → What is the default unit of style in React Native?
- → Google play market autocomplete icon
- → Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
- → Using Laravel with Genymotion
- → react native using like web-based ajax function
- → react native pdf View