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>
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.
The ShapeAppearanceModel
requires the version 1.1.0 of material components (currently 'com.google.android.material:material:1.1.0-alpha10'
)