RecyclerView in ConstraintLayout overlapping other elements

jack_the_beast picture jack_the_beast · Nov 23, 2017 · Viewed 20.9k times · Source

I'm doing a simple list activity with the following components: an EditText, a RecyclerView, a ProgressBar and a Textview. Everything works really well, except for the RecyclerView which overlaps the EditText and goes "beyond" the screen bottom so the last item is partially cut out (see the screenshots). What an I doing wrong?

MainActivity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="jacopo.com.flickrgallery.GalleryActivity">

    <EditText
        android:id="@+id/search_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:hint="search by tag..."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/gallery_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/search_text" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/gallery_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/search_text" />

    <TextView
        android:id="@+id/gallery_error"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/search_text"
        tools:text="error" />

</android.support.constraint.ConstraintLayout>

recyclerview overlapping editext recyclerView going outside the screen

Answer

Stanislav Bondar picture Stanislav Bondar · Nov 23, 2017

You are using android:layout_height="wrap_content" for RecyclerView but it's looks like you need to limit height. Try it with android:layout_height="0dp". In this case it is equals to app:layout_constraintTop_toBottomOf="@+id/search_text" and app:layout_constraintBottom_toBottomOf="parent"