Antecedentes

Google ha anunciado un nuevo diseño llamado "Restricción"se supone que ese es el diseño definitivo, que podría reemplazar todos los diseños mientras se mantiene plano (sin diseños anidados) y tener un mejor rendimiento.

El problema

La cuestión es que apenas veo tutoriales que me puedan ayudar en este asunto, aparte del video presentado en Google IO.

Lo que estoy tratando de hacer es, dado que tengo un LinearLayout centrado verticalmente dentro de otro diseño: conviértalos en un solo RestraintLayout.

Después de todo, este es el propósito de este nuevo diseño ...

El diseño con el que deseo tratar se ve así:

Observe que las vistas en el centro solo están centradas verticalmente, y que las 2 vistas de texto están a la derecha de ImageView, que también está centrada verticalmente.

Todo esto funciona bien con RelativeLayout, que tiene el LinearLayout de las 2 TextViews, pero deseo saber cómo convertirlos en un solo ConstraintLayout.

Aquí hay un XML de muestra de lo que he mostrado:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/listPreferredItemHeightSmall">

    <ImageView
        android:id="@+id/appIconImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/appDetailsContainer"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/appIconImageView"
        android:layout_toLeftOf="@+id/overflowView"
        android:layout_toRightOf="@+id/appIconImageView"
        android:layout_toStartOf="@+id/overflowView"
        android:orientation="vertical">

        <TextView
            android:id="@+id/appLabelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>

        <TextView
            android:id="@+id/appDescriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"

        tools:src="@drawable/ic_more_vert_black_24dp"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/isSystemAppImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/overflowView"
        android:layout_alignLeft="@+id/overflowView"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/overflowView"
        android:layout_alignStart="@+id/overflowView"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        app:srcCompat="@drawable/ic_warning_black_24dp"
        tools:ignore="ContentDescription"
        tools:src="@drawable/ic_warning_black_24dp"/>

</RelativeLayout>

Lo que probé

Traté de leer algunos artículos y ver algunos videos de Google:

https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0https://www.youtube.com/watch?v=sO9aX87hq9chttps://youtu.be/csaXml4xtN8?t=1693

Eso no ayudó, así que traté de usarlo, esperando descubrir cómo usarlo yo mismo. Pero no puedo descubrir cómo hacerlo. Intenté usar la función para convertir los diseños, pero esto crea un gran desorden en las vistas y pone márgenes adicionales que no quiero tener.

La pregunta

¿Cómo puedo convertir los 2 diseños en un solo RestraintLayout?