ConstraintLayout - proportional width/height to self?

Question

I'm trying to figure out how to achieve the following behaviour using constraint layout:

Place a view in the center of the ConstraintLayout parent
Make the view width to be half of the parent's width
Make the view height equals to its width

(i.e - place a square in the center)

I tried to use this combination:

  android:layout_width="0dp"
  android:layout_height="0dp"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintDimensionRatio="2:1"

But I'm not sure how to continue from here

serg3z · Accepted Answer · 2018-04-04T11:15:32.627

30

You can do without Guideline it is easy.

Just use app:layout_constraintWidth_percent="0.5"

It is work in version ConstraintLayout:1.1.0-beta5 and later.

<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">

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/dark_red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

</android.support.constraint.ConstraintLayout>

edited Apr 04 '18 at 11:15

answered Apr 04 '18 at 10:26

serg3z

1,852
12
28

Thanks for the answer. However, when I copy and past this to the xml text editor, the preview shows that the square takes FULL width, instead of half width. I don't understand why. is it only happens for me? – dor506 Apr 04 '18 at 10:35
@dor506 Trouble with version ConstraintLayout, my version `implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta5'` – serg3z Apr 04 '18 at 11:03
Oh I see. I'm using 1.0.2. Thanks! – dor506 Apr 04 '18 at 12:39

score 12 · Answer 2 · answered Apr 03 '18 at 22:04

To make your child's width be a half from parent's, use Guidelines: left one is 0.25 percentage, and the right one is 0.75

Then, place your view between those guidelines.

And finally, set layout_constraintDimensionRatio to '1:1':

<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.support.constraint.Guideline
        android:id="@+id/guideline_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25"/>

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

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="@id/guideline_left"
        app:layout_constraintRight_toRightOf="@id/guideline_right"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

Thanks for the great answer! Don't you think using 3 elements is overkill for such minor request? I would expect that it will be able to achieve this only by the view element and required properties — dor506, Apr 04 '18 at 06:58
@dor506 Yes it is possible. https://stackoverflow.com/a/49648671/7825132 — serg3z, Apr 04 '18 at 10:27

score 8 · Answer 3 · answered Dec 06 '18 at 16:55

I don't see why you'd have to use complex Guideline systems when you could also just use:

app:layout_constraintWidth_percent="0.5"

for half the width of the parent and

app:layout_constraintDimensionRatio="1:1"

to achieve the same height as the width. This dimension ratio takes all numbers and even doubles.

Here is the entire code with center:

<?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">

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5" />

</android.support.constraint.ConstraintLayout>

Upvoting for `app:layout_constraintDimensionRatio="1:1"` – ror Apr 02 '19 at 13:42 — ror, Apr 02 '19 at 13:42

Yurii Kyrylchuk · Answer 4 · 2018-04-03T22:16:57.050

You can achieve this behavior using guidelines(Constraint to a guildeline). You should set two vertical guidelines with percentage (first - 25% & second - 75%) which will give you a half of parent's width. Then you should constraint your view to those guidelines by start/end. Also you should constraint it to parent by top/bottom and set your view's dimension ratio to 1:1 to make it square and centered.

<?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.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25" />

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

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="@id/guideline2"
        app:layout_constraintStart_toStartOf="@id/guideline1"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

ConstraintLayout - proportional width/height to self?

4 Answers4