edittext jumps up even though its constrained

Question

I am new to android and working on a simple app. I have a forms page and would like the user to fill out when signing up for the app. My editext for the age and the dollarValue jumps up even though I have constrained it. I will post the xml down below.

provider_signup.xml

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


    <RadioButton
        android:id="@+id/radioButton4"
        android:layout_width="78dp"
        android:layout_height="22dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="36dp"
        android:layout_marginTop="8dp"
        android:text="Fixed"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/radioButton3"
        app:layout_constraintTop_toBottomOf="@+id/my_spinner"
        app:layout_constraintVertical_bias="0.076" />

    <ImageView
        android:id="@+id/faceImage"
        android:layout_width="91dp"
        android:layout_height="66dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.038"
        app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />

    <Spinner
        android:id="@+id/my_spinner"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.577" />

    <TextView
        android:id="@+id/insured"
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:layout_marginBottom="64dp"
        android:layout_marginStart="76dp"
        android:text="Insured"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:background="@color/colorAccent"
        android:id="@+id/saveButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="SAVE"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/ageTextView"
        android:layout_width="37dp"
        android:layout_height="24dp"
        android:layout_marginBottom="116dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:text="Age"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.047"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.98" />

    <TextView
        android:id="@+id/dollarTextView"
        android:layout_width="wrap_content"
        android:layout_height="21dp"
        android:layout_marginBottom="124dp"
        android:layout_marginEnd="104dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Dollar Value"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioButton3"
        app:layout_constraintVertical_bias="1.0" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Rate"
        android:textAlignment="center"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/insured"
        app:layout_constraintEnd_toStartOf="@+id/radioButton4"
        app:layout_constraintHorizontal_bias="0.621"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/my_spinner"
        app:layout_constraintVertical_bias="0.189" />

    <RadioButton
        android:id="@+id/radioButton3"
        android:layout_width="81dp"
        android:layout_height="19dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="52dp"
        android:layout_marginTop="8dp"
        android:text="Hourly"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/my_spinner"
        app:layout_constraintVertical_bias="0.07999998" />

    <EditText
        android:id="@+id/firstName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="First Name"
        app:layout_constraintBottom_toTopOf="@+id/lastName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/faceImage" />

    <EditText
        android:id="@+id/lastName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Last Name"
        app:layout_constraintBottom_toTopOf="@+id/Address"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.503"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.948" />

    <EditText
        android:id="@+id/Address"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Address"
        app:layout_constraintBottom_toTopOf="@+id/my_spinner"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.503"
        app:layout_constraintStart_toStartOf="parent" />

    <RadioButton
        android:id="@+id/yesRadioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="YES"
        app:layout_constraintBottom_toTopOf="@+id/saveButton"
        app:layout_constraintEnd_toStartOf="@+id/noRadioButton"
        app:layout_constraintHorizontal_bias="0.513"
        app:layout_constraintStart_toEndOf="@+id/insured"
        app:layout_constraintTop_toBottomOf="@+id/dollarTextView"
        app:layout_constraintVertical_bias="0.894" />

    <RadioButton
        android:id="@+id/noRadioButton"
        android:layout_width="wrap_content"
        android:layout_height="29dp"
        android:layout_marginBottom="68dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="NO"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.516"
        app:layout_constraintStart_toEndOf="@+id/insured" />

    <EditText
        android:id="@+id/ageEditText"
        android:layout_width="94dp"
        android:layout_height="25dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/dollarTextView"
        app:layout_constraintHorizontal_bias="0.81"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioButton4"
        app:layout_constraintVertical_bias="0.088" />

    <EditText
        android:id="@+id/dollarEditText"
        android:layout_width="64dp"
        android:layout_height="25dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.666"
        app:layout_constraintStart_toEndOf="@+id/dollarTextView"
        app:layout_constraintTop_toBottomOf="@+id/radioButton3"
        app:layout_constraintVertical_bias="0.088" />

</android.support.constraint.ConstraintLayout>

Answer 1

I copied your layout to android studio just to see what you were getting. You're having this issue because your views aren't aligned to one another yet you try to constrain them as using different references, so they end up moving independently. My advice to you is to organise the views that belong in the same line in layouts of their own and then constraint those layouts instead. You'll end up with the parent constraint layout that includes many embedded child layouts.

For example, add your 4 views for age and dollar value in one constraint layout like so:

<android.support.constraint.ConstraintLayout
        android:id="@+id/your_layout_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp">

        <TextView
            android:id="@+id/ageTextView"
            android:layout_width="37dp"
            android:layout_height="24dp"
            android:text="Age"
            android:textAlignment="center"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/ageEditText"
             />

        <TextView
            android:id="@+id/dollarTextView"
            android:layout_width="wrap_content"
            android:layout_height="21dp"
            android:text="Dollar Value"
            android:textAlignment="center"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/ageEditText"
            app:layout_constraintEnd_toStartOf="@id/dollarEditText"
             />

        <EditText
            android:id="@+id/dollarEditText"
            android:layout_width="64dp"
            android:layout_height="25dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/dollarTextView"
            app:layout_constraintEnd_toEndOf="parent"
             />

        <EditText
            android:id="@+id/ageEditText"
            android:layout_width="94dp"
            android:layout_height="25dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/ageTextView"
            app:layout_constraintEnd_toStartOf="@id/dollarTextView"
             />
    </android.support.constraint.ConstraintLayout>

You see how I added the padding to the parent and not the individual views. Since the parent is set to wrap around the children, and the children are set to expand to fit the parent, you end up with a clear layout where 4 views are perfectly aligned horizontally. Now do the same for every line in your screen that includes multiple views and add the constraints between those layouts instead of doing it for every view independently. You'll end up with a file that has the following structure:

<android.support.constraint.ConstraintLayout>
    <android.support.constraint.ConstraintLayout>
         <!--layout1 constraint start, end and top to parent-->
         <!--constraint bottom to top of layout 2 below-->
         <!--views to align horizontally-->
    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout>
        <!--layout2 constraint start and end to parent-->
        <!--constraint top to bottom of layout 1 and bottom to top of layout 3 below-->
        <!--views to align horizontally-->
    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout>
        <!--layout3 constraint start and end to parent-->
        <!--constraint top to bottom of layout 2 and bottom to top of layout 4 below-->
        <!--views to align horizontally-->
    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout>
        <!--layout3 constraint start, end and bottom to parent-->
        <!--constraint top to bottom of layout 3 above-->
        <!--views to align horizontally-->
    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

Answer 2

First of all, you don't need to constraint all 4 constraints on every single view. You can connect views with only 2 constraints. Onto your problem, constraint your editTexts to the TextViews that they should be right to.

I will paste the fixed code for your @+id/ageEditText and @+id/dollarEditText

<EditText
        android:id="@+id/ageEditText"
        android:layout_width="94dp"
        android:layout_height="25dp"
        android:layout_marginStart="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toEndOf="@+id/ageTextView"
        app:layout_constraintTop_toTopOf="@+id/ageTextView" />

    <EditText
        android:id="@+id/dollarEditText"
        android:layout_width="64dp"
        android:layout_height="25dp"
        android:layout_marginStart="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toEndOf="@+id/dollarTextView"
        app:layout_constraintTop_toTopOf="@+id/dollarTextView" />