search

NikolaDespotoski / BottomSheetSample

81 stars 26 forks source link

Modal Bottom Sheet Dialog on top of a view #3

Open kata32 opened 3 years ago

kata32 commented 3 years ago

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.

NikolaDespotoski commented 3 years ago

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?

kata32 commented 3 years ago

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

NikolaDespotoski commented 3 years ago

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

kata32 commented 3 years ago

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

NikolaDespotoski commented 3 years ago

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.