Rounded Modal Bottom Sheet is not clipped to the rounded shape

Question

The problem is modal bottom sheet is getting rounded with grey color but with white background of rectangular corner as I couldn't manage to clip or trim the rectangular white edges

This is Shape file..

<?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/darker_gray" />

    <corners android:topLeftRadius="50dp" android:topRightRadius="50dp" />
    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
    <stroke android:color="@color/purple_200" />

</shape>

This is Bottom Sheet Layout

<?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:id="@+id/bottom_sheet_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_sheet_background"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="15dp">


    <LinearLayout
        android:id="@+id/edit_image_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:id="@+id/edit_image_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Edit Your Image"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/edit_sound_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:id="@+id/edit_sound_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Edit Your Sound"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/delete_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:id="@+id/delete_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Delete Your Image"
            android:textSize="20sp" />

    </LinearLayout>

</LinearLayout>

and this is a simple Bottom Shee tDialaog Fragment

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;

import com.google.android.material.bottomsheet.BottomSheetDialogFragment;

public class BottomSheet extends BottomSheetDialogFragment {

    LinearLayout layout;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.modal_bottom_sheet, container, false);
        view.findViewById(R.id.bottom_sheet_layout).setOutlineProvider(ViewOutlineProvider.BACKGROUND);
        view.findViewById(R.id.bottom_sheet_layout).setClipToOutline(true);

        return view;
    }
    
}

So, finally I need your support to have only rounded shape and get rid of rectangular shape behinde rounded shape. thanx in advance....