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

Question

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>

Answer 1

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

Answer 2

You need to drag the EditText from the edge of the layout and not just the other widget. You can also add constraints by just dragging the constraint point that surrounds the widget to the edge of the screen to add constraints as specified.

The modified code will look something similar to this:

    app:layout_constraintLeft_toLeftOf="@+id/router_text"
    app:layout_constraintTop_toTopOf="@+id/activity_main"
    android:layout_marginTop="320dp"
    app:layout_constraintBottom_toBottomOf="@+id/activity_main"
    android:layout_marginBottom="16dp"
    app:layout_constraintVertical_bias="0.29" 

Answer 3

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.

Answer 4

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

Answer 5

Follow these steps:
Right click on designing part > Constraint Layout > Infer Constraints

Answer 6

If Inferring the Constraints still gives you the error, just use this code:

app:layout_constraintBottom_toBottomOf="parent"

Answer 7

Go to the XML layout Text where the widget (button or other View) indicates error, focus the cursor there and press alt+enter and select missing constraints attributes.

Answer 8

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.

Answer 9

for example I have this

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

use RelativeLayout layout like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

Answer 10

Simply switch to the Design View, and locate the concerned widget. Grab the one of the dots on the boundary of the widget and join it to an appropriate edge of the screen (or to a dot on some other widget).

For instance, if the widget is a toolbar, just grab the top-most dot and join it to the top-most edge of the phone screen as shown in the image.

Answer 11

You have to change androidx.constraintlayout.widget.ConstraintLayout to RelativeLayout.

Answer 12

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

This help me a lot

Answer 13

Steps to add 4 screen constraints margins snippet to android studio IDE:

1. Go to File -> Settings -> search bar and search for live templates
2. select AndroidXML and click the add button + and select Live Template like shown in screenshot:
3. fill abbreviation of your choosing (I used ccc), click define and choose XML Attribute and add the template code:

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

screenshot: 4. click OK and you're done, when you add new component just type your abbreviation and press Enter and the constraints will be all set: