Making most out of Android Bottom Sheet

  1. Modal bottom sheets: It Can be implemented using BottomSheetDialog or BottomSheetDialogFragment. These are an alternative to inline menus or simple dialogs on mobile and provide room for additional items, longer descriptions, and iconography. They must be dismissed in order to interact with the underlying content.
  2. Persistent bottom sheets: It can be implemented using BottomSheetBehavior in conjunction with a CoordinatorLayout.
Folks at Twitter has almost eliminated the context menu from their app and have replaced it with BottomSheetDialogFragment.
//ANDROID X
implementation 'com.google.android.material:material:1.1.0-alpha09'
OR//SUPPORT LIBRARY
implementation 'com.android.suppor:design:28.0.8'
#1 No bells and whistles, just a plain BottomSheet fragment.
code sample for #1
BottomSheet with curved top corners
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
(view?.parent as View).setBackgroundColor(Color.TRANSPARENT)
}
BottomSheet with curved top corners and margins on sides.
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
(view?.parent as View).setBackgroundColor(Color.TRANSPARENT)
val resources = resources

if (resources.configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
assert(view != null)
val parent = view?.parent as View
val layoutParams = parent.layoutParams as CoordinatorLayout.LayoutParams
layoutParams.setMargins(
resources.getDimensionPixelSize(R.dimen.screen_margin), // LEFT 16dp
0,
resources.getDimensionPixelSize(R.dimen.screen_margin), // RIGHT 16dp
0
)
parent.layoutParams = layoutParams
}
}
Only portion of entire content is visible initially.
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
bottomSheetDialog.setOnShowListener {
val dialog = it as BottomSheetDialog
val bottomSheet = dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
BottomSheetBehavior.from(bottomSheet).state = BottomSheetBehavior.STATE_EXPANDED
}
return bottomSheetDialog
}
override fun onStart() {
super.onStart()
dialog?.also {
val bottomSheet = dialog?.findViewById<View>(R.id.design_bottom_sheet)
bottomSheet?.layoutParams?.height = ViewGroup.LayoutParams.WRAP_CONTENT
val behavior = BottomSheetBehavior.from<View>(bottomSheet)
val layout = root?.findViewById(R.id.rootLayout) as LinearLayout //rootLayout is root of your fragment layout.
layout.viewTreeObserver?.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
try {
layout.viewTreeObserver.removeGlobalOnLayoutListener(this)
behavior.peekHeight = layout.height
view
?.requestLayout()
} catch (e: Exception) {
}
}
})
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store