Bottom Sheet with Material Design 3

 Bottom Sheets

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.

The Bottom Sheet is seen in many of the applications such as Google Drive, Google Maps ,

Google Photo and most of the applications used the Bottom Sheet to display the data inside the application.

In this post, we will take a look at implementing a Bottom Sheet in the Android app using Kotlin in Android Studio. 

Steps

👉Create a New Project .

👉activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
        <androidx.constraintlayout.widget.ConstraintLayout 

        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"

        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="match_parent"

        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/BottomSheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="@string/show_bottom_sheet"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

👉To create a layout named bottom_sheet_dialog 

Right Click res > New > XML > Layout XML File

            bottom_sheet_dialog.xml        

    <?xml version="1.0" encoding="utf-8"?>

    <androidx.appcompat.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="2dp">

            <!--image view for displaying course image-->
            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/Course"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="10dp"
                android:src="@drawable/android" />


            <!--text view for displaying course name-->
            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/idTVCourseName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_toEndOf="@id/Course"
                android:layout_toRightOf="@id/Course"
                android:text="Android App Development"
                android:textColor="@color/black"
                android:textSize="18sp"
                android:textStyle="bold" />

            <!--text view for displaying course tracks-->
            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/CourseId"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/idTVCourseName"
                android:layout_marginTop="10dp"
                android:layout_toEndOf="@id/Course"
                android:layout_toRightOf="@id/Course"
                android:text="Course Id : 01"
                android:textColor="@color/black"
                android:textSize="15sp" />

            <!--text view for displaying course duration-->
            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/idTVCourseDuration"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/CourseId"
                android:layout_marginTop="10dp"
                android:layout_toEndOf="@id/Course"
                android:layout_toRightOf="@id/Course"
                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/Course"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="10dp"
                android:text="Dismiss dialog"
                android:textAllCaps="false" />

        </RelativeLayout>

    </com.google.android.material.card.MaterialCardView>

    </androidx.appcompat.widget.LinearLayoutCompat>

👉MainActivity.kt           

package com.example.androidappcodingblog

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import com.google.android.material.bottomsheet.BottomSheetDialog
import com.google.android.material.button.MaterialButton

class BottomSheet : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val bs=findViewById<MaterialButton>(R.id.BottomSheet)
        bs.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.setCancelable(false)

            dialog.setContentView(view)

            dialog.show()
        }
    }
}

Output

Thanks for reading!😊😊😊😊😊😊

If you enjoyed reading , Show some Love by

 clapping 👏 on this post!