I am trying to create custom modal bottom sheet with line on the top, how can I achieve that?

Question

I tried to change the style, but apart from the round corners nothing worked.Here example of bottom sheet https://i.stack.imgur.com/6O92g.jpg . Can anyone helps? Here what I tried and I got shadow line after I opened modal https://i.stack.imgur.com/uoHNA.jpg I am trying to create custom modal bottom sheet with line on the top, how can I achieve that?MainAct

    class MainActivity : AppCompatActivity() {
    lateinit var btnShowBottomSheet: Button
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btnShowBottomSheet = findViewById(R.id.idBtnShowBottomSheet);
        btnShowBottomSheet.setOnClickListener {
            val dialog = BottomSheetDialog(this)
            val view = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null)
            val btnClose = view.findViewById<Button>(R.id.idBtnDismiss)
            btnClose.setOnClickListener {
                dialog.dismiss()
            }
            dialog.setContentView(view)
            dialog.show()
        }
    }
}

Bottom_sheet_xml

    <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/rounded_top_corners"
            >
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="20dp"
                >
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_rectangle"
                    android:layout_centerInParent="true"
                    />
            </RelativeLayout>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                >
                <!--image view for displaying course image-->
                <ImageView
                    android:id="@+id/idIVCourse"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_margin="10dp"
                    android:src="@drawable/ic_launcher_background" />
        
                <!--text view for displaying course name-->
                <TextView
                    android:id="@+id/idTVCourseName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:layout_toEndOf="@id/idIVCourse"
                    android:layout_toRightOf="@id/idIVCourse"
                    android:text="DSA Self Paced Course"
                    android:textColor="@color/black"
                    android:textSize="18sp"
                    android:textStyle="bold" />
                <!--text view for displaying course tracks-->
                <TextView
                    android:id="@+id/idTVCourseTracks"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/idTVCourseName"
                    android:layout_marginTop="10dp"
                    android:layout_toEndOf="@id/idIVCourse"
                    android:layout_toRightOf="@id/idIVCourse"
                    android:text="Course Tracks : 30"
                    android:textColor="@color/black"
                    android:textSize="15sp" />
                <!--text view for displaying course duration-->
                <TextView
                    android:id="@+id/idTVCourseDuration"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/idTVCourseTracks"
                    android:layout_marginTop="10dp"
                    android:layout_toEndOf="@id/idIVCourse"
                    android:layout_toRightOf="@id/idIVCourse"
                    android:text="Course Duration : 4 Months"
                    android:textColor="@color/black"
                    android:textSize="15sp" />
        
                <!--button for dismissing our dialog-->
                <Button
                    android:id="@+id/idBtnDismiss"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/idIVCourse"
                    android:layout_margin="10dp"
                    android:text="Dismiss dialog"
                    android:textAllCaps="false" />
            </RelativeLayout>
        </RelativeLayout>

Answer 1

Based on the xml and code you have posted you have to make the below changes:

1.Change the xml android:background structure to be like below. The drawable which has rounded corners must be set to the 2nd child of RelativeLayout instead of parent and all other RelativeLayouts must have android:background="@android:color/transparent":

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="@android:color/transparent">
        <ImageView
            android:layout_width="80dp"
            android:layout_height="10dp"
            android:background="@color/white"
            android:layout_centerInParent="true" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/rounded_top_corners">
        <!--image view for displaying course image-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_launcher_background" />

        <!--text view for displaying course name-->
        <TextView
            android:id="@+id/idTVCourseName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVCourse"
            android:layout_toRightOf="@id/idIVCourse"
            android:text="DSA Self Paced Course"
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold" />
        <!--text view for displaying course tracks-->
        <TextView
            android:id="@+id/idTVCourseTracks"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVCourseName"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVCourse"
            android:layout_toRightOf="@id/idIVCourse"
            android:text="Course Tracks : 30"
            android:textColor="@color/black"
            android:textSize="15sp" />
        <!--text view for displaying course duration-->
        <TextView
            android:id="@+id/idTVCourseDuration"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVCourseTracks"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVCourse"
            android:layout_toRightOf="@id/idIVCourse"
            android:text="Course Duration : 4 Months"
            android:textColor="@color/black"
            android:textSize="15sp" />

        <!--button for dismissing our dialog-->
        <Button
            android:id="@+id/idBtnDismiss"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idIVCourse"
            android:layout_margin="10dp"
            android:text="Dismiss dialog"
            android:textAllCaps="false" />
    </RelativeLayout>
</RelativeLayout>

where @drawable/rounded_top_corners will be:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <corners android:topLeftRadius="30dp" android:topRightRadius="30dp"
        android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

2.You have to set a custom theme style for BottomSheetDialog with a Transparent window dialog like below:

val dialog = BottomSheetDialog(this, R.style.MyBottomSheetDialog)

where R.style.MyBottomSheetDialog is your custom BottomSheetDialog style defined in styles.xml like below:

<style name="MyBottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="android:colorBackground">@android:color/transparent</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:backgroundDimAmount">0.3</item>
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

After the above changes you will have a Transparent Window BottomSheetDialog with a line on top like: