TextView inside ConstraintLayout clips text and layout_margin cant not be shown correctly

Question

I use : compile 'com.android.support.constraint:constraint-layout:1.0.2'

The main problems are：

1. layout_margin can't be shown correctly;
2. child textview's text is clipped.

Details as below:

This is my xml:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/darker_gray"
    android:padding="8dp">

    <ImageView
        android:id="@+id/reviewer_avatar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@color/colorAccent"
        android:contentDescription="@string/avatar"
        android:layout_margin="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/reviewer_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_name"
        android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/comment_floor"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toTopOf="@+id/reviewer_avatar"
        app:layout_constraintVertical_chainStyle="packed"/>

    <TextView
        android:id="@+id/comment_floor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_floor_text"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_name"/>

    <TextView
        android:id="@+id/comment_period"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:text="@string/comment_period_text"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/comment_floor"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_name"/>

    <TextView
        android:id="@+id/comment_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>
</android.support.constraint.ConstraintLayout>

This is my screenshot:

Answer 1

Here are mainly two problems

1. You missing to set right constraint for view with parent
2. There was an bug in ConstraintLayout with wrap_content which is resolved , now you have to use match_constraint(0dp) and layout_constraintWidth_default property to solve this issue add below two properties to largetext view

android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
app:layout_constraintRight_toRightOf="parent"

So your largetext view would be like

<TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>

Answer 2

I think I found the answer to child textview's text is clipped.

I change it：

<TextView
    android:id="@+id/comment_content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/large_text"
    android:textSize="16sp"
    app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
    app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>

to

<TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintRight_toRightOf="parent"/>

This would solve the problem !

But this way, TextView can't scalable，only fill width.

Finnaly, the better answer:

  <TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_name"
        android:textSize="16sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintLeft_toLeftOf="@+id/reviewer_name"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintWidth_default="wrap"/>