BottomSheetSample icon indicating copy to clipboard operation
BottomSheetSample copied to clipboard

Modal Bottom Sheet Dialog on top of a view

Open kata32 opened this issue 3 years ago • 5 comments

Hi Nikola, do you know how to use a Modal Bottom Sheet Dialog so that it appears on top of a view? I want to use it to implement an overflow button of a Bottom Navigation View.

kata32 avatar May 27 '21 10:05 kata32

BottomSheetDialog is wrapped inside a dialog, essentially it will appear on top current layout, like any other dialog. What have you tried so far? How does it appear right now?

NikolaDespotoski avatar May 27 '21 10:05 NikolaDespotoski

It always appears from the bottom of the screen even if I call it from a fragment that doesn't take the whole screen

kata32 avatar May 27 '21 11:05 kata32

That's the expected behavior. Unfortunately, there is no way to set the start position from where BSD should appear.

NikolaDespotoski avatar May 27 '21 11:05 NikolaDespotoski

Could you give me some advice on how to get the desired effect? Not only with the BottomSheetDialogFragment

kata32 avatar May 27 '21 13:05 kata32

image

You may use two FrameLayouts (green and grey) one that will hold the content of your sheet (green), the other one to dim (grey) the rest of the screen below. Put those two FrameLayouts into one LinearLayout with horizontal ordering.
Make sure this LinearLayout always has Z-index or elevation so it is displayed above all elements, except the nav bar. Offset this LinearLayout vertically to the height of the Bottom Nav Bar marked with h in the drawing.

Animate from bottom to top (y index animation) (include the offset h in red) when you want to show it, so it has the same effect. Also along this animation you can animate the dimming of the content.

Hope it helps.

NikolaDespotoski avatar May 27 '21 16:05 NikolaDespotoski