Skip to content
Advertisement

Android NavigationView vith rounded corners

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:
screenshot
(source: toile-libre.org)

I need to build:
design
(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>

Advertisement

Answer

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.

enter image description here

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

Advertisement