This view is not constrained vertically. At runtime it will jump to the left unless you add a vertical constraint

New Layout editor in Android Studio 2.2 keeps showing this error on views like EditText and Buttons. kindly help.Also, any links that help in onboarding with the new constraint layout would be appreciated.

code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/activity_main"
    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.set.email.MainActivity"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="81dp">

    <TextView
        android:text="To:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="7dp"
        tools:layout_editor_absoluteY="4dp"
        android:id="@+id/textTo"/>

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="24dp"
        android:id="@+id/editTo"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"/>

    <EditText
        android:layout_width="384dp"
        android:layout_height="42dp"
        android:inputType="textPersonName"
        android:ems="10"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="94dp"
        android:id="@+id/editSubject"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"/>

    <EditText
        android:layout_width="384dp"
        android:layout_height="273dp"
        android:inputType="textPersonName"
        android:ems="10"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="179dp"
        android:id="@+id/editMessage"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main"
        tools:layout_constraintLeft_creator="50"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"/>

    <Button
        android:text="Send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="140dp"
        tools:layout_editor_absoluteY="454dp"
        android:id="@+id/btnSend"
        app:layout_constraintLeft_toLeftOf="@+id/editMessage"
        tools:layout_constraintLeft_creator="0"
        app:layout_constraintRight_toRightOf="@+id/activity_main"
        android:layout_marginEnd="16dp"
        tools:layout_constraintRight_creator="0"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"/>


</android.support.constraint.ConstraintLayout>

Solution 1:

From Android Studio v3 and up, Infer Constraint was removed from the dropdown.

Use the magic wand icon in the toolbar menu above the design preview; there is the "Infer Constraints" button. Click on this button, this will automatically add some lines in the text field and the red line will be removed.

Solution 2:

Constraint layout aims at reducing layout hierarchies and improves performance of layouts(technically, you don't have to make changes for different screen sizes,No overlapping, works like charm on a mobile as well as a tab with the same constraints).Here's how you get rid of the above error when you're using the new layout editor.

Click on the small circle and drag it to the left until the circle turns green,to add a left constraint(give a number, say x dp. Repeat it with the other sides and leave the bottom constraint blank if you have another view below it.

Edit: According to the developers site, Instead of adding constraints to every view as you place them in the layout, you can move each view into the positions you desire, and then click Infer Constraints to automatically create constraints. more here

Solution 3:

Just copy this code to all components that you will drag.

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

example:

<TextView
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:text="To:"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:layout_editor_absoluteX="7dp"
    tools:layout_editor_absoluteY="4dp"
    android:id="@+id/textTo"/>

Solution 4:

Go to the Design, right click on your Widget, Constraint Layout >> Infer Constraints. You can observe that some code has been automatically added to your Text.

Solution 5:

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

This help me a lot