问题
I want to add a ripple effect with rounded corners rectangle with a selector for navigation view item. But it keeps adding the gray rectangle ripple effect.
navigation view
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:itemIconTint="@color/drawer_item"
app:itemTextColor="@color/drawer_item"
app:itemBackground="@drawable/drawer_item_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="@menu/bottom_app_bar_menu"/>
drawer_item_bg.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/drawer_selected_item_bg"/>
<item android:state_checked="false" android:drawable="@android:color/transparent"/>
<item android:state_pressed="true" android:drawable="@drawable/custom_ripple_navitem"/>
<item android:state_selected="true" android:drawable="@drawable/custom_ripple_navitem"/>
<item android:state_focused="true" android:drawable="@drawable/custom_ripple_navitem"/>
custom_ripple_navitem.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#360074FF">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="8dp"/>
</shape>
</item>
The result is
回答1:
"Solution"
I started experimenting with ripple effect when I found this question, and after some time I finished with this code.
Note: It is not real ripple effect, just a fake one. Let me know if you'll make an improved version of it.
@layout/your_layout.xml
<android.support.design.widget.NavigationView
...
android:theme="@style/Widget_NavigationItem_NoRipple"
app:itemBackground="@drawable/drawer_item_background"/>
@values/styles.xml
<style name="Widget_NavigationItem_NoRipple">
<item name="android:colorControlHighlight">@android:color/transparent</item>
</style>
@drawable/drawer_item_background.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/drawer_item_shape" android:state_checked="true"/>
<item android:drawable="@drawable/drawer_item_ripple" android:state_pressed="true"/>
<item android:drawable="@android:color/transparent" android:state_pressed="false"/>
</selector>
@drawable/drawer_item_shape
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="8dp"/>
<solid android:color="@color/selectedItemBackgroundColor"/>
</shape>
</item>
</layer-list>
@drawable/drawer_item_ripple
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@android:color/transparent">
<item>
<shape android:shape="rectangle">
<corners android:radius="8dp"/>
<solid android:color="?attr/colorControlHighlight"/>
</shape>
</item>
</ripple>
回答2:
With the Material Components you can use something like:
<com.google.android.material.navigation.NavigationView
app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.NavItem.Rounded"
app:itemShapeFillColor="@color/selector_navitem"
android:theme="@style/ThemeOverlay.NavItem.Ripple"
../>
With the app:itemShapeAppearanceOverlay
attribute you can define a custom shape for the each item:
<style name="ShapeAppearanceOverlay.NavItem.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
With the app:itemShapeFillColor
attribute you can define the color used to fill the shape:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.50" android:color="@color/primaryColor" android:state_pressed="true"/>
<item android:alpha="0.12" android:color="@color/primaryColor" android:state_activated="true"/>
<item android:alpha="0.12" android:color="@color/primaryColor" android:state_checked="true"/>
<item android:color="@android:color/transparent"/>
</selector>
Finally 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>
Note: it requires the version 1.1.0 of the Material Components library.
来源:https://stackoverflow.com/questions/55933739/add-custom-shape-ripple-with-selector-on-navigationview-menu-item