android - How to make BottomSheetDialog fullcreen when expanded and make button attached at bottom of it?

Question

Problem

I need to use BottomSheetDialog (com.google.android.material.bottomsheet) for my apps, but it didn't work as i expected, Bottom Sheet Appear cut when it expanded.

My Implementation

inline fun <T : ViewBinding> Context.makeBottomSheetDialog(
        crossinline bindingInflater: (LayoutInflater) -> T,
        isCancelable: Boolean = true,
        isHideable: Boolean = true,
        isFitContent: Boolean = true,
        peekHeight: Int? = null,
        onDismissListener: DialogInterface.OnDismissListener? = null,
): Pair<T, BottomSheetDialog> {
    val layout = bindingInflater.invoke(LayoutInflater.from(this@makeBottomSheetDialog))
    val dialog = BottomSheetDialog(this).apply {
        setContentView(layout.root)
        setOnDismissListener(onDismissListener)
        setCancelable(isCancelable)
    }.apply {
        behavior.apply {
            setHideable(isHideable)
            isFitToContents = isFitContent
            if(peekHeight != null) setPeekHeight(peekHeight)
        }
    }
    return Pair(layout, dialog)
}

I've already researched this problem, and everyone suggests creating its own class, but in my case I want it to have a flexible view and easy to call with inline. When I saw the base code of BottomSheetDialog I thougth its because the container (FrameLayout) height not adjusted when BottomSheet is Expanded.

Question

how can I fix this problem? it makes me can't attach the button at the bottom of the view either. Thank you!

question from:https://stackoverflow.com/questions/65930587/how-to-make-bottomsheetdialog-fullcreen-when-expanded-and-make-button-attached-a

Answer 1

There is a way with which you can do this:

In XML layout of the dialog:

 <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/sliderLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:behavior_hideable="true"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        // Place your layout code here and your code should be in one tag that can be any Layout.

        </RelativeLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

In the view, where you are calling the dialog, make a BottomSheetBehavior variable of the RelativeLayout type.

private lateinit var bottomSheetBehaviour: BottomSheetBehavior<RelativeLayout>

Then, call your dialog like this,

 val dialog = BottomSheetDialog(this)
 val dialogBinding = binding of your dialog layout
 dialog.setContentView(dialogBinding.root)
 bottomSheetBehaviour = BottomSheetBehavior.from(dialogBinding.sliderLayout)
 dialog.show()

 bottomSheetBehaviour.state = BottomSheetBehavior.STATE_EXPANDED
 bottomSheetBehaviour.peekHeight = dialogBinding.sliderLayout.height

This will make your dialog layout go full screen when the user slides up the layout.