title: How to debug an unexpected Android layout?
body: <p>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.</p>
  
  <p>Here is the screen shot of app:</p>
  
  <p><a href="https://i.stack.imgur.com/43CcT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/43CcT.jpg" alt="enter image description here"></a></p>
  
  <p>My layout is:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"
  &gt;
   &lt;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" /&gt;
  &lt;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" /&gt;
  
  &lt;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" /&gt;
  &lt;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" /&gt;
  &lt;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" /&gt;
  
  &lt;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" /&gt;
  &lt;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" /&gt;
  &lt;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" /&gt;
  
  &lt;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" /&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>