ConstraintLayout as RecyclerView Items

Question

I use ConstraintLayout as RecyclerView item. But now there are some problems that are displayed on the real machine and in the preview is not the same

The recyclerView item layout as follow:

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/foreground_item_undo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="horizontal"
    app:layout_constraintWidth_default="spread">

    <com.lsl.wordhelper.view.RoundBgTextView
        android:id="@+id/tv_item_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:gravity="center"
        android:padding="4dp"
        android:text="G"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_item_explain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="释义："
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/tv_item_original"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_item_original"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="Good"
        android:textColor="@android:color/black"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@id/tv_item_explain"
        app:layout_constraintLeft_toRightOf="@id/tv_item_icon"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_item_translate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="很好"
        android:textColor="@android:color/black"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/tv_item_original"
        app:layout_constraintTop_toBottomOf="@id/tv_item_explain" />

    <TextView
        android:id="@+id/tv_item_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:gravity="right"
        android:text="2018/01/19"
        android:textColor="@color/text_color_date"
        app:layout_constraintBottom_toBottomOf="@id/tv_item_original"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

In Android Studio preview .

But on the phone

What's the problem?

Answer 1

Update oncreateView of the adapter with this :

//view is what we return from onCreateViewHolder
view.apply {
    this.layoutParams = RecyclerView.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
    )
}

This always works.

Answer 2

Contrary to what the accepted answer suggests, this has nothing to do with Chains.

This behavior is a bug in the constraint layout and was fixed in beta5, so upgrade your dependency to com.android.support.constraint:constraint-layout:1.1.0-beta5 or newer. It's out of beta now, so you should use 1.1.0.