Step-by-Step Implementation of Width-Height Ratio in Android

Let us see how to implement the width-height ratio in the elements inside Android.

Step 1: Opening/Creating a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Add Elements to your project UI

We will add 2 images inside the UI to demonstrate implementing the width-height ratio on elements.

Step 3: Set the width and height of the elements to 0dp.

Set the width and height of both elements to 0dp. Setting them to 0db helps us to size them using specific ratios

It can be done like this:

<ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

<ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:srcCompat="@tools:sample/avatars" />

When you set your width and height to 0dp, it allows your element to expand till the parent is full. This is the same as when water fills up a container without any constraint!

Step 4: Adding constraintDimensionRatio

To specify the width and height of the elements, we can add the ‘constraintDimensionRatio’ attribute and specify the width and height in this form: width: height

app:layout_constraintDimensionRatio=”width:height”

<ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars"
        app:layout_constraintDimensionRatio="2:1"/>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:srcCompat="@tools:sample/avatars"
        app:layout_constraintDimensionRatio="1:2"/>

Here is the final result of the two images:

You can see the actual width and height of the images using the blue border. The first one has a 2:1 width-height ratio, so the width is greater than the height and vice versa in image 2.

Step 4: Implementation in activity_main.xml

Here is the full XML code for the above UI in activity_main.xml file:

Using above activity_main.xml we can change the ratio of element we are using.

In Android Development, maintaining the height and width ratio of elements becomes an important aspect when it comes to responsive User Interface. Maintaining a consistent aspect ratio ensures that elements look good on different screen sizes and orientations. Maintaining the width and height aspect ratio is most important in Images, videos, and other objects where changing these ratios can ruin the quality.

The width and height ratio of an element can be set using the XML code of the front end will be used in Constraint Layout in Android.

Width-Height Ratio in Constraint Layout

The width-height ratio of an element can be set using the Constraint layout’s inbuilt attribute ‘layout_constraintDimensionRatio’. This attribute lets you specify what aspect ratio is to be maintained for the element. Example: ‘1:1’, or ‘2:1’ etc.