title: ConstraintLayout aspect ratio
body: <p>Consider the following layout file:</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="match_parent"&gt;
  
      &lt;android.support.constraint.ConstraintLayout
          android:id="@+id/activity_main"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#FF0000"
          android:paddingBottom="@dimen/activity_vertical_margin"
          android:paddingLeft="@dimen/activity_horizontal_margin"
          android:paddingRight="@dimen/activity_horizontal_margin"
          android:paddingTop="@dimen/activity_vertical_margin"&gt;
  
          &lt;ImageView
              android:layout_width="0dp"
              android:layout_height="0dp"
              android:background="#0000FF"
              android:padding="16dp"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintTop_toTopOf="parent"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintDimensionRatio="H,3:1"
              tools:layout_editor_absoluteX="16dp" /&gt;
  
      &lt;/android.support.constraint.ConstraintLayout&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>I am not sure how the app:layout_constraintDimensionRatio works. My understanding is the ratio will always be width:height. So 3:1 will always make the ImageView appear 3 times wider than height. The prefix H or W tells ConstraintLayout which dimension should respect the ratio. If it is H then it means width will be first computed from other constraints and then height will be adjusted according to the aspect ratio. However this is the result of the layout:</p>
  
  <p><a href="https://i.stack.imgur.com/ll6xd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ll6xd.png" alt="enter image description here"></a></p>
  
  <p>The height is 3 times larger than width which is unexpected. Can anyone explain to me how the dimensions are computed with respect to app:layout_constraintDimensionRatio setting?</p>