I have a strange problem when implementing the Material Design ModalBottomSheet in one of our apps according to the Material Design documentation.
https://material.io/components/sheets-bottom/android#using-bottom-sheets
I've created a fragment and an accompanying view as described. In the main activity I have a button which adds the fragment to the FragmentManager on click. When I launch the modal bottom sheet I get a padding at the top of the sheet. The backdrop is rendered correctly and behaves as expected. When I fully expand the sheet and change it back to half open, the padding disappears.
I've added a red color to the outer CoordinatorLayout to visualize the problem:
ModalBottomSheet (STATE_COLLAPSED) with padding at the top
modal_bottom_sheet.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/color_error"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/standardBottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="?attr/bottomSheetStyle"
app:layout_behavior="@string/bottom_sheet_behavior">
<View
android:id="@+id/slideView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp" />
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Bottom Sheet"
android:gravity="center" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
ModalBottomSheet.kt
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.core.os.bundleOf
import com.google.android.material.bottomsheet.BottomSheetDialog
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import com.ricknout.mdctheming.R
class ModalBottomSheet : BottomSheetDialogFragment() {
private var dismissWithAnimation = false
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? = inflater.inflate(R.layout.modal_bottom_sheet, container, false)
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
dismissWithAnimation = arguments?.getBoolean(ARG_DISMISS_WITH_ANIMATION) ?: false
(requireDialog() as BottomSheetDialog).dismissWithAnimation = dismissWithAnimation
}
companion object {
const val TAG = "ModalBottomSheet"
private const val ARG_DISMISS_WITH_ANIMATION = "dismiss_with_animation"
fun newInstance(dismissWithAnimation: Boolean): ModalBottomSheet {
val modalBottomSheet = ModalBottomSheet()
modalBottomSheet.arguments = bundleOf(ARG_DISMISS_WITH_ANIMATION to dismissWithAnimation)
return modalBottomSheet
}
}
}
BottomSheetActivity.kt:
...
private fun showModalBottomSheet() {
val modalBottomSheet = ModalBottomSheet.newInstance(modalDismissWithAnimation)
modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)
}
...