ConstraintLayout layout_constraintDimensionRatio not working

Question

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

As a result, I expected that the width and height would be 1: 1, but would not work.

what happened??

I have attached a code and a 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 an Android developer site about Constraintlayout. https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#DimensionConstraints

" :: . , , 0dp (.. MATCH_CONSTRAINT), layout_constraintDimentionRatio . :

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

. "

→ .

Answer 1

<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 ConstraintLayout. .

Answer 2

1.1.0 .

:

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

, DimensionConstraints:

Answer 3

, 4.

A4 , Viewpager, ImageView .

Constraint, Ratio. layout_constraintDimensionRatio .

So my xml, which is used to display the whole layout, looks like this, in my case I used app:layout_constraintDimensionRatio="1:1.27"both with: height, but the actual ratio isapp: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>

Answer 4

Pay attention to the last line, adding restrictions on the edges, which complicates the work.

You can also use the design view in Studio and drag and drop 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"/>