ConstraintLayout Vertical Chain Weight

Question

The Problem

---

I have simple calculator layout to test constraint layout. I have already achieved to create this layout: BasicLayout However the problem with this layout is, that there is empty space on the button. So I want to create a vertical chaing with weights to fill the complete screen.

What I tried

---

So I came up with this layout: (See Edit)

However the result is not what I want, instead it produces this layout: My Try

So somehow it ignores the vertical weights. Anyone an idea how to fix it ?

Edit

---

After some time I achieved this Closer, which is closer but the weight still changes nothing: New Code:

<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/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <View
        android:id="@+id/test"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="5"
        app:layout_constraintBottom_toTopOf="@+id/btn_space"
         />





    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_space"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text=""
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button155"
        app:layout_constraintTop_toBottomOf="@+id/test"
        app:layout_constraintBottom_toTopOf="@+id/btn_13"
     />


    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/button155"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="AC"
        android:textSize="20dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_space"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_space"
        app:layout_constraintRight_toLeftOf="@+id/btn_clr" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_clr"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="CLR"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/button155"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/button155"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button155" />


    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_13"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="13"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_14"
        app:layout_constraintTop_toBottomOf="@+id/test"
        app:layout_constraintBottom_toTopOf="@+id/btn_10" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_14"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="14"
        android:textSize="30dp"
        app:layout_constraintTop_toTopOf="@+id/btn_13"
        app:layout_constraintBottom_toBottomOf="@+id/btn_13"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_13"
        app:layout_constraintRight_toLeftOf="@+id/btn_15" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_15"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="15"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_13"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toTopOf="@+id/btn_13"
        app:layout_constraintBottom_toBottomOf="@+id/btn_13"
        app:layout_constraintLeft_toRightOf="@+id/btn_14"
        app:layout_constraintRight_toLeftOf="@+id/btn_very_good" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_very_good"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Sehr Gut"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_13"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_15"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_13" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="10"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_11"
        app:layout_constraintTop_toBottomOf="@+id/btn_13"
        app:layout_constraintBottom_toTopOf="@+id/btn_7" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_11"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="11"
        android:textSize="30dp"
        app:layout_constraintTop_toTopOf="@+id/btn_10"
        app:layout_constraintBottom_toBottomOf="@+id/btn_10"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_10"
        app:layout_constraintRight_toLeftOf="@+id/btn_12" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_12"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="12"
        android:textSize="30dp"
        app:layout_constraintTop_toTopOf="@+id/btn_10"
        app:layout_constraintBottom_toBottomOf="@+id/btn_10"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_11"
        app:layout_constraintRight_toLeftOf="@+id/btn_good" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_good"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Gut"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_10"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_12"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_10" />


    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="7"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_8"
        app:layout_constraintTop_toBottomOf="@+id/btn_10"
        app:layout_constraintBottom_toTopOf="@+id/btn_4" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="8"
        android:textSize="30dp"
        app:layout_constraintTop_toTopOf="@+id/btn_7"
        app:layout_constraintBottom_toBottomOf="@+id/btn_7"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_7"
        app:layout_constraintRight_toLeftOf="@+id/btn_9" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="9"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_7"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_8"
        app:layout_constraintRight_toLeftOf="@+id/btn_satisfying" />


    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_satisfying"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Befriedigend"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_7"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_9"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_7" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="4"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintRight_toLeftOf="@+id/btn_5"
        app:layout_constraintTop_toBottomOf="@+id/btn_7"
        app:layout_constraintBottom_toTopOf="@+id/btn_1" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="5"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_4"
        app:layout_constraintRight_toLeftOf="@+id/btn_6" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="6"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_5"
        app:layout_constraintRight_toLeftOf="@+id/txt_sufficient" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/txt_sufficient"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Ausreichend"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_6"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_4" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="1"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_2"
        app:layout_constraintTop_toBottomOf="@+id/btn_4"
        app:layout_constraintBottom_toTopOf="@+id/view_space_before_btn_0" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="2"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_1"
        app:layout_constraintRight_toLeftOf="@+id/btn_3" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="3"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_2"
        app:layout_constraintRight_toLeftOf="@+id/txt_inadequate" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/txt_inadequate"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Mangelhaft"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_1"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_1" />


    <View
        android:id="@+id/view_space_before_btn_0"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="1"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_0"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintTop_toBottomOf="@+id/btn_1"
        app:layout_constraintBottom_toBottomOf="parent"
       />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_0"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="0"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/view_space_before_btn_0"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/view_space_before_btn_0"
        app:layout_constraintRight_toLeftOf="@+id/btn_result" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_result"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="="
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/view_space_before_btn_0"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_0"
        app:layout_constraintRight_toLeftOf="@+id/txt_insufficient" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/txt_insufficient"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Ungenügend"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_0"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_result"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_0" />

Answer 1

Update: Your chain is still not well-formed. Change the XML for btn_13 to have its top constrained to the bottom of btn_space rather than to the bottom of test as shown in the following XML. Here is an image of the result after this change is made. (I changed the color of the top spacer to distinguish it on the screen.)

You can now change the weights to be what you want. Also, one of the views is missing a vertical weight. I forget which one, but you can easily find it. It doesn't seem to effect the result.

<TextView
    android:id="@+id/btn_13"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:gravity="center"
    android:text="13"
    android:textSize="30dp"
    app:layout_constraintBottom_toTopOf="@+id/btn_10"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_14"
    app:layout_constraintTop_toBottomOf="@+id/btn_space" />

---

I think that problem is that your chains are not well-formed. Make sure that your chains are linked top-to-bottom and bottom-to-top without a break. The following XML code demonstrates a vertical chain with equal weights. Here is an image of this looks in designer:

<?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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/View1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 1"
    app:layout_constraintBottom_toTopOf="@id/View2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp" />

<TextView
    android:id="@+id/View2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 2"
    app:layout_constraintBottom_toTopOf="@id/View3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View1"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />

<TextView
    android:id="@+id/View3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 3"
    app:layout_constraintBottom_toTopOf="@id/View4"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View2"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />

<TextView
    android:id="@+id/View4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 4"
    app:layout_constraintBottom_toTopOf="@id/View5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View3"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />

<TextView
    android:id="@+id/View5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 5"
    app:layout_constraintBottom_toTopOf="@id/View6"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View4"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />

<TextView
    android:id="@+id/View6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 6"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View5"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />
</android.support.constraint.ConstraintLayout>

By changing the weight of the top TextView to "3", you can see how the weights take effect in this image. As you can see, the top TextView is given three times the vertical space as the other views.