RecyclerView in ConstraintLayout overlapping other elements

Question

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>

score 75 · Accepted Answer · answered Nov 23 '17 at 12:19

75

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"

answered Nov 23 '17 at 12:19

Stanislav Bondar

6,056
2
34
46

could you please take a look also at: https://stackoverflow.com/questions/47453261/android-architecture-components-using-viewmodel-for-recyclerview-items – jack_the_beast Nov 23 '17 at 13:31
4

`android:layout_height="0dp"` also works if you had `android:layout_height="wrap_content"` and the same problem – DanD May 26 '18 at 17:36

score 28 · Answer 2 · answered Dec 03 '20 at 14:10

28

I had the exact same problem, and adding

app:layout_constrainedHeight="true"

to the RecyclerView solved it.

answered Dec 03 '20 at 14:10

Bendegúz Kálmán

381
3
4

score 12 · Answer 3 · answered Nov 23 '17 at 12:28

try following, you have to set topConstraint of recyclerview to edittext

<?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"  >

    <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="0dp"
        android:layout_height="0dp"
        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>

Output :

score 4 · Answer 4 · answered Jun 30 '20 at 07:06

4

For some reason adding proper constraints and setting height as 0dp did not work for me(Even though it should work for most of the cases)

So I added a frame layout as the parent of the recycler view and set the height and width of recycler view as match_parent added the constraints to the frame layout.

This stopped the overlapping issue

answered Jun 30 '20 at 07:06

hushed_voice

3,161
3
34
66

2

You're a lifesaver dawg. – austinw Jan 14 '21 at 19:20

score 1 · Answer 5 · answered Nov 23 '17 at 12:12

1

In RecyclerView add this:

app:layout_constraintStart_toEndOf="@+id/search_text"

answered Nov 23 '17 at 12:12

Nikunj

3,937
19
33

score 1 · Answer 6 · answered Nov 23 '17 at 12:21

You pass the same id to each view, modify your code with this.

 <?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">

    <EditText
        android:id="@+id/search_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        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_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:layout_editor_absoluteX="376dp" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/gallery_list"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/search_text"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/gallery_error"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="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"
        tools:layout_editor_absoluteX="385dp" />

</android.support.constraint.ConstraintLayout>

Happy coding!!

score 1 · Answer 7 · answered Nov 23 '17 at 12:26

1

Just use

app:layout_constraintVertical_bias="0.0"

in recyclerView tag.

hope this helps.

answered Nov 23 '17 at 12:26

Nirmal Prajapat

1,735
1
12
23

score 0 · Answer 8 · answered Nov 23 '17 at 12:16

Change your XML file to below code.

<?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">

    <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_constraintStart_toEndOf="@+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>

Try this and let me know if this worked for you.

score 0 · Answer 9 · answered Jul 13 '21 at 12:30

0

I face this problem when I am building a music player app I solve my problem to give the height of recyclerview 0dp IDK how it's work but my problem was solved

answered Jul 13 '21 at 12:30

Nitish Gupta

45
7

RecyclerView in ConstraintLayout overlapping other elements

9 Answers9