ConstraintLayout: percentage based dimensions

Question

I am able to set the position of the UI elements based on screen size using horizontal & vertical bias in constraint layout.

But the width and height of the UI elements are not changing based on screen size so it still looks imperfect.

So how i can able to achieve this?

below is my source code :

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

    tools:context="com.satizh.android.constraintlayouttest.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="125dp"
        android:layout_height="47dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:layout_weight="68"
        android:text="5%V30%H"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.050000012" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginTop="0dp"
        app:layout_constraintTop_toBottomOf="@+id/button"
        android:layout_marginRight="0dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="0.915"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="0dp"
        app:layout_constraintVertical_bias="0.138" />

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

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

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

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

</android.support.constraint.ConstraintLayout>

I have created some guidelines ( percentage wise ) so that we can guess how the UI button should actually look based on screen when we rotate the device. here is the gif for better understanding.

Possible duplicate of [How to make ConstraintLayout work with percentage values?](https://stackoverflow.com/questions/37318228/how-to-make-constraintlayout-work-with-percentage-values) — Yury Fedorov, Feb 25 '18 at 19:10

azizbekian · Accepted Answer · 2017-12-12T10:11:10.213

If you want the button to take all the horizontal space between two guidelines, then make its width be 0dp and constraint button's left and right edges to appropriate guidelines.

<Button
    android:layout_width="0dp"
    app:layout_constraintStart_toEndOf="@id/guideline3"
    app:layout_constraintEnd_toStartOf="@id/guideline4"
    ... />

You'll get this output for portrait:

And this for landscape:

For addressing the vertical space, make the height 0dp and constraint button's top and bottom edges to appropriate guidelines.

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

    tools:context="com.satizh.android.constraintlayouttest.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"

        android:layout_marginTop="0dp"
        android:layout_weight="68"
        android:text="5%V30%H"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintLeft_toLeftOf="@+id/guideline3"
        app:layout_constraintRight_toLeftOf="@+id/guideline4"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:text="box"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintLeft_toLeftOf="@+id/guideline5"
        app:layout_constraintRight_toLeftOf="@+id/guideline6"
        app:layout_constraintTop_toTopOf="@+id/guideline7"
        app:layout_constraintHorizontal_bias="0.0" />

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

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

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

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

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

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

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline7"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2994129" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline8"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.42" />

</android.support.constraint.ConstraintLayout>

Corresponding output:

any other way without using the guidelines? your solution works and for the height i did similar approach ( setting height dp to 0 and using guidelines ) now its good to see both vertical and as well as horizontal but its using guidelines. i included guidelines just to explain the problem but i will be happy if there is any other way to do it which will be helpful along with horizontal and vertical bias. — Satizh J, Dec 12 '17 at 08:42
between thanks for answering. i am new to android development so i am not sure about which one is good approach (bias or guidelines). whats your thought about it? — Satizh J, Dec 12 '17 at 08:44
If you need to position a view on an exact percent location on screen - `Guideline`s are good to go. — azizbekian, Dec 12 '17 at 08:46
thats great. big thanks azizbekian. i had to edit the answer to suits the question. feel free to review it. — Satizh J, Dec 12 '17 at 09:12

score 1 · Answer 2 · answered Dec 12 '17 at 07:43

1

you seem to have forgotten to set your constraints for the buttons apparently

android:layout_constraintLeft_toRightOf="@+id/guidelineX"

and not parent

you may also click on the small circles and drag them to the guidelines in the layout view

answered Dec 12 '17 at 07:43

callMeRoka

46
5

ConstraintLayout: percentage based dimensions

2 Answers2