Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 292
tesoner Avatar asked Sep 13 '19 20:09

tesoner


2 Answers

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')

like image 163
Gabriele Mariotti Avatar answered Nov 20 '22 06:11

Gabriele Mariotti


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()
like image 1
Hossein Kurd Avatar answered Nov 20 '22 05:11

Hossein Kurd