Android NavigationView vith rounded corners

Question

I am designing a custom Drawer on Android, it must have rounded corners in top and bottom, I am first customizing top side and I find the problem that the background of the shape is not transparent.

I have:

_{(source: toile-libre.org)}

I need to build:

_{(source: toile-libre.org)}

I would also like some help on how to round it on the bottom

nav_header_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_weight="4"
            android:layout_height="wrap_content"
            android:contentDescription="@string/nav_header_desc"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            app:srcCompat="@mipmap/ic_launcher_round" />
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="5"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="@dimen/nav_header_vertical_spacing"
                android:text="@string/nav_header_title"
                android:textColor="@color/colorWhite"
android:textAppearance="@style/TextAppearance.AppCompat.Headline" />
            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorWhite"
                android:text="@string/nav_header_subtitle" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

side_nav_bar.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:width="3dp"
    android:color="@color/colorPrimary"
    />
<corners android:radius="1dp"
    android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp"
    android:topLeftRadius="30dp" android:topRightRadius="0dp"/>
</shape>

Gabriele Mariotti · Accepted Answer · 2019-10-06T08:42:38.127

If you are using the NavigationView in the Material Components library, you can apply a custom ShapeAppearanceModel to the corner of the your NavigationView.

Something like:

float radius = getResources().getDimension(R.dimen.roundcorner);
NavigationView navigationView = findViewById(R.id.nav_view);
MaterialShapeDrawable navViewBackground = (MaterialShapeDrawable) navigationView.getBackground();
    navViewBackground.setShapeAppearanceModel(
        navViewBackground.getShapeAppearanceModel()
            .toBuilder()
            .setTopRightCorner(CornerFamily.ROUNDED,radius)
            .setBottomRightCorner(CornerFamily.ROUNDED,radius)
            .build());

In this way the NavigationView has rounded corners.
Now you have to pay attention to the header layout to build a rounded corner on the top. You have to use as background for the header view, something like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/side_nav_bar" 
    ...>

where the side_nav_bar is

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
     ....
     <corners android:topRightRadius="32dp" />
</shape>

Don't use a rounded corner on the bottom, because it is only the view used on the header of the NavigationView.

The ShapeAppearanceModel requires the version 1.1.0 of material components (currently 'com.google.android.material:material:1.1.0-alpha10')

score 2 · Answer 2 · edited Jul 22 '22 at 15:46

2

You can just add this line into NavigationView:

app:drawerLayoutCornerSize="xdp"

edited Jul 22 '22 at 15:46

Elletlar

3,136
7
32
38

answered Jul 19 '22 at 13:56

Kiparisov

21
4

score 1 · Answer 3 · answered Sep 10 '20 at 14:30

In Kotlin Language create a class to make extensions:

fun MaterialNavigationView.changeCornerRadius() {
    val navViewBackground : MaterialShapeDrawable = background as MaterialShapeDrawable
    val radius = resources.getDimension(R.dimen.menu_radius)
    navViewBackground.shapeAppearanceModel = navViewBackground.shapeAppearanceModel
        .toBuilder()
        .setTopLeftCorner(CornerFamily.ROUNDED, radius)
        .setBottomLeftCorner(CornerFamily.ROUNDED, radius)
        .build()
}

Usage:

val materialNavigationView: MaterialNavigationView = findViewById(R.id.material_navigation_view)
materialNavigationView.changeCornerRadius()

score 0 · Answer 4 · answered Sep 13 '19 at 20:13

0

Add bottom left radious

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:width="3dp"
    android:color="@color/colorPrimary"
    />
<corners android:radius="1dp"
    android:bottomRightRadius="0dp" android:bottomLeftRadius="30dp"
    android:topLeftRadius="30dp" android:topRightRadius="0dp"/>
</shape>

answered Sep 13 '19 at 20:13

Emad Seliem

608
1
4
5

It can't work in this way because it is the background of the headerView, not of the entire navigationView. – Gabriele Mariotti Sep 13 '19 at 21:28

score 0 · Answer 5 · answered Feb 19 '21 at 08:23

If you don't want to use MaterialShapeDrawable, the following method. It's also the best way I think.

First, Adjust the Opacity of the background of the Navigation View. Second, Round the layout inside the Navigation View.

❖ However, be careful with the background of the top and bottom views.

layout_gnb.xml

<com.google.android.material.navigation.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/NAVIGATION_VIEW"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00000000">

    <LinearLayout
        android:id="@+id/LINEAR_LAYOUT_03"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/rounded_right_corner_light_white_rectangle">
    ...
    </LinearLayout>

</com.google.android.material.navigation.NavigationView>

rounded_right_corner_light_white_rectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:topRightRadius="30dp" 
             android:bottomRightRadius="30dp" />
    <solid android:color="@color/colorLightWhite" />
</shape>

Android NavigationView vith rounded corners

5 Answers5

Linked