BottomSheetDialogFragment with bottom sticky button

Question

I have some trouble displaying a button in my BottomSheetDialogFragment. I want it to stick to the bottom of my bottom sheet, no matter if the sheet is expanded or collapsed.

See the picture below :

What I want to do

(I used sketch to create this)

Any tips or tricks ?

And just in case, if you know how to add top margin to the bottomsheetdialog, I'd love to know this too ;)

Hi there ! Unfortunately, I didn't find a solution, and the screen hasn't been validated, so we found a workaround. I think you can try to perform such a thing with MotionLayout. It's in alpha, but I played with it and it's sooo powerful, beside of being fun. If you're a bit curious and adventurous, give it a try ! I'm sure you can get close to this. — Tanguy C, Oct 16 '18 at 09:47
Hi, thank you for the hint with the MotionLayout. That seems to be really powerful, I'll give it a try. — PeterG, Oct 16 '18 at 13:37

Xianwei · Answer 1 · 2019-11-30T22:17:31.033

7

Thanks, @Gnocalo, post. I have implemented it and please find it in my github

Steps:

find the parent view BottomSheetDialogFragment
inflate your custom view and attached it to the parent view
adjust the margin of the bottom sheet to avoid view overlay

edited Nov 30 '19 at 22:17

answered Oct 10 '19 at 20:13

Xianwei

2,381
2
22
26

score 2 · Answer 2 · answered May 23 '19 at 10:31

the way I tackled this issue was the following:

Implement BottomSheetDialogFragment
override onCreateDialog
get reference for bottomSheetDialog and set a onShowListener
Remove button from my layout and add it to R.id.container (of course you can create your own button programatically, I've done it this to be easier to format the button view). This way your button will be over the R.id.design.bottom.sheet since R.id.container is it's parent!

Example code following:

    val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
    bottomSheetDialog.setOnShowListener {
        val dialog = it as BottomSheetDialog

            dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet) as FrameLayout
        val containerLayout: FrameLayout =
            dialog.findViewById<FrameLayout>(com.google.android.material.R.id.container) as FrameLayout
        val button = binding.submitButton
        val parent = button.parent as ViewGroup
        parent.removeView(button)
        containerLayout.addView(button, containerLayout.childCount)
    }
    return bottomSheetDialog

This way your bottom sheet will respond to touches normally and the button will stay on it's position on the parent.

If you have any doubt feel free to ask.

EDIT

Don't forget to define layout params/positioning the button for it to be on the bottom of R.id.container

score 1 · Answer 3 · answered Feb 19 '21 at 11:27

1

Might take a while, but I faced same problem so I decided to write an article: https://dorianpavetic.medium.com/android-sticky-view-at-the-bottom-of-bottom-sheet-dialog-fragment-ac91242bc1b7

answered Feb 19 '21 at 11:27

Dorian Pavetić

123
1
8

1

worked, but it was so complex to understand first – Tehleel Mir Jul 11 '22 at 04:18
Glad it work. Could you please explain what was complex to understand so I could update it in more simpler way? Thank you – Dorian Pavetić Jul 11 '22 at 07:41

score 0 · Answer 4 · answered Sep 01 '22 at 07:51

I am finding a solution for sticky bottom button, although want to answer for your additional question about setting up the Bottom sheet margin.

So you cannot add margins to your bottom sheet, it is basically being handled by state of Bottom sheet.

You can explicitly set the state of Bottom sheet by following:

val bottomSheet = dialog!!.findViewById<View>(design_bottom_sheet) as FrameLayout
val behavior: BottomSheetBehavior<*> = BottomSheetBehavior.from<View>(bottomSheet)
behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED

BottomSheetDialogFragment with bottom sticky button

4 Answers4