ConstraintLayout list item aren't the same length even when matching to parent?

Question

I have a recyclerview using a contraintlayout that looks like I want in the preview, but when running it the constraints act funny. It seems as if each list item has its own width.

I've tried to add android:minWidth=150dp to both the constraintlayout tag and the tag with id listItemSubject, neither have helped.

Note: this app doesn't work with newer phones, but works running on a Nexus 5X.

Here is the xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    >

    <TextView
        android:id="@+id/listItemSubject"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Subject: "
        android:textSize="15pt"
        app:fontFamily="sans-serif-medium"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/listItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Content: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-condensed-light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/listItemSubject" />

    <TextView
        android:id="@+id/listItemLikes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yums: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/likeImage" />

    <TextView
        android:id="@+id/listItemYucks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yucks: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintEnd_toEndOf="@+id/YuckImage"
        app:layout_constraintTop_toBottomOf="@+id/YuckImage" />

    <ImageButton
        android:id="@+id/likeImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        app:layout_constraintLeft_toLeftOf="@+id/listItemSubject"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/yum_emoji" />

    <ImageButton
        android:id="@+id/YuckImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:padding="0dp"
        android:scaleType="fitCenter"
        app:srcCompat="@drawable/puke_emoji"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Here is what it should like it:

And here is output:

Aman Kumar · Answer 1 · 2019-10-12T20:11:08.297

Use this below code it looks as your expected output

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" // Use wrap_content for single item
        android:layout_marginStart="5dp" // Remove gravity centre
        android:layout_marginEnd="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp">

<TextView
        android:id="@+id/listItemSubject"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Subject: "
        android:textSize="15pt"
        app:fontFamily="sans-serif-medium"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

<TextView
        android:id="@+id/listItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Content: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-condensed-light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/listItemSubject" />

<TextView
        android:id="@+id/listItemLikes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yums: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/likeImage" />

<TextView
        android:id="@+id/listItemYucks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yucks: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintEnd_toEndOf="@+id/YuckImage"
        app:layout_constraintTop_toBottomOf="@+id/YuckImage" />

<ImageButton
        android:id="@+id/likeImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        app:layout_constraintLeft_toLeftOf="@+id/listItemSubject"
        app:layout_constraintStart_toStartOf="parent" // Constraint are missing
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/yum_emoji" />

<ImageButton
        android:id="@+id/YuckImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:padding="0dp"
        android:scaleType="fitCenter"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" // Constraint are missing
        app:srcCompat="@drawable/puke_emoji" />

</androidx.constraintlayout.widget.ConstraintLayout>

Afraid this didn't change the output. It may be because I am working with slightly older software - my code works on a Nexus but not a Pixel. I'll update my post, but thanks for your post. — Joe, Oct 12 '19 at 23:04

score 0 · Answer 2 · answered Oct 13 '19 at 09:57

You are using fixed size dimensions on your views (android:layout_width="53dp") and because different phones got different screen sizes the usage of fixed size values in your layout will make it not responsive to all screen size.

How to fix:

You can use those attributes to make your views responsive in size:

app:layout_constraintHeight_percent="0.xx"
app:layout_constraintWidth_percent="0.yy"

This will make your views responsive to the screen size (it doesn't matter what screen size)

Example:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_gravity="center"
  android:layout_marginStart="5dp"
  android:layout_marginEnd="5dp"
  android:layout_marginTop="5dp"
  android:layout_marginBottom="5dp">

<TextView
    android:id="@+id/listItemSubject"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.10"
    app:layout_constraintWidth_percent="0.25"
    android:gravity="center"
    android:text="Subject: "
    android:textSize="16sp"
    app:fontFamily="sans-serif-medium"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/listItemText"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:text="Content: "
    android:textSize="12pt"
    app:layout_constraintHeight_percent="0.1"
    app:fontFamily="sans-serif-condensed-light"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/listItemSubject" />

<TextView
    android:id="@+id/listItemLikes"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:text="Yums: "
    android:textSize="12pt"
    app:layout_constraintHeight_percent="0.1"
    app:fontFamily="sans-serif-light"
    app:layout_constraintEnd_toEndOf="@+id/likeImage"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/likeImage" />

<TextView
    android:id="@+id/listItemYucks"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_gravity="center"
    app:layout_constraintHeight_percent="0.1"
    android:text="Yucks: "
    android:textSize="12pt"
    app:fontFamily="sans-serif-light"
    app:layout_constraintEnd_toEndOf="@+id/YuckImage"
    app:layout_constraintStart_toStartOf="@+id/YuckImage"
    app:layout_constraintTop_toBottomOf="@+id/YuckImage" />

<ImageButton
    android:id="@+id/likeImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_gravity="center"
    app:layout_constraintHeight_percent="0.10"
    app:layout_constraintLeft_toLeftOf="@+id/listItemSubject"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/listItemSubject"
    app:layout_constraintWidth_percent="0.25" />

<ImageButton
    android:id="@+id/YuckImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:padding="0dp"
    android:scaleType="fitCenter"
    app:layout_constraintHeight_percent="0.10"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@+id/listItemSubject"
    app:layout_constraintWidth_percent="0.25" />

</androidx.constraintlayout.widget.ConstraintLayout>

How it will look:

Here is another option you can use:

If you don't want to use the first solution you can always use sdp:

This size unit scales with the screen size. It can help Android developers with supporting multiple screens.

Thanks for your feedback, but when I attempt to load the list with these views, the app quits, with the error: E/AndroidRuntime: FATAL EXCEPTION: main Process: edu.lehigh.cse216.nmb321, PID: 9263 java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.TextView.setText(java.lang.CharSequence)' on a null object reference — Joe, Oct 13 '19 at 17:08
Real about [What is a NullPointerException, and how do I fix it?](https://stackoverflow.com/questions/218384/what-is-a-nullpointerexception-and-how-do-i-fix-it) — Tamir Abutbul, Oct 14 '19 at 08:00

score 0 · Answer 3 · edited Oct 14 '19 at 08:00

0

For the subject (what I wanted centered) I changed android:layout_width="match_parent" to android:layout_width="415dp" It's not a perfect fix, but works for now.

edited Oct 14 '19 at 08:00

Tamir Abutbul

7,301
7
25
53

answered Oct 14 '19 at 00:14

Joe

85
1
10

score 0 · Answer 4 · answered Oct 15 '19 at 00:16

maybe you can try this :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    >

    <TextView
        android:id="@+id/listItemSubject"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Subject: "
        android:textSize="15pt"
        app:fontFamily="sans-serif-medium"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/listItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Content: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-condensed-light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/listItemSubject" />

    <TextView
        android:id="@+id/listItemLikes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yums: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/likeImage" />

    <TextView
        android:id="@+id/listItemYucks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yucks: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintEnd_toEndOf="@+id/YuckImage"
        app:layout_constraintTop_toBottomOf="@+id/YuckImage" />

    <ImageButton
        android:id="@+id/likeImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/yum_emoji" />

    <ImageButton
        android:id="@+id/YuckImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        app:srcCompat="@drawable/puke_emoji"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout list item aren't the same length even when matching to parent?

4 Answers4

How to fix:

Example: