CODEWITHSUNDEEP
androidandroid-constraintlayoutbottom-sheet
Prasoon Abhishek
Prasoon Abhishek

Reputation: 147

android bottom sheet with curved top edges

I have a bottomsheet that has constraint layout as root.How to curve the top edges? Tried this code but it's not working.

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_sheet_bg"
        android:paddingTop="@dimen/dimen_20dp"
        android:paddingBottom="@dimen/dimen_20dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

bottom_sheet_bg is

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:topLeftRadius="@dimen/dimen_20dp"
        android:topRightRadius="@dimen/dimen_20dp"/>
    <solid android:color="@color/white" />
</shape>

Upvotes: 4

Views: 1062

Answers (2)

Ussaid Iqbal
Ussaid Iqbal

Reputation: 796

Okay so the way I achieved it is simply through the drawables.

rounded_dialog.xml

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

inside res/values/styles.xml

 <style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/AppModalStyle</item>
    </style>
    <style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/rounded_dialog</item>
    </style>

and inside the java/kotlin

final BottomSheetDialog dialog = new BottomSheetDialog(getActivity(), R.style.AppBottomSheetDialogTheme));

Upvotes: 0

Cheticamp
Cheticamp

Reputation: 62841

Something to keep in mind is that view structures that an application programmer creates are usually placed into some type of view group enclosure by Android. Let's take a simple app and color the background of the main activity a blue and color the background with the curved top red. This is to better show what is going on.

Here is an image from the layout inspector of Android Studio:

enter image description here

As you can see, the curved top of the background drawable is there but the corners have a white background which is the background of the FrameLayout design_bottom_sheet. This is also true in your app but the background colors of your background and of the FrameLayout are both white, so it appears that the rounded corners are just not there. They are present but are masked by the white of the background of the FrameLayout.

To solve this you can search for the design_bottom_sheet and explicitly change its background to transparent, but it may be better to approach this issue through styles.

In your styles file create the following:

<style name="BottomSheetDialogStyle" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/BottomSheetModalStyle</item>
</style>

<style name="BottomSheetModalStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@drawable/bottom_sheet_bg</item>
</style>

(Your styles may differ, but the concept will still apply.)

In the BottomSheetDialogFragment add the following:

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setStyle(DialogFragment.STYLE_NO_FRAME, R.style.BottomSheetDialogStyle);
}

or just add the setStyle() line if you already have onCreate() defined. This code will prevent the design_bottom_sheet from drawing a background.

This will show the following:

enter image description here

and in the Layout Inspector:

enter image description here

Change the colors to what you need but keep in mind that the color that shows at the corners will now be whatever color shows under the FrameLayout.

Upvotes: 2

Related Questions