[BottomSheet] Empty space being created for something I've set to fill the space inside BottomSheet

AndroidDeveloperLB commented 6 days ago

Description: Full description of issue here I just wanted to have some scrollable content in BottomSheetDialogFragment.

Expected behavior: Screenshots and/or description of expected behavior Fill the space of the bottom sheet, having the TextView at the top of the content.

What happens instead is that it got empty space above the TextView.

Source code: The code snippet which is causing this issue

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/bottomSheetRoot"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="#330000ff">

    <FrameLayout
        android:id="@+id/standard_bottom_sheet" android:layout_width="match_parent"
        android:layout_height="match_parent" android:layout_gravity="center_horizontal"
        android:background="#3300ff00"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <TextView
            android:layout_width="200dp" android:layout_height="200dp"
            android:layout_gravity="center_horizontal" android:background="#33ff0000"
            android:gravity="center" android:text="Hello bottom sheet" />

    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

class ModalBottomSheet : BottomSheetDialogFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? =
            inflater.inflate(R.layout.modal_bottom_sheet_content, container, false)

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog: BottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
        dialog.behavior.saveFlags = BottomSheetBehavior.SAVE_ALL
        return dialog
    }

    companion object {
        const val TAG = "ModalBottomSheet"
    }
}

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
        findViewById<View>(R.id.button).setOnClickListener {
            val modalBottomSheet = ModalBottomSheet()
            modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)
        }
    }
}

Android API version: Android API version here 35

Material Library version: Material Android Library version you are using here (e.g., 1.1.0-alpha07) 1.13.0-alpha07

Device: Device on which the bug was encountered here Pixel 6.

My Application.zip

manabu-nakamura commented 2 days ago

https://github.com/material-components/material-components-android/blob/master/catalog/java/io/material/catalog/bottomsheet/BottomSheetMainDemoFragment.java#L98:

bottomSheetDialog.setContentView(R.layout.cat_bottomsheet_content);

https://github.com/material-components/material-components-android/blob/master/catalog/java/io/material/catalog/bottomsheet/BottomSheetScrollableContentDemoFragment.java#L68-L71:

View content =
    LayoutInflater.from(getContext())
        .inflate(R.layout.cat_bottomsheet_scrollable_content, new FrameLayout(getContext()));
bottomSheetDialog.setContentView(content);

https://github.com/material-components/material-components-android/blob/master/catalog/java/io/material/catalog/bottomsheet/BottomSheetUnscrollableContentDemoFragment.java#L68:

bottomSheetDialog.setContentView(R.layout.cat_bottomsheet_unscrollable_content);

...

AndroidDeveloperLB commented 2 days ago

@manabu-nakamura Sample doesn't match the instructions. You shouldn't use new FrameLayout for the inflater. You should do as on the instructions:

https://github.com/material-components/material-components-android/blob/master/docs/components/BottomSheet.md#:~:text=Modal%20bottom%20sheet%20basic%20usage%3A

I don't understand what you want me to check here. It seems similar to what I did, just that I didn't set a fixed size as I want the size to match the content, and if it's too large, then be able scroll.

So instead of what's on cat_bottomsheet_unscrollable_content.xml , I can't use android:layout_height="600dp" . A lot of empty space will be shown if I do it. Imagine a list of operations to show, yet we only have 1-2 items there...

This seems to work, but it's not working when using the one of the instructions here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!--    <com.google.android.material.bottomsheet.BottomSheetDragHandleView-->
<!--        android:layout_width="match_parent"-->
<!--        android:layout_height="wrap_content"/>-->

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/bottom_drawer_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="200dp" android:layout_height="200dp"
                android:layout_gravity="center_horizontal" android:background="#33ff0000"
                android:gravity="center" android:text="Hello bottom sheet" />

<!--            <TextView-->
<!--                android:layout_width="match_parent" android:background="#ff0"-->
<!--                android:layout_height="50dp"-->
<!--                android:text="text"/>-->
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</LinearLayout>

So, please update the instructions and match with the samples. This time I got it bad from both of them, as the instructions weren't updated, and the samples don't match them. Both samples and instructions should be updated.

bottomSheetSample.zip

I've also removed the BottomSheetDragHandleView, but according to the instructions it's something good to add. Thing is, I can't find here any explanation of how to at least hide it when you can't collapse/expand anyway...

https://github.com/material-components/material-components-android/blob/master/docs/components/BottomSheet.md#making-bottom-sheets-accessible

material-components / material-components-android

[BottomSheet] Empty space being created for something I've set to fill the space inside BottomSheet #4349