La mise en page des contraintes ne fonctionne pas correctement malgré l'ajout de contraintes

Question

J'utilise Constraint Layout dans un élément de liste et j'ai des difficultés à le faire fonctionner correctement lorsque le code est compilé, bien qu'il apparaisse correctement dans l'élément de liste preview pane . Je peux utiliser Relative Layout mais j'aimerais quand même savoir pourquoi cela ne fonctionne pas, car je suis confronté à ce comportement problématique dans de nombreux autres cas.

Dans l'image ci-dessous, voici comment se présente la mise en page, avec tous les enfants contraints comme souhaité.

Par souci de clarté, l'image ci-dessous montre les contraintes de chaque enfant individuellement.

Voici ce que cela donne dans un recycler view :

L'élément de la liste a défilé vers le bas :

Code source pour cette mise en page :

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

Existe-t-il une explication à ce comportement afin que je puisse comprendre le fonctionnement de la mise en page des contraintes ?

Mise à jour : Après avoir supprimé les contraintes de fond de Imageview y textView7 le schéma se présente comme suit :

Answer 1

Pour toutes vos vues au lieu de match_parent

utiliser 0dp dans le fichier xml ou sélectionner match_constraint dans la vue de conception

Answer 2

Veuillez essayer la mise en page ci-dessous :

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

Answer 3

Essayez d'utiliser des lignes directrices, par exemple horizontales, et vous pourrez y placer toutes les vues plus facilement. Si vous le combinez avec 2 ou 3 verticales (lignes directrices), il sera plus facile d'y arriver.