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.

Answer 1

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:

Answer 2

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