Bottom Sheet Dialog Fragment in Android Android 07.12.2019

Android material design introduces two types of BottomSheet: Modal Bottom Sheets and Persistent Bottom Sheets.

  • Modal bottom sheets using BottomSheetDialogFragment – are alternative to inline dialogs on mobile and provide room for descriptions, and iconography. Which open from the bottom on user interaction. If you want to share somethings, option will pop up from bottom something like that.
  • Persistent bottom sheet using BottomSheetBehavior and CoordinatorLayout – provides a collapsed surface that can be expanded by user interaction (dragging, click on some button) access a key feature. In simple words, you say, Persistent Bottom Sheet can slide up and down any time.

In your build.gradle file, add the following:

dependencies {
    implementation 'com.google.android.material:material:1.2.0-alpha02'
}

You can find last version here.

First, create a layout file for the bottom sheet. Go to res/layout folder and create file named is bottom_sheet.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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="8dp">

    <TextView
            android:id="@+id/tv1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_marginTop="8dp"
            android:drawableLeft="@android:drawable/ic_menu_call"
            android:drawableStart="@android:drawable/ic_menu_call"
            android:text="Text 1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/tv2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:drawableLeft="@android:drawable/ic_menu_add"
            android:drawableStart="@android:drawable/ic_menu_add"
            android:text="Text 2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv1"/>

</androidx.constraintlayout.widget.ConstraintLayout>    

Create BottomSheetDialogFragment.

class MyBottomSheet : BottomSheetDialogFragment() {
    companion object {
        fun newInstance(): MyBottomSheet =
            MyBottomSheet().apply {
                /*
                arguments = Bundle().apply {
                    putInt("VALUE", someValue)
                }
                 */
            }
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.bottom_sheet, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        tv2.setOnClickListener { dismiss() }
    }
}

Create 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">
    <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:padding="8dp"
            android:text="Show BottomSheet"
            android:textColor="#fff"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Show bottom sheet dialog fragment.

val fragment = MyBottomSheet.newInstance()
fragment.show(supportFragmentManager, "my_bs")