Navigation Drawer Rounded Corner Background For Items

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 ?

Solution 1:

Just use the app:itemShapeAppearanceOverlay attribute:

<com.google.android.material.navigation.NavigationViewapp:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Nav"...>

with:

<stylename="ShapeAppearanceOverlay.Nav"parent=""><itemname="cornerFamily">rounded</item><itemname="cornerSize">8dp</item></style>

Solution 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"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:color="your_checked_item_color"android:state_checked="true" /><itemandroid: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-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:left="9dp"android:right="9dp"android:top="2dp"android:bottom="2dp"><shape><solidandroid:color="@color/new_color_resource_name"/><cornersandroid: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"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:color="your_background_checked_item_color"android:state_checked="true" /><itemandroid: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.

Solution 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.