android android-layout android-recyclerview android-constraintlayout

How prevent RecyclerView from overwriting the view beneath it?

This is my layout:

<androidx.appcompat.widget.LinearLayoutCompat 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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".ScannerFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.camera.view.PreviewView
            android:id="@+id/cameraPreview"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="16:9"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/saleList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintTop_toBottomOf="@id/cameraPreview"
            app:layout_constraintBottom_toTopOf="@id/total_widget"/>

        <View
            android:id="@+id/filler"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@id/saleList"
            app:layout_constraintVertical_weight="1" />

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/total_widget"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="4dp"
            app:layout_constraintBottom_toBottomOf="parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/total"
                android:textSize="24sp" />

            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <TextView
                android:id="@+id/sum"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="24sp" />

        </androidx.appcompat.widget.LinearLayoutCompat>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.LinearLayoutCompat>

And this is what it looks like:

Please look at the bottom of the image were the item from the RecyclerView is overwriting the 'Total' text. I want the RecyclerView to expand no further than to the top of the 'Total' text.

The catch is that I want the 'Total' text to stick to the bottom above the ad even if the RecyclerView is empty. Thus I cannot simply constrain it that way.

I tried various constraints with the 'filler' View, but that did not work properly either. In some cases the items added to the RecyclerView made the RecyclerView expand from the middle between the CameraPreview and the 'Total' text. Only to finally overwrite both the CameraPreview and the 'Total' text...

Is there a conscious way to achieve the layout I want without fiddling around with it endlessly?

EDIT:

Adding app:layout_constraintBottom_toTopOf="@id/total_widget" to the RecyclerView has undesired effects: The RecyclerView pops up in the middle between the CameraPreview and total_widget once it is populated:

I want the items to appear right under the CameraPreview. The second problem is that once the list in the RecyclerView is growing it overwrites not just the total_widget, but also the CameraPreview:

Solution

The problem in the original code lies in the layout_height attributes of the root layout(LinearLayout), ConstraintLayout, and RecyclerView elements.

In the original code:

<androidx.appcompat.widget.LinearLayoutCompat 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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".ScannerFragment">

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/saleList"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/cameraPreview"
    app:layout_constraintBottom_toTopOf="@id/total_widget"/>

The ConstraintLayout has a layout_height set to wrap_content, and the RecyclerView inside it also has a layout_height set to wrap_content. This can lead to unexpected behavior, especially when dealing with scrolling content like RecyclerViews.

In the fixed code:

<androidx.appcompat.widget.LinearLayoutCompat 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ScannerFragment">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/saleList"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    app:layout_constraintTop_toBottomOf="@id/cameraPreview"
    app:layout_constraintBottom_toTopOf="@id/total_widget" />

The layout_height of both the ConstraintLayout and RecyclerView elements are set to 0dp, with the ConstraintLayout having a layout_weight of 1. This ensures that the RecyclerView will expand to fill the available vertical space within the ConstraintLayout, which is a more appropriate setup for a scrolling list.

Key takeaways:

When using ConstraintLayout as a parent layout, avoid using wrap_content for dimensions, especially for views that contain scrolling content like RecyclerViews.
Instead, use 0dp (match constraints) combined with layout_weight to properly allocate space within ConstraintLayouts, allowing views to expand or fill available space as needed.
Always consider the behavior of scrolling content and make sure it has enough space to display its contents without being constrained by the parent layout's dimensions.