CODEWITHSUNDEEP
androidbottom-sheet
Tanguy C
Tanguy C

Reputation: 213

BottomSheetDialogFragment with bottom sticky button

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 ;)

Upvotes: 21

Views: 8930

Answers (5)

Antonio
Antonio

Reputation: 1

To achieve mentioned functionality you can make use of constrainedHeight set to true on the recycler view. Also, constrain recyclers bottom to top of button and button constraint to the end. Refer to the code below

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/recycler_view"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@id/button"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Pratik Bhandari
Pratik Bhandari

Reputation: 268

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

Upvotes: 1

Dorian Pavetić
Dorian Pavetić

Reputation: 105

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

Upvotes: 1

Xianwei
Xianwei

Reputation: 2551

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

enter image description here

Upvotes: 8

Gon&#231;alo Gaspar
Gon&#231;alo Gaspar

Reputation: 312

the way I tackled this issue was the following:

  1. Implement BottomSheetDialogFragment
  2. override onCreateDialog
  3. get reference for bottomSheetDialog and set a onShowListener
  4. 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

Upvotes: 5

Related Questions