[SOLVED] Have an ImageView with same width and height in ConstraintLayout

Have an ImageView with same width and height in ConstraintLayout

How can we make ImageView width and height equal to width of parent ConstraintLayout? So it displays a full width square ImageView.

Generally how can one set HEIGHT of some widget equal to WIDTH of other?

Solution

The following layout will place a square blue image in the center of the parent ConstraintLayout. The key piece is app:layout_constraintDimensionRatio="1:1". Refer to the documentation for details.

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_constraintDimensionRatio to a given ratio.

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>