Home > Software engineering >  RecyclerView obscurs items below it in a BottomSheetFragment
RecyclerView obscurs items below it in a BottomSheetFragment

Time:11-05

I'm using a BottomSheetDialogFragment with a custom layout. I'm trying to have the following setup:

<TextView> -> pinned to the top of the bottom sheet
<RecyclerView> -> wrap_content 
<Button> -> pinned to the bottom of the bottom sheet

Both TextView and Button must be visible at all time (sticky), while the RecyclerView should stay in the middle and scroll without obscuring other views.

This is my layout so far:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@ id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Title"
        app:layout_constraintBottom_toTopOf="@id/recyclerView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@ id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title" />

    <Button
        android:id="@ id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

This is what it looks like with a small list of items, where the RecyclerView has no need to scroll.

enter image description here

This is what it looks like with a large list of items. The title stays pinned to the top, but the button doesn't. The button is actually not even visible, even if I scroll down all the way.

enter image description here

What's strange to me is that this same layout works with a regular full screen activity, but it somehow fails with a BottomSheetFragment.

I've already looked at other posts, but none of them helped e.g.

CodePudding user response:

The height of recycler view shouldn't be wrap_content

If you want recyler in-between your title and footer, the better approach is set height = 0 and pin its top to the bottom title and its bottom to the top of footer (like you already did), it will auto stretch for you

CodePudding user response:

You need to remove the app:layout_constraintBottom_toTopOf="@id/recyclerView" from the TextView, because this will make it centered between the RecyclerView & the top screen.

Also make the RecyclerVeiw height to match constraint so that it its top stick to the bottom of the TextView and its bottom stick to the Button. If it is wrap_content, then it will be centered between the textview & the Button; also if the items greater than the assigned space; then they will overlap with the TextView and the Button.

Applying this:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@ id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Title"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@ id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title" />

    <Button
        android:id="@ id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
  • Related