RecyclerView inside a Dialog is overlapping other content of dialog

Question

I am trying to make a Dialog that looks like this

Here, the elements in orange rectangles are fixed header and footer sections of the Dialog. The elements inside blue rectangle are placed dynamically depending on what content is to be shown. Here it the XML for this.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

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

        <LinearLayout
            android:id="@+id/header_section"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <!-- some views -->

        </LinearLayout>

        <LinearLayout
            android:id="@+id/body_section"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintTop_toBottomOf="@id/header_section"
            app:layout_constraintBottom_toTopOf="@id/footer_section"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

        </LinearLayout>

        <LinearLayout
            android:id="@+id/footer_section"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <!-- some views -->

        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

It works fine when I place other views inside the blue area, but when a RecyclerView is placed inside it and items are dynamically added to it, it grows in size and overlaps the text in header section and pushes the footer section to bottom. How can I make the RecyclerView cover only the blue area?

Why do u need a linear layout in the ConstraintLayout ? It can be achieved with a single constraint Layout ! — Santanu Sur, Jan 07 '20 at 06:22
I hope it'll help you : https://stackoverflow.com/q/33560276 — Viral Patel, Jan 07 '20 at 06:27
@SantanuSur I've placed the different sections inside `LinearLayout` just to make code look clean and keep all their content constrained without having to apply constraints to every single `View` in header and footer section. — Abdul Mateen, Jan 07 '20 at 06:35
@ViralPatel thank you, but the link you shared does not answer the question. — Abdul Mateen, Jan 07 '20 at 06:37

score 2 · Answer 1 · answered Jan 07 '20 at 06:35

Use height 0dp in body section so it will fit between header and footer

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

        <LinearLayout
            android:id="@+id/header_section"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <!-- some views -->

        </LinearLayout>

        <LinearLayout
            android:id="@+id/body_section"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            app:layout_constraintTop_toBottomOf="@id/header_section"
            app:layout_constraintBottom_toTopOf="@id/footer_section"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

        </LinearLayout>

        <LinearLayout
            android:id="@+id/footer_section"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <!-- some views -->

        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

I'm placing a `RecyclerView` and 2 `TextView` inside a `LinearLayout`. — Abdul Mateen, Jan 07 '20 at 08:29
Adding `layout_constrainedHeight="true"` does solve the problem of `RecyclerView` overlapping the content in header. But it still pushes the footer section out of view when elements are added to it. — Abdul Mateen, Jan 07 '20 at 08:31
give height and width of recyclerview 0 dp and top,bottom,start,end constraint to parent ,give top to bottom of textview if your recyclerview is below textview — Sejpal Pavan, Jan 07 '20 at 09:48
Well, I had to use `layout_constrainedHeight="true"` on the `RecyclerView` and a fixed height on the root layout to solve the problem. It still seems a woorkaround though as the fixed height is not appropriate for all screen sizes. — Abdul Mateen, Jan 08 '20 at 11:49

score 1 · Answer 2 · answered Sep 25 '20 at 13:38

I use ScrollView to tackle this,

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

            <ScrollView
                android:id="@+id/scrollView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintHeight_min="100dp"
                app:layout_constraintHeight_max="250dp"
                app:layout_constrainedHeight="true"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                >

                 <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/recycler"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:paddingHorizontal="8dp"
                    android:paddingVertical="8dp"
                   />

            </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

The main attributes are these 3

            app:layout_constraintHeight_min="100dp"
            app:layout_constraintHeight_max="250dp"
            app:layout_constrainedHeight="true"

RecyclerView inside a Dialog is overlapping other content of dialog

2 Answers2