Constraint Layout not working properly despite adding constraints

Created Jan 17, 2019 Edited Jan 17, 2019

Viewed 3036

I am using Constraint Layout in a list item and having difficulties in getting it to work properly when the code is compiled, though it is coming up properly in the preview pane. I can use Relative Layout but still want to know why it does not work because I am facing this problematic behaviour in many other cases.

In the image below, this is how the layout is, with all the children constrained as desired.

For the sake of clarity, below image shows each child's constraints individually

This is how it renders in a recycler view :

List item scrolled down :

Source code for this layout :

<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_recent_activity">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_user_avatar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:src="@color/primary"/>

        <TextView
            android:id="@+id/tv_status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="TextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginLeft="24dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextTitle"
            app:layout_constraintBottom_toTopOf="@+id/tv_candidate_email"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/civ_user_avatar"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextSecondary"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_name" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="Assessment : "
            android:textColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_email" />

        <TextView
            android:id="@+id/tv_assessment_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextTitleBold"
            app:layout_constraintBottom_toBottomOf="@+id/textView7"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/textView7"
            app:layout_constraintTop_toTopOf="@+id/textView7" />
    </android.support.constraint.ConstraintLayout>
</layout>

Is there an explanation for this behavior so that I can understand how Constraint layout is actually working?

Update : After removing bottom constraints of Imageview and textView7constraint, the layout looks as below :

android-constraintlayout android

3 Answers

For all of your views instead of match_parent

use 0dp in the xml or select fill_parent in the design view

edited Jan 17, 2019

user_76360510

answered Jan 17, 2019

Please try below layout :

<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_user_avatar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="16dp"
            android:src="@color/primary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="TextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginLeft="24dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintStart_toEndOf="@+id/civ_user_avatar"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />


    <TextView
        android:id="@+id/tv_candidate_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="TextView"
        android:textAppearance="@style/TextSecondary"
        app:layout_constraintEnd_toStartOf="@+id/tv_status"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
        app:layout_constraintTop_toBottomOf="@+id/tv_candidate_name" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:maxLines="1"
            android:text="Assessment : "
            android:textColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_email" />

        <TextView
            android:id="@+id/tv_assessment_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="@+id/textView7"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/textView7"
            app:layout_constraintTop_toTopOf="@+id/textView7" />
    </android.support.constraint.ConstraintLayout>
</layout>

edited Jan 17, 2019

user_39473210

answered Jan 17, 2019

Try using Guidelines, for example horizontal, and you can fit all the view more easy there. If you combine it with 2 or 3 verticals (guidelines) it will be more easy to arrive it.

edited Jan 17, 2019

user_88563150

answered Jan 17, 2019