title: Why widgets are wrongly placed after executing my app?
body: <p>I'm using Android Studio. When I tried to execute my demo app, the components are changed from their original position. Why?</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"
  tools:context="com.kasamsp.myfirstapp.MainActivity"&gt;
  
      &lt;TextView
          android:layout_width="wrap_content"
          android:layout_height="40dp"
          android:text="Hi world"
          android:textColor="#000000"
          android:textColorLink="@android:color/black"
          android:textSize="30sp"
          android:textStyle="bold"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintHorizontal_bias="0.456"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.424" /&gt;
  
      &lt;Button
          android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Button"
          tools:layout_editor_absoluteX="137dp"
          tools:layout_editor_absoluteY="258dp" /&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>Actual one:
  <a href="https://i.stack.imgur.com/tl9Os.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tl9Os.png" alt=""></a></p>
  
  <p>After executing:<br>
  <a href="https://i.stack.imgur.com/ocJNm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ocJNm.png" alt=""></a>   </p>