What is BottomSheetDialogFragment?
BottomSheetDialogFragment is a version of DialogFragment which is shown from the bottom instead of a floating dialog. Google introduced this in its Android version 23. It is used to show the additional content of the page and they have a nicer-looking entrance animation and since they are pinned to the bottom they may feel easier to use on larger devices. For detailed documentation, You can follow the official doc.
What is Peek Height?
Bottom Sheets have various states like STATE_COLLAPSED, STATE_EXPANDED, STATE_DRAGGING, STATE_SETTLING, and STATE_HIDDEN. Initially, the bottom sheet can cover a defined height of the screen and the user can drag is upwards to show it on full screen or the user can drag it downwards to dismiss it. When it is covering a definite height then it is in STATE_COLLAPSED state, when it is covering the full screen then it is in STATE_EXPANDED, and when it not shown on the screen then it is in STATE_HIDDEN. So, In case of STATE_COLLAPSED, the height for which the bottom sheet is showed is called the peek height which can be assigned as the below-given codes.
|
1 |
app:behavior_peekHeight="100dp" |
|
1 |
BottomSheetBehavior.from(bottomSheetInternal).peekHeight = 100 |
Hows the peeking bottom sheet looks like?
Here is an image of the bottom sheet peeking.
How to open the bottom sheet directly to full screen?
Recently, We got into a situation where we wanted to show a full-screen bottom layout directly (without the STATE_COLLAPSED). You can achieve this by programmatically setting two values.
|
1 |
BottomSheetBehavior.from(bottomSheetInternal).peekHeight = Resources.getSystem().getDisplayMetrics().heightPixels |
|
1 |
BottomSheetBehavior.from(bottomSheetInternal).state = BottomSheetBehavior.STATE_EXPANDED |
but this will not be a smooth transition. You will be able to clearly notice a state change. To open the bottom sheet to full screen without a noticeable animation change, you need to add an onShowListener on the onCreate function of the BottomSheetDialogFragment which will be called as soon as the bottom sheet appears and set the peek height to device’s height.
|
1 2 3 4 5 |
dialog.setOnShowListener { dialog -> val d = dialog as BottomSheetDialog val bottomSheetInternal = d.findViewById<View>(android.support.design.R.id.design_bottom_sheet) BottomSheetBehavior.from(bottomSheetInternal).peekHeight = Resources.getSystem().getDisplayMetrics().heightPixels } |
Hope this has helped you in getting the idea of what exactly happening.
That’s all for this blog. Thank you very much. This is Vedesh Kumar signing off.
5 comments