How do I change the default height of a BottomSheetDialog?

Question

I've been using the new BottomSheetDialog added in Support Library 23.2, but I want to change the default height of the dialog. I know it probably has to do with the behavior_peekHeight attribute which controls the initial height, but how do I set that in the BottomSheetDialog when I don't have direct access to the BottomSheetBehavior?

ianhanniballake · Accepted Answer · 2018-07-19T12:29:45.330

85

You can set a bottomSheetDialogTheme in your Activity, overriding the bottomSheetStyle attribute's behavior_peekHeight:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>

<style name="AppBottomSheetDialogTheme"
       parent="Theme.Design.Light.BottomSheetDialog">
  <item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>

<style name="AppModalStyle"
       parent="Widget.Design.BottomSheet.Modal">
  <item name="behavior_peekHeight">@dimen/custom_peek_height</item>
</style>

This same technique can be used for other attributes as well, such as adding <item name="behavior_hideable">true</item> to the AppModalStyle to change whether the bottom sheet is hideable.

edited Jul 19 '18 at 12:29

answered Feb 25 '16 at 17:33

ianhanniballake

191,609
30
470
443

3

This does not work when using Theme.AppCompat.Light.NoActionBar as parent layout – DarkLeafyGreen Feb 29 '16 at 15:04
1

I notice that behavior_peekHeight only takes effect if the value is greater than 208dp. Why is that? – Amit Jayant Mar 15 '16 at 06:02
4

@AmJay - that should be fixed in version 23.2.1. Make sure to update! – ianhanniballake Mar 16 '16 at 16:09
1

Yes 23.2.1 fixed it. Thanks!! – Amit Jayant Mar 17 '16 at 10:25
getting this erro: Cannot resolve symbol 'Theme.Design.Light.BottomSheetDialog' – Malwinder Singh Apr 04 '17 at 23:41
1

Setting the peek height in styles does not work unless the Bottom Sheet Dialog is used inside a Coordinator Layout. The only way to set the peek height when using a BottomSheetDialogFragment is through setUpDialog(). See answer here: https://stackoverflow.com/a/38873329/6211703 – Ray Li Apr 29 '19 at 19:57

score 27 · Answer 2 · answered Apr 28 '16 at 05:57

27

you can use BottomSheetBehaviorin your code

BottomSheetDialog dialog = new BottomSheetDialog(content);
.
.
.
dialog.setContentView(view);
BottomSheetBehavior mBehavior = BottomSheetBehavior.from((View) view.getParent());
mBehavior.setPeekHeight(your dialog height)
dialog.show();

answered Apr 28 '16 at 05:57

litao

304
3
4

3

getParent() gives null – Sindhu Arju Jun 24 '20 at 06:13

score 19 · Answer 3 · edited Sep 05 '22 at 02:54

19

styles.xml

<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>

<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
    <item name="behavior_peekHeight">500dp</item>
</style>

BottomSheetDialog dialog = new BottomSheetDialog(this, R.style.BottomSheetDialog);
dialog.setContentView(R.layout.layout_bottom_sheet);
dialog.show();

edited Sep 05 '22 at 02:54

Vasily Kabunov

6,511
13
49
53

answered Mar 01 '16 at 10:37

Fang

3,652
4
16
30

This is not working for me, the bottom sheet takes the all screen's height. – Shirane85 Apr 14 '16 at 15:33
change the behavior_peekHeight – Fang Apr 15 '16 at 07:41
I did, obviously. but it doesn't matter what value i put. – Shirane85 Apr 16 '16 at 20:10
getting this erro: Cannot resolve symbol 'Theme.Design.Light.BottomSheetDialog' – Malwinder Singh Apr 05 '17 at 09:55

score 15 · Answer 4 · answered Apr 26 '19 at 09:21

15

Woks for me

  override fun onStart() {
    super.onStart()
    dialog?.also {
        val bottomSheet = dialog.findViewById<View>(R.id.design_bottom_sheet)
        bottomSheet.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT
        val behavior = BottomSheetBehavior.from<View>(bottomSheet)
        behavior.peekHeight = resources.displayMetrics.heightPixels //replace to whatever you want
        view?.requestLayout()
    }
}

answered Apr 26 '19 at 09:21

HelloCsl

201
2
6

2

It worked for me just changed to WRAP_CONTENT bottomSheet.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT – kondal May 01 '19 at 09:39
`requestLayout()` solves the issue – davee44 Sep 14 '22 at 08:52

ivan8m8 · Answer 5 · 2020-10-27T08:10:33.637

11

Honestly, I've got no idea why nobody has mentioned these simple ways, yet:

override fun onResume() {
    super.onResume()

    dialog.behavior.state = BottomSheetBehavior.STATE_EXPANDED
    // or since com.google.android.material:material:1.1.0-beta01
    (dialog as? BottomSheetDialog)?.behavior?.state = BottomSheetBehavior.STATE_EXPANDED

}
//or
dialog.behavior.peekheight = YOUR_VALUE

Directly answering the question

Q: How can I directly access the BottomSheetBehavior height?

A: dialog.behavior.peekheight

edited Oct 27 '20 at 08:10

answered Oct 07 '19 at 10:30

ivan8m8

388
4
17

5

BottomSheetDialog.behavior is private now – Aguragorn Apr 25 '20 at 10:41
2

@Aguragorn as I can see it's [defined](https://github.com/material-components/material-components-android/blob/708c50f8d23f195e76663daf274c6b935ddc8aef/lib/java/com/google/android/material/bottomsheet/BottomSheetDialog.java#L226) `public` – ivan8m8 Jun 21 '21 at 13:46

score 6 · Answer 6 · answered Jul 21 '21 at 11:25

My bottom sheet dialog had recycler view and didn't had items to show, so it was shrinking, but let's say u want to set peek height to 85% irrespective of items present in Recyclerview or not, try this solution.

Add the following code in class which extends BottomSheetDialogFragment

override fun onStart() {
    super.onStart()
    (dialog as BottomSheetDialog).behavior.peekHeight = getBottomSheetDialogDefaultHeight()
    dialog?.let {
        val bottomSheet = it.findViewById<View>(R.id.design_bottom_sheet)
        bottomSheet.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT
    }
}

private fun getBottomSheetDialogDefaultHeight(): Int {
    val displayMetrics = DisplayMetrics()
    (context as Activity?)?.windowManager?.defaultDisplay?.getMetrics(displayMetrics)
    return displayMetrics.heightPixels * 85 / 100
}

Nikola Despotoski · Answer 7 · 2016-02-26T10:02:35.723

Another way is inheriting BottomSheetDialogFragment and have control how and when you set the content view. Going up the view tree, you can get the behavior that BottomSheetDialog wraps up the content view. It's not really good solution, because it requires more layout passes. It is important that when the state of the bottom sheet is STATE_HIDDEN we have to dismiss the dialog, if we don't we clearly violate the implementation provided in the library.

After setting the peek height programmatically, content view must call requestLayout() which is indeed another layout pass.

public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment {


    private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback() {

        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            setStateText(newState);
            if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                dismiss();
            }

        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        }
    };

@Override
    public void setupDialog(Dialog dialog, int style) {
        super.setupDialog(dialog, style);
        View contentView = View.inflate(getContext(), R.layout.bottom_sheet_dialog_content_view, null);
        dialog.setContentView(contentView);
        mBottomSheetBehavior = BottomSheetBehavior.from(((View) contentView.getParent()));
        if (mBottomSheetBehavior != null) {
           mBottomSheetBehavior.setBottomSheetCallback(mBottomSheetBehaviorCallback);    
           mBottomSheetBehavior.setPeekHeight(peekHeight);
           contentView.requestLayout();
        }
}

At this point, you've replaced more of `BottomSheetDialog` than you are still using and should just roll your own right? — ianhanniballake, Feb 25 '16 at 19:22
@ianhanniballake My initial intention was to bypass `BottomSheetDialog` internal instance of the `BottomSheetCallback` which simply dismisses the dialog, and have my own for more control. Having instance of the behavior can be utilized for this scenario too. — Nikola Despotoski, Feb 25 '16 at 19:42
Note there is a helper method `BottomSheetBehavior.from(View)` which could simplify your logic (although it throws `IllegalArgumentException`s) — ianhanniballake, Feb 25 '16 at 19:45
@ianhanniballake In my case, you still need to point to the view that has the behavior otherwise, `from()` method doesn't walk the tree until it finds the behavior, as you said it will throw IAE. Yeah, it tidies up the code. Thanks. — Nikola Despotoski, Feb 25 '16 at 19:47

score 3 · Answer 8 · answered Apr 08 '20 at 10:57

You can use BottomSheetDialogFragment and do it programatically also.

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    (dialog as? BottomSheetDialog)?.let {
      it.behavior.peekHeight = PEEK_HEIGHT
    }
    return inflater.inflate(R.layout.bottom_sheet_dialog_fragement, container, false)
  }

score 2 · Answer 9 · answered Jul 07 '20 at 19:24

If you are using BottomSheetDialogFragment, copy and paste this code

private View bottomSheet;

@Override public void onStart() {
    super.onStart();
    Dialog dialog = getDialog();
    if (dialog != null) {
      bottomSheet = dialog.findViewById(R.id.design_bottom_sheet);
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        bottomSheet.getLayoutParams().height = ViewGroup.LayoutParams.MATCH_PARENT;
      }
      View view = getView();
      view.post(() -> {
        View parent = (View) view.getParent();
        CoordinatorLayout.LayoutParams params =
            (CoordinatorLayout.LayoutParams) (parent).getLayoutParams();
        CoordinatorLayout.Behavior behavior = params.getBehavior();
        BottomSheetBehavior bottomSheetBehavior = (BottomSheetBehavior) behavior;
      bottomSheetBehavior.setPeekHeight(view.getMeasuredHeight());
// Here you can play with the height of the bottom sheet like pass height as- [view.getMeasuredHeight()/2]

            ((View) bottomSheet.getParent()).setBackgroundColor(Color.TRANSPARENT);
          });
        }
      }

score 1 · Answer 10 · answered Jan 18 '17 at 21:23

Combining Nick and litao's solution, this is a complete version of what we do:

 BottomSheetDialog bottomSheet = new BottomSheetDialog(context);
 View view = View.inflate(context, R.layout.your_action_sheet, null);
 bottomSheet.setContentView(view);
 BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(((View) view.getParent()));
 bottomSheetBehavior.setPeekHeight(1000);
 bottomSheet.show();

score 1 · Answer 11 · answered Apr 16 '19 at 12:12

This is how I decided on the problem:

   override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = BottomSheetDialog(context)
        val view = View.inflate(context, R.layout.bottom_dialog, null)

        val heightInPixels = 500
        val params = ViewGroup.LayoutParams(MATCH_PARENT, heightInPixels)

        dialog.setContentView(view, params)

        return dialog
    }

The main part is method setContentView(view, params), where you set view for your dialog and layout parameters in which you set the desired height.

score 1 · Answer 12 · answered Nov 06 '20 at 17:23

This is working for me to show BottomSheetDialog full screen(STATE_EXPANDED).I am using this in my Activity.

private void showBottomSheetDialog() {
        View dialogView = LayoutInflater.from(this).inflate(R.layout.your_custom_layout, null);
        BottomSheetDialog dialog = new BottomSheetDialog(NewWorkoutPlanActivity.this);
        dialog.setContentView(dialogView);

       
        FrameLayout bottomSheet = (FrameLayout) dialog.findViewById(R.id.design_bottom_sheet);
        BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
        ViewGroup.LayoutParams layoutParams = bottomSheet.getLayoutParams();

        int windowHeight = getWindowHeight();
        if (layoutParams != null) {
            layoutParams.height = windowHeight;
        }
        bottomSheet.setLayoutParams(layoutParams);
        behavior.setState(BottomSheetBehavior.STATE_EXPANDED);

        dialog.show();

    }

    private int getWindowHeight() {
        // Calculate window height for fullscreen use
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        return displayMetrics.heightPixels;
    }

score 1 · Answer 13 · answered Feb 13 '21 at 14:32

If you are extending BottomSheetDialogFragment, you can do the following to get hold of BottomSheetBehavior:

public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
    Dialog dialog = super.onCreateDialog(savedInstanceState);
    //Must add any view here, actual view will be inflated in onCreateView
    dialog.setContentView(new View(getContext()));
    //Dialog wraps view in frame layout
    View root = dialog.findViewById(R.id.design_bottom_sheet);
    //Now we have access to BottomSheetBehavior
    BottomSheetBehavior<View> behavior = BottomSheetBehavior.from(root);
    //Do whatever you need:
    behavior.setPeekHeight(320, true);
    behavior.setState(BottomSheetBehavior.STATE_HALF_EXPANDED);

    return dialog;
}

Then override onCreateView as usual:

    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    //inflate your bottom sheet layout:
    View root = inflater.inflate(R.layout.browser_bottom_sheet, container, false);
    //Do what you need with views:
    ViewPager viewPager = root.findViewById(R.id.viewpager);
                  ...........

    return root;
}

score 0 · Answer 14 · answered Dec 15 '18 at 09:43

I got one hack and used it.

If you want to do programmatically.

    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View view, int i) {
            behavior.setPeekHeight(yourMinHeight);
        }

        @Override
        public void onSlide(@NonNull View view, float v) {

        }
    });

Thank you.

score 0 · Answer 15 · answered Mar 16 '20 at 08:00

The really approach we want to achieve this is actual make the LayoutParams works. When inflating content view of the dialog, not passing the parentView in the dialog Window will make xml config of the rootView does NOT actually work.

So here is a solution:

val contentWidth = ViewGroup.LayoutParams.MATCH_PARENT
val contentHeight = 500 // px
dialog.setContentView(view, ViewGroup.LayoutParams(contentWidth, contentHeight))

score 0 · Answer 16 · edited Mar 30 '21 at 13:42

Use this code to set height of DialogFragment or BottomSheetDialogFragment. The dialog will adjust its height with different screen height

  override fun onStart() {
        super.onStart()
        val window = dialog?.window
        val ratio = 1.0

        if (window != null && activity != null) {
            val heightDialog = (getScreenHeight(requireActivity()) * 0.9f).toInt()
            window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, (heightDialog * ratio).toInt())
            window.setGravity(Gravity.BOTTOM)
        }
    }

score 0 · Answer 17 · answered Oct 20 '20 at 10:45

0

You can retrieve the BottomSheetBehavior object from getBehaviour() in the onStart() method, then modify the peek height from there.

@Override
protected void onStart() {
    super.onStart();
    getBehavior().setPeekHeight(/* Peek Height in px */);
}

answered Oct 20 '20 at 10:45

LCZ

589
1
9
15

There's no getBehaviour() in BottomSheetDialogFragment – Skizo-ozᴉʞS ツ Sep 22 '21 at 08:22

How do I change the default height of a BottomSheetDialog?

17 Answers17

Linked