Navigation drawer rounded corner background for items

Question

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

Answer 1

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.

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

Answer 3

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>