Android material design introduces two types of BottomSheet: Modal Bottom Sheets and Persistent Bottom Sheets.
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.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")