Space above elements in ConstraintLayout

Question

I have a situation where there is some random space above UI elements in a ConstraintLayout. In the image - see the space above the textInput and seekBar elements.

We're building a form of custom fields based on their types - e.g. number input, text input, a switch, etc. We build the form dynamically based on the JSONArray of field types and content we receive.

Everything builds perfectly, except for three types: number input, text input and a slider (seekBar). I'm not providing the code generating the form, because I argue that if there was something in that code, there would have been this space above each fragment and not just these three specific types.

Here is the layout file for the number input (it looks exactly the same as the one for the text input except for the input type and the element ids):

<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="our.package.name.custom_fields.type_slider.SliderFragment">

<TextView
    android:id="@+id/displayText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
    android:visibility="gone"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/displayText">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/number_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />

</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>

And here is the layout file for the SeekBar:

<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="our.package.name.custom_fields.type_slider.SliderFragment">

<TextView
    android:id="@+id/displayText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<SeekBar
    android:id="@+id/slider_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/displayText" />

</android.support.constraint.ConstraintLayout>

Any ideas?

Answer 1

The solution ended up being the way I'm chaining the elements.

I thought the TextView is the "anchor" so I constrained its top, left, right and bottom to the parent. Then I chained the other element(s) to it - the top of the TextInputLayout was constrained to the bottom of the TextView.

When I changed that around, the space issue was resolved.

So now, the top, left, right and bottom of the TextInputLayout is constrained to the parent and the bottom of the TextView is constrained to the TextInputLayout.

Behold:

<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="wrap_content"
tools:context="our.package.name.custom_fields.type_slider.SliderFragment">

<TextView
    android:id="@+id/displayText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
    app:layout_constraintBottom_toTopOf="@+id/input_layout"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/text_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textCapSentences" />

</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>

Answer 2

You ask the TextView to be center in his parent and then you asked from TextInputLayout to be below the @+id/displayText.
Try to change the centered of this controller:

<TextView
    android:id="@+id/displayText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
    android:visibility="gone"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />