ConstraintLayout relative distance in percentage %

Question

I am working with ConstraintLayout and I want to set a percentage margin top to the Textview Sample from the Button 2 placed at 52% of the screen.

3% is of course compared to the height of the screen.

The position should be relative from another UI components, guidelines reference only from the top (or bottom) of the screen

It's possible to do this exclusively via xml?

I know that is possibile to do this programmatically and with standard layouts with weight but I need (if exist) the XML solution.

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

    <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.5" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="32dp"
        android:layout_weight="10"
        android:background="#00FF00"
        android:text="SAMPLE"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button4" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="8dp"
        android:text="BUTTON 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

</android.support.constraint.ConstraintLayout>

this class was deprecated...but can you provide me an example with this? — appersiano, Nov 02 '17 at 09:17
You can use LinearLayout with android:weightSum parameter. Then you can add your views as per your requirement. Like Button with weight 0.5, and textview with weight of 0.3. You can add one view between button and textview. Give weight as 0.03 and make visibility as invisible. I know, it's not a proper way :P It's a kind of trick — Flutterian, Nov 02 '17 at 09:34
@appersiano As of now, I don't think there is a way to implement this using just XML. — Ajil O., Nov 03 '17 at 09:59
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:12

score 3 · Accepted Answer · answered Nov 03 '17 at 11:05

After some research I finally found a workaround.

With the beta version of the ConstraintLayoutLibrary 1.1.0-beta you can define the height in a percent mode.

    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.03"

So I created an empty view for create space. Anyway, there isn't yet a method to define the marginTop in percent mode.

So for my specific case:

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

    <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.5" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_weight="10"
        android:background="#00FF00"
        android:text="SAMPLE"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/spaceView" />

    <View
        android:id="@+id/spaceView"
        android:layout_width="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#FF0000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.03"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button4" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="8dp"
        android:text="BUTTON 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

</android.support.constraint.ConstraintLayout>

Is this working as it should be? It's still sad to see that even with so powerful and with so many features, `ConstraintLayout` is less popular. No worries, if you wouldn't have found it, I could help. — Lalit Fauzdar, Nov 03 '17 at 11:15

score 0 · Answer 2 · edited Nov 02 '17 at 12:04

I copied your code and added a guideline and used it inside the TextView

<?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/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

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

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:layout_weight="10"
        android:background="#00FF00"
        android:text="SAMPLE"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/text_view_guideline" />

</android.support.constraint.ConstraintLayout>

the problem is that I can have a view with fixed height between the button and the textview — appersiano, Nov 02 '17 at 09:49
yea you can do that too with the constraint layout.. add this code below the TextView `` — Geet Choubey, Nov 02 '17 at 09:51

score 0 · Answer 3 · answered Jan 06 '21 at 08:05

You can do this without guide line. Just make sure to set the child of the ConstraintLayout to hold:

app:layout_constraintVertical_bias="0.52"
app:layout_constraintHeight_default="wrap"

For example, we can place a self sized container in screen location of 0.52 vertically:

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintVertical_bias="0.52"
            app:layout_constraintHeight_default="wrap"
            >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="some text"/>


    </androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout relative distance in percentage %

3 Answers3

Linked