Change vertical space between elements using guidelines in constraint layout, Android

Question

I am new to constraints layout. I want to build a very basic UI in which there are four views with equal spaces between them. Now what I want is that when I run the code on smaller device the spaces between elements should be less and when I run it on a tab, the spaces increase.

Upon searching, i came across this:

How to make ConstraintLayout work with percentage values?

Now i know how to add guidelines with percentage, but I am not completely clear still.

Am I supposed to place a horizontal guideline after every view? And anchor the view with its top and bottom guideline? But isn't it two much of work? For 4 views do I need to put 8 guidelines?
If I place a horizontal guideline on 50% of screen, and want to use it as anchor, which constraints will I apply on other views on its top?

If anyone can clear my understanding, it would be highly appreciated.

score 1 · Answer 1 · answered May 18 '18 at 07:34

1

You can implement via vertical chain and horizontal chain.

read ConstraintLayout Chain.

answered May 18 '18 at 07:34

Abhay Koradiya

2,068
2
15
40

3

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Enzokie May 18 '18 at 07:50

score 0 · Answer 2 · answered May 19 '18 at 22:15

The approach with Guidelines you describe would probably be the way to do it using the older ConstraintLayout version as discussed in the topic you linked. Now that the ConstraintLayout-1.1.0 is out it is possible to set percentage based dimensions for views by using the app:layout_constraintHeight_percent and app:layout_constraintWidth_percent.

In your case the best approach in my opinion would be to create a vertical chain of the views and set the desired height as percentage of the parent for each view. Assuming the total height percentage of all views would be less than 100%, the remaining space would then be equally divided between the views by using chain_spread_inside or chain_spread (default) attribute.

Example XML:

<?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=".MainActivity">

    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintVertical_chainStyle="spread_inside"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintBottom_toTopOf="@id/view2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constraintBottom_toTopOf="@id/view3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view1" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_dark"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintBottom_toTopOf="@id/view4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view2" />

    <View
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_green_dark"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view3" />

</android.support.constraint.ConstraintLayout>

Result with spread_inside chain style:

and with default spread chain style:

Change vertical space between elements using guidelines in constraint layout, Android

2 Answers2