问题
I am setting navigation item background using app:itemBackground
in layout:
<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/nav_selector_background"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"/>
Here is nav_selector_background.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorNavItemSelected">
<item android:id="@android:id/mask">
<color android:color="#000"/> <!-- any color will do -->
</item>
<item
android:right="8dp">
<selector>
<item android:state_pressed="true" android:drawable="@drawable/nav_item_background_round"/>
<item android:state_focused="true" android:drawable="@drawable/nav_item_background_round"/>
<item android:state_checked="true" android:drawable="@drawable/nav_item_background_round"/>
<item android:state_activated="true" android:drawable="@drawable/nav_item_background_round"/>
<item android:state_active="true" android:drawable="@drawable/nav_item_background_round" />
<item android:state_hovered="true" android:drawable="@drawable/nav_item_background_round" />
<item android:state_drag_hovered="true" android:drawable="@drawable/nav_item_background_round" />
<item android:drawable="@android:color/transparent"/>
</selector>
</item>
And nav_item_background_round
:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="@color/colorNavItemSelected"/>
<corners android:bottomRightRadius="32dp"
android:topRightRadius="32dp"/>
</shape>
</item>
</layer-list>
Problem is when I press on the item the whole background is highlighted as seen in the screenshot. I only want the red part highlighted.
I uploaded the sample on Github if anybody is interested in compiling and running the app.
回答1:
With the NavigationView in the MaterialComponents libarry you can use:
app:itemShapeAppearanceOverlay
attribute to define a custom shape for the each itemapp:itemShapeFillColor
attribute to define the color used to fill the shape
Something like:
<com.google.android.material.navigation.NavigationView
app:itemShapeFillColor="@color/selector_menu"
app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Nav"
android:theme="@style/ThemeOverlay.NavigationView"
../>
where the 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.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>
and the shape is defined by:
<style name="ShapeAppearanceOverlay.Nav" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">50%</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerSizeTopLeft">0dp</item>
</style>
Also use the android:theme
to override the color used by the ripple.
<style name="ThemeOverlay.NavigationView" parent="">
<item name="android:colorControlHighlight">@android:color/transparent</item>
</style>
回答2:
I'm not sure what you want but I think this will solve your problem.
nav_item_background_round.xml
<?xml version="1.0" encoding="UTF-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#f816a463"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f816a463" />
</shape>
</item>
</ripple>
回答3:
I also had the same issue. I resolved it by
First - Adding a custom style to my navigationView app:theme="@style/NavigationDrawerStyle"
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fadingEdge="none"
android:fitsSystemWindows="true"
android:overScrollMode="never"
app:itemIconPadding="12dp"
app:itemBackground="@drawable/drawer_background_selector"
app:headerLayout="@layout/nav_header_main"
app:itemIconTint="@drawable/drawer_item_icon_color"
app:itemTextColor="@drawable/drawer_item_text_color"
app:theme="@style/NavigationDrawerStyle"
app:menu="@menu/activity_main_drawer" >
Second - Then in my styles.xml created a custom drawer style NavigationDrawerStyle then setting colorControlHighlight to transparent which removed the rectangular shape for me.
<style name="NavigationDrawerStyle" parent="ThemeOverlay.AppCompat.navTheme">
<item name="android:textSize">14sp</item>
<item name="android:fontFamily">@font/robotomedium</item>
<item name="android:colorControlHighlight">@android:color/transparent</item><!--Here Removes Rectangle-->
</style>
来源:https://stackoverflow.com/questions/53574593/changing-navigationview-background-to-round-shape-not-working-when-pressed