Android ConstraintLayouts are inconsistent

Question

In Android Studio I design a new Activity UI to look like the following:

But at runtime all the widgets (except the Min (sec) TextView) are piled on top of each other in the top-left cornern (I'd include a screenshot but Imgur or AWS S3 are having problems and SO won't allow me to upload it).

Here's the UI XML that I currently have:

<?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"
    tools:context="com.example.zacharvey.freedomawsapp.MatchSetupActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="156dp"
        android:layout_height="27dp"
        android:text="Match Setup"
        android:textSize="18sp"
        tools:layout_editor_absoluteY="1dp"
        android:layout_marginLeft="16dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="146dp"
        android:layout_height="23dp"
        android:layout_marginLeft="16dp"
        android:text="Consent Type:"
        android:textSize="14sp"
        tools:layout_editor_absoluteY="64dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/textView5" />

    <RadioButton
        android:id="@+id/consent.voice"
        android:layout_width="166dp"
        android:layout_height="31dp"
        android:checked="true"
        android:defaultFocusHighlightEnabled="false"
        android:text="Voice-Activated"
        tools:layout_editor_absoluteY="95dp"
        android:layout_marginRight="202dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/textView5" />

    <RadioButton
        android:id="@+id/consent.switch"
        android:layout_width="201dp"
        android:layout_height="28dp"
        android:text="Connected Switches"
        tools:layout_editor_absoluteY="126dp"
        android:layout_marginLeft="16dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/consent.voice" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="129dp"
        android:layout_height="19dp"
        android:layout_marginLeft="16dp"
        android:text="Go Offset:"
        tools:layout_editor_absoluteY="196dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/consent.switch" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Min (sec):"
        android:layout_marginLeft="16dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/textView7" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:text="Max (sec):"
        tools:layout_editor_absoluteY="290dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/textView8" />

    <EditText
        android:id="@+id/offset.min"
        android:layout_width="38dp"
        android:layout_height="32dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="1"
        tools:layout_editor_absoluteY="233dp"
        tools:layout_editor_absoluteX="107dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/textView9" />

    <EditText
        android:id="@+id/offset.max"
        android:layout_width="37dp"
        android:layout_height="38dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="4"
        tools:layout_editor_absoluteY="290dp"
        tools:layout_editor_absoluteX="108dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/offset.min" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="toO1Login"
        android:text="Next >>"
        tools:layout_editor_absoluteY="398dp"
        android:layout_marginLeft="16dp"
        layout_constraintLeft_toLeftOf="parent"
        layout_constraintTop_toBottomOf="@+id/offset.max" />

</android.support.constraint.ConstraintLayout>

My question: Why is my Min (sec) TextView the only widget displaying in the correct position? What do I need to do to the other widgets/views to make them position correctly as well?

Answer 1

Your views are not constrainted vertically. You should use some type of layout_constraintTop_toTopOf and such at some point.

Your "Min (Sec)" view is the only one displayed correctly because it is the only one constrainted vertically. Change your code to something like this:

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="156dp"
        android:layout_height="27dp"
        android:layout_marginLeft="16dp"
        android:text="Match Setup"
        android:textSize="18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/textView5"
        android:layout_width="146dp"
        android:layout_height="23dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:text="Consent Type:"
        android:textSize="14sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>

    <RadioButton
        android:id="@+id/consent.voice"
        android:layout_width="166dp"
        android:layout_height="31dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="202dp"
        android:checked="true"
        android:defaultFocusHighlightEnabled="false"
        android:text="Voice-Activated"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView5"/>

    <RadioButton
        android:id="@+id/consent.switch"
        android:layout_width="201dp"
        android:layout_height="28dp"
        android:layout_marginLeft="16dp"
        android:text="Connected Switches"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/consent.voice"/>

    <TextView
        android:id="@+id/textView7"
        android:layout_width="129dp"
        android:layout_height="19dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:text="Go Offset:"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/consent.switch"/>

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="Min (sec):"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView7"/>

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:text="Max (sec):"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView8"/>

    <EditText
        android:id="@+id/offset.min"
        android:layout_width="38dp"
        android:layout_height="32dp"
        android:layout_marginLeft="16dp"
        android:ems="10"

        android:inputType="textPersonName"
        android:text="1"
        app:layout_constraintBottom_toBottomOf="@id/textView8"
        app:layout_constraintLeft_toRightOf="@id/textView8"
        app:layout_constraintTop_toTopOf="@id/textView8"/>

    <EditText
        android:id="@+id/offset.max"
        android:layout_width="37dp"
        android:layout_height="38dp"
        android:layout_marginLeft="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="4"
        app:layout_constraintBottom_toBottomOf="@id/textView9"
        app:layout_constraintLeft_toRightOf="@id/textView9"
        app:layout_constraintTop_toBottomOf="@+id/offset.min"
        app:layout_constraintTop_toTopOf="@id/textView9"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:layout_marginLeft="16dp"
        android:onClick="toO1Login"
        android:text="Next >>"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

</android.support.constraint.ConstraintLayout>