ConstraintLayout layout_constraintDimensionRatio not working

Question

I used constraintLayout and layout_constraintDimensionRatio="1:1" (width is wrap_content, height is 0dp (match_constraint))

As a result, I expected width and height to be 1:1, but it's not working.

What is wrong?

I attached code and screenshot.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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">

    <TextView
        android:id="@+id/t1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="Hello World!11"
        app:layout_constraintDimensionRatio="1:1" />

</android.support.constraint.ConstraintLayout>

screenshot

I quote android developer site about Constraintlayout. https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#DimensionConstraints

Ratio :: You can also define one dimension of a widget as a ratio of the other one. In order to do that, you need to have at least one constrained dimension be set to 0dp (i.e., MATCH_CONSTRAINT), and set the attribute layout_constraintDimentionRatio to a given ratio. For example:
     <Button android:layout_width="wrap_content"
               android:layout_height="0dp"
               app:layout_constraintDimensionRatio="1:1" />
     
  will set the height of the button to be the same as its width.

but it was not working.

`match_parent` is not supported. You need to set `0dp` so `ConstraintLayout` set it accordingly. Check this http://stackoverflow.com/questions/37603751/set-width-to-match-constraints-in-constraintlayout?rq=1 — Farmer, May 20 '17 at 05:43
If you want to create then you can do it by another way. Check this http://stackoverflow.com/questions/37318228/how-to-make-constraintlayout-work-with-percentage-values — Farmer, May 20 '17 at 05:54
@Shailesh Thanks comment. I know match_parent is not supported. but it is only for views directly under ConstraintLayout (uncertain..) — pistolcaffe, May 20 '17 at 05:59
Actually, I modified ConstraintLayout width, height to 0dp, result is equals. — pistolcaffe, May 20 '17 at 06:00
When I add the side constraint attribute in the TextView, the ratio is applied. but above attached code does not apply the ratio. And I do not know the difference between them. — pistolcaffe, May 20 '17 at 06:04

score 37 · Accepted Answer · answered May 23 '17 at 07:32

You forget to add your constraints

<android.support.constraint.ConstraintLayout
    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">

    <TextView
        android:id="@+id/t1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="Hello World!11"
        app:layout_constraintDimensionRatio="1" />

</android.support.constraint.ConstraintLayout>

0dp is only applied to the child views of ConstraintLayout. Any view should apply the attribute rules of its parent.

I forgot I set the width to 0dp. However, I do not know why the example on the Android developer site shows that it works only when I insert it. — pistolcaffe, May 23 '17 at 12:18

score 15 · Answer 2 · answered Apr 16 '18 at 15:29

As off version 1.1.0 this has changed.

You can now define:

app:layout_constraintDimensionRatio="1:1"
app:layout_constraintDimensionRatio="W,1:1"
app:layout_constraintDimensionRatio="H,1:1"

Check the link below to find all the documentation regarding DimensionConstraints:

Link to the docs

score 1 · Answer 3 · answered May 11 '19 at 09:31

In my case I have a problem like i have to fill my layout inside container with A4 size paper ratio.

Problem

I am getting A4 size resume pages as images from backend so i have to append those images in Viewpager in which i am using ImageView to display those images.

Solution

I went through Constraint layout document in which Ratio section is there. So i can use layout_constraintDimensionRatio for solving my problem.

So my xml that is used to Display the whole Layout is following, in my case i have used app:layout_constraintDimensionRatio="1:1.27" as with:height ratio but the actual ratio is app:layout_constraintDimensionRatio="1:1.41"

<?xml version="1.0" encoding="utf-8"?>
<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="@color/orange">

    <!-- divider line which i used as restricting my A4 size container height-->

    <View
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/headline_title_color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias=".85"/>

    <!-- A4 size Image View-->

    <ImageView
        android:id="@+id/resumeContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="12dp"
        android:layout_marginTop="16dp"
        android:layout_marginRight="12dp"
        android:layout_marginBottom="16dp"
        android:background="@color/green"
        android:text="@string/change"
        android:src="@drawable/banner"
        app:layout_constraintBottom_toTopOf="@id/divider"
        app:layout_constraintDimensionRatio="1:1.27"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <!-- for Bottom two buttons -->

    <com.bold.job.utils.CustomButton
        android:id="@+id/preview"
        style="@style/tertiaryButtonStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:onClick="preview"
        android:text="@string/preview_resume"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/guideline"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/divider"
        />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <com.bold.job.utils.CustomButton
        android:id="@+id/preview2"
        style="@style/tertiaryButtonStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:onClick="preview"
        app:layout_constraintLeft_toRightOf="@id/guideline"
        app:layout_constraintRight_toRightOf="parent"
        android:text="@string/preview_resume"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/divider"
        />


</android.support.constraint.ConstraintLayout>

score -2 · Answer 4 · answered Jul 06 '17 at 09:34

Please notice the last line, adding constraints around the edges makes the constraint work.

You can also use the design view in Studio, and drag and drop the constraints between objects.

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Available chats" />

<ListView
    android:id="@+id/listChats"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/textView"/>

How does your answer solve the problem? The last line of your source code indicates just one constraint, but there should more constraints to make ratio works! — Eugene Brusov, Oct 03 '17 at 19:17

ConstraintLayout layout_constraintDimensionRatio not working

4 Answers4