问题
I want to have a rounded corner for the items in navigation drawer like this :
it's an example of material design in material.io website
is it possible ?
回答1:
Just use the app:itemShapeAppearanceOverlay
attribute:
<com.google.android.material.navigation.NavigationView
app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Nav"
...>
with:
<style name="ShapeAppearanceOverlay.Nav" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
回答2:
First, I recommend you move to Flutter, it is more intuitive and you got the best integration flow of Material guidelines.
Now, for add round corners, color, font and padding to a checked item with XML and Android Studio, you have the 'app' attributes on NavigationView:
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
...>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
...
app:itemIconTint="@color/custom_color_config"
app:itemTextColor="@color/custom_color_config"
app:itemBackground="@drawable/custom_drawable_resource"
app:itemTextAppearance="@style/custom_style"/>
With itemIconTint and itemTextColor you set the color config of the hole item (icon and text) when is checked or non-checked. First, do res > new > directory, and name directory as 'color'. Then, create the color resource file in color directory with new > color resource file > custom_color_config (name) and put this:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="your_checked_item_color"
android:state_checked="true" />
<item
android:color="your_non_checked_item_color"/>
</selector>
The item with the state_checked=true attribute will apply his color to the current navigation checked item.
To add the background rounded box, create in drawable directory a new drawable resource file to set at itemBackground later. So, new > drawable resource file > custom_drawable_resource (name) and put this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="9dp"
android:right="9dp"
android:top="2dp"
android:bottom="2dp">
<shape>
<solid android:color="@color/new_color_resource_name"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
And next, create again a second color resource file in color directory to associate with the solid color attribute in file custom_drawable_resource (new_color_resource_name) and there put this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="your_background_checked_item_color"
android:state_checked="true" />
<item
android:color="your_background_non_checked_item_color"/>
</selector>
And VOILA! just add to text appearance a custom style with some semi bold font.
PD: Sorry if I've a bad english, I usually read more than I write, regards from MX.
回答3:
This is done with navigationview and menuItem and create a shape file for the round border and a selected_state file was created with the selected_checked when it is active and when it is deactivated.
来源:https://stackoverflow.com/questions/53054505/navigation-drawer-rounded-corner-background-for-items