Android Material ModalBottomSheet renders strange padding at the top of the sheet

Viewed 53

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)
}
...
0 Answers
Related