Android ConstraintLayout — layout_constraintDimensionRatio

A ConstraintLayout is a ViewGroup which allows you to Position and size Views in a flexible way. It is basically RelativeLayout on Steriods. The Views will be positioned and sized w.r.t other Views with the Use of Constraints.

In this Article , I am going to demonstrate how the constraint layout_constraintDimensionRatio can be used. Using this layout constraint we can define one dimension of a View (Either Height or Width) as a ratio of the other dimension.

Let me Explain the use case of this constraint. Suppose you have an ImageView whose width should match the Screen Width and the Image Aspect ratio should be 16:9, then in this case layout_constraintDimensionRatio will be useful to achieve the above given requirement. The below code will demonstrate how to use this.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:src="@drawable/top_image"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

Result of this layout xml

16:9 Resoultion ImageView

We need to set atleast one constrained dimension to be 0dp and set the attribute layout_constraintDimensionRatio to a given ratio (in the above case it is 16:9).

<Button 
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1:1"/>

The above xml will set the height of the Button to be same as width.

The ratio can be expressed in either of the ways :

1. A float value, representing the ratio between width and height.
2. A ratio in the form “width:height”.

We can also use ratio if both dimensions are set to 0dp. In this case the System sets the largest dimensions which satisfies all the constraints mentioned and maintains the given aspect ratio.

To constraint one specific side based on the dimensions of another , we can preappend W or H (to the ratio separated by a comma), to constraint the width or height respectively. For example, If one dimension is constrained by two targets (e.g. width is 0dp and centered on parent) you can indicate which side should be constrained, by adding the letter W(for constraining the width) or H(for constraining the height) in front of the ratio, separated by a comma.

<Button 
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,16:9"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

The above layout will set the height of the button following an aspect ratio of 16:9, while the width of the button will match the constraints to parent.

We can also set different dimension ratios for different dimension screens in Android. We can define the ratio strings in different dimens.xml

res/values-large/dimens.xml :

<string name="header_image_ratio">3:1</string>

res/values-sw600dp/dimens.xml :

<string name="header_image_ratio">2:1</string>

So that the image aspect ratio changes based on the Device dimensions. We just have to refer “header_image_ratio” from resources.

app:layout_constraintDimensionRatio="@string/header_image_ratio"