How to debug an unexpected Android layout?

Question

My ConstraintLayout is showing some strange plotting of items on app. It is showing the elements correct positions on the preview screen of the android studio but while running app on the phone the positions of the elements are strange.

Here is the screen shot of app:

My layout is:

<?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"
android:background="@drawable/background"
>
 <android.support.v7.widget.Toolbar 
 xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="34dp"
    android:layout_height="56dp"
    android:text="appbar"
    android:background="@android:color/transparent"
    tools:layout_editor_absoluteY="25dp"
    tools:layout_editor_absoluteX="8dp" />
<ImageView
    android:id="@+id/imgBooks"
    android:layout_width="272dp"
    android:layout_height="302dp"
    android:src="@drawable/books"
    tools:layout_editor_absoluteY="81dp"
    tools:layout_editor_absoluteX="56dp"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/toolbar" />

<ImageView
    android:id="@+id/imgName"
    android:layout_width="40dp"
    android:layout_height="35dp"
    app:srcCompat="@drawable/name"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="373dp"
    android:layout_below="@+id/imgBooks"
    android:layout_alignParentStart="true" />
<EditText
    android:id="@+id/etEmail"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:text="Email"
    android:inputType="textEmailAddress"
     tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="417dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/etPhone"
    android:layout_toEndOf="@+id/imgPhone" />
<ImageView
    android:id="@+id/imgEmail"
    android:layout_width="38dp"
    android:layout_height="34dp"
    app:srcCompat="@drawable/email"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="417dp"
    android:layout_alignTop="@+id/etEmail"
    android:layout_toStartOf="@+id/etEmail" />

<EditText
    android:id="@+id/etName"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="Name"
    tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="373dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/etEmail"
    android:layout_alignEnd="@+id/btn" />
<ImageView
    android:id="@+id/imgPhone"
    android:layout_width="35dp"
    android:layout_height="31dp"
    app:srcCompat="@drawable/phone"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="463dp"
    android:layout_alignTop="@+id/etPhone"
    android:layout_alignParentStart="true" />
<EditText
    android:id="@+id/etPhone"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:inputType="phone"
    android:text="Phone"
    tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="463dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/btn"
    android:layout_alignStart="@+id/etName"
    android:layout_alignEnd="@+id/btn" />

<Button
    android:id="@+id/btn"
    android:layout_width="344dp"
    android:layout_height="48dp"
    android:text="Download Brochure"
    android:layout_gravity="center_vertical|center_horizontal"
    tools:layout_editor_absoluteX="20dp"
    tools:layout_editor_absoluteY="514dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:background="@drawable/curves"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true" />

</android.support.constraint.ConstraintLayout>

Answer 1

The problem is you are not using constraints at all which is the whole point of constraint layout.

For example, if you don't use constraints on Download Brochure button and use only tools:layout_editor_absoluteX and tools:layout_editor_absoluteY attributes, the button stays at the position where you put it on the editor but when you compile the app, the button goes top left corner.

You need to add those to Download Brochure button, then set its location. So it will be on the same position in every possible situation.

• app:layout_constraintLeft_toLeftOf="parent",

• app:layout_constraintRight_toRightOf="parent"

But I suggest you to do it on editor while playing around with constraint layout which is much easier.

You can also watch this video. https://www.youtube.com/watch?v=sO9aX87hq9c. It helps a lot.