Reputation: 1684

RecyclerView inside a Dialog is overlapping other content of dialog

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?

Upvotes: 1

Answers (2)

Vishal Naikawadi

Reputation: 493

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"

Upvotes: 1

Sejpal Pavan

Reputation: 140

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>

Upvotes: 2

RecyclerView inside a Dialog is overlapping other content of dialog

Answers (2)

Related Questions