title: How to center multiple Views together using ConstraintLayout?
body: <h2>Background</h2>
  
  <p>Google has announced a new layout called "<a href="http://tools.android.com/tech-docs/layout-editor" rel="noreferrer"><strong>ConstraintLayout</strong></a>" that's supposed to be the ultimate layout, that could replace all of the layouts while staying flat (without nested layouts) and have better performance.</p>
  
  <h2>The problem</h2>
  
  <p>Thing is, I barely see any tutorials for it that could help me on this matter, other than the video presented on Google IO. </p>
  
  <p>What I am trying to do is, given that I have a vertically-centered LinearLayout within another layout - convert them both into a single ConstraintLayout.</p>
  
  <p>After all, this is the purpose of this new layout...</p>
  
  <p>The layout I wish to deal with looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/145Fv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/145Fv.png" alt="enter image description here"></a></p>
  
  <p>Notice that the views in the center are only centered vertically, and that the 2 textViews are to the right of the ImageView, which is also centered vertically.</p>
  
  <p>This all works well with RelativeLayout, which has the LinearLayout of the 2 TextViews, but I wish to know how to convert them into a single ConstraintLayout.</p>
  
  <p>Here's a sample XML of what I've shown:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"&gt;
  
      &lt;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"/&gt;
  
      &lt;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"&gt;
  
          &lt;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"/&gt;
  
          &lt;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"/&gt;
      &lt;/LinearLayout&gt;
  
      &lt;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"/&gt;
  
      &lt;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"/&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <h2>What I tried</h2>
  
  <p>I tried to read some articles and watch some videos of Google :</p>
  
  <ul>
  <li><a href="https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0" rel="noreferrer">https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0</a></li>
  <li><a href="https://www.youtube.com/watch?v=sO9aX87hq9c" rel="noreferrer">https://www.youtube.com/watch?v=sO9aX87hq9c</a></li>
  <li><a href="https://youtu.be/csaXml4xtN8?t=1693" rel="noreferrer">https://youtu.be/csaXml4xtN8?t=1693</a></li>
  </ul>
  
  <p>That didn't help, so I tried to using it, hoping I will find out how to use it myself.
  But I can't find out how to do it. I tried using the feature to convert the layouts, but this makes a huge mess of the views and puts additional margins that I don't want to have.</p>
  
  <h2>The question</h2>
  
  <p>How can I convert the 2 layouts into a single ConstraintLayout ? </p>