ConstraintLayout aspect ratio

Your understanding for the way app:layout_constraintDimensionRatio works is correct. If you set app:layout_constraintDimensionRatio="H,3:1" then it means width will be first computed from other constraints and then height will be adjusted according to the aspect ratio. The only problem with your implementation is that you added app:layout_constraintBottom_toBottomOf="parent" to the ImageView, so that it caused app:layout_constraintDimensionRatio to be ignored.

Here's the layout to size your ImageView in 3:1 aspect ratio:

<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="match_parent"    android:background="#FF0000">    <ImageView        android:id="@+id/imageView"        android:layout_width="0dp"        android:layout_height="0dp"        android:layout_marginStart="16dp"        android:layout_marginTop="16dp"        android:layout_marginEnd="16dp"        android:background="#0000FF"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintDimensionRatio="H,3:1" /></android.support.constraint.ConstraintLayout>

and here's the result view:

Basically, we have

layout_constraintDimensionRatio(width:height)

EXAMPLE

<!-- button which have width = it's content and height = 1/2 width --><Button        android:layout_width="wrap_content"        android:layout_height="0dp"        app:layout_constraintStart_toStartOf="parent" <!-- I still think that we don't need this attribute but I when I don't add this, constraint not working -->        android:text="Button TEST RATIO 1"        app:layout_constraintDimensionRatio="2:1" />

Output

<!-- button which have width = it's content and height = 1/2 width --><Button        android:layout_width="wrap_content"        android:layout_height="0dp"        app:layout_constraintStart_toStartOf="parent"        android:text="Button TEST RATIO 2"        app:layout_constraintDimensionRatio="2" /> <!-- 2 here <=> 2:1 <=> 2/1 (1:1 <=> 1, 1/2 <=> 0.5, ....) ->

Output

<!-- button which have width = match_parent and height = 1/2 width --><Button        android:layout_width="match_parent"        android:layout_height="0dp"        android:text="Button TEST RATIO 3"        app:layout_constraintDimensionRatio="2" />

Output

<!-- button which have width = match constraint and height = 1/2 width --><Button        android:layout_width="0dp"        android:layout_height="0dp"        android:text="Button TEST RATIO 4"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintDimensionRatio="2" />

Output

DEMO: https://github.com/PhanVanLinh/AndroidConstraintLayoutRatio

Take a look at these ImageView properties:

    app:layout_constraintBottom_toBottomOf="parent"    app:layout_constraintTop_toTopOf="parent"    app:layout_constraintLeft_toLeftOf="parent"

These properties override the layout_constraintDimensionRatio due to which the ImageView is constrained to the bottom, top and left of the main parent resulting in the View occupying the left, top and bottom portions of the main screen.

    app:layout_constraintBottom_toBottomOf="parent"    app:layout_constraintTop_toTopOf="parent"    app:layout_constraintLeft_toLeftOf="parent"    app:layout_constraintRight_toRightOf="parent"

This would be one solution. You can omit layout_constraintBottom_toBottomOf if you want the View to appear on the top or vice-versa. It would probably be best to remove all the above constraints altogether except the layout_constraintDimensionRatio, which would be the most recommended solution.