Two ways to implement BottomSheet in Android

There are two ways for Android to implement BottomSheet, one is in the form of Dialog, and the other is to add it to the current layout, both of which can meet different development needs. First look at the renderings:

1. Use the system's BottomSheetDialog effect diagram 2. Use the CoordinatorLayout effect diagram

First, you need to use the design library, and add dependencies in build.gradle:

dependencies {
    ...
    implementation 'com.google.android.material:material:1.0.0'
}

Method 1, first add the layout file to BottomSheetDialog:


override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_bottom1)

    val view = View.inflate(this, R.layout.bottom_sheet_dialog1, null)

    ......

    val dialog = BottomSheetDialog(this)
    dialog.setContentView(view)
    val behavior = BottomSheetBehavior.from(view.parent as View)

}

Open the BottomSheetDialog:

show_dialog.setOnClickListener {
            //显示屏幕的一半
            behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
            //也可以设置固定高度
            //behavior.peekHeight=600
            dialog.show()
}

The parent class of BottomSheetDialog is AppCompatDialog, so we can also set the style property through the constructor of BottomSheetDialog like a normal dialog.

Next is method two:

First, create the activity layout activity_bottom2, the parent layout is CoordinatorLayout

<androidx.coordinatorlayout.widget.CoordinatorLayout 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="match_parent">

  <Button
    android:id="@+id/show_dialog"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    android:text="显示自定义的BottomSheetDialog"
    app:layout_constraintVertical_bias="0.3" />

  <DatePicker
    android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    app:layout_behavior="@string/bottom_sheet_behavior"
    app:behavior_hideable="true"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

The key code is this line:

app:layout_behavior="@string/bottom_sheet_behavior"

The height of DatePicker can be set to match_parent, and it can slide to fill the full screen. If it is set to wrap_content, it cannot slide to the top of the screen, and only the height of the control can be displayed.

Then get the Behavior of the control to perform display and hide operations:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_bottom2)

        val behavior = BottomSheetBehavior.from(timePicker)
        behavior.state = BottomSheetBehavior.STATE_HIDDEN
        show_dialog.setOnClickListener {
            if (behavior.state == BottomSheetBehavior.STATE_HIDDEN) {
                behavior.state = BottomSheetBehavior.STATE_COLLAPSED
            } else {
                behavior.state = BottomSheetBehavior.STATE_HIDDEN
            }
        }
}

The code has been uploaded to github, please give a star if you think it is good: https://github.com/HeJiaomy/BottomSheetDialog

Two ways to implement BottomSheet in Android

Guess you like