How to have same vertical weight in ConstraintLayout in Android?

Question

I am using Constraint layout, what I want is to have same vertical weight(width) between group1 and group2, and group2 and end of screen. In LinearLayout I would put one group to vertical LinearLayout and group2 as same to vertical Linear Layout and put that two layouts in parent vertical LinearLayout and set weight to 1. But how to do that in ConstraintLayout?

Here is what i want to achieve:

But I don't know how to do that in ConstraintLayout.

Here is my 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:id="@+id/constrait"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="47dp"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_weight="4"
tools:context="example.com.constrait.MainActivity">

<TextView
    android:id="@+id/textView7"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="TextView"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="24dp" />

<EditText
    android:id="@+id/editText6"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:background="@drawable/rounded_border_edittext"
    android:ems="10"
    android:inputType="textPersonName"
    app:layout_constraintEnd_toEndOf="@+id/textView7"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView7" />

<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="TextView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/editText6" />

<EditText
    android:id="@+id/editText8"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:background="@drawable/rounded_border_edittext"
    android:ems="10"
    android:inputType="textPersonName"
    app:layout_constraintEnd_toEndOf="@+id/textView8"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView8" />

Answer 1

You're on the right track by using CHAIN_SPREAD -- the elements will be spread out (default style). The default behavior of a chain is to spread the elements equally in the available space. If one or more elements are using MATCH_CONSTRAINT, they will use the available empty space (equally divided among themselves).

Remove the layout_constraintVertical_weight="4" from the constraintView.

So you put each group's textview and editText inside a vertical LinearLayout. You have two LinearLayouts, since there are two groups. Add layout_constraintVertical_weight="1" to both these LinearLayouts. And then you set both the LinearLayout's size to MATCH_CONSTRAINT (or “0dp”), the remaining space in the chain will be distributed among them according to weights defined in layout_constraintVertical_weight.

Answer 2

<?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:id="@+id/constrait"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="47dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView7"
        android:layout_width="0dp"
        android:layout_height="16dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView7" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="0dp"
        android:layout_height="15dp"
        android:text="TextView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <EditText
        android:id="@+id/editText8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

</android.support.constraint.ConstraintLayout>

The logic is top text view is aligned to parent top, the 2nd text view with all constraint aligned to parent, would be at the center of the screen.