Constraintlayout Relative Distance In Percentage %

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 h

Solution 1:

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.ConstraintLayoutxmlns: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.Guidelineandroid:id="@+id/guideline"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_percent="0.5" /><Buttonandroid: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" /><TextViewandroid: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" /><Viewandroid: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" /><Buttonandroid: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>

Solution 2:

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

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns: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.Guidelineandroid: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.Guidelineandroid:id="@+id/text_view_guideline"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_percent="0.53" /><Buttonandroid: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" /><TextViewandroid: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>

Solution 3:

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.ConstraintLayoutandroid: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.LinearLayoutCompatandroid: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"
            ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="some text"/></androidx.constraintlayout.widget.ConstraintLayout>