Elements overlapping on each other in my android studio emulator

Question

I am new to Android Studio, when I created my app all my elements overlapped on each other. I am not sure how to edit this code. Please give me a detailed description.

Layout editor and emulator result

Code for the layout

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
    xmlns:android="schemas.android.com/apk/res/android"; 
    xmlns:app="schemas.android.com/apk/res-auto"; 
    xmlns:tools="schemas.android.com/tools"; 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.example.first.anew.MainActivity"> 

    <TextView
        android:layout_width="216dp"
        android:layout_height="60dp"
        android:text="Hello World!"
        tools:layout_editor_absoluteY="16dp"
        tools:layout_editor_absoluteX="61dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="45dp"
        android:text="Login"
        tools:layout_editor_absoluteY="343dp"
        tools:layout_editor_absoluteX="177dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="215dp"
        android:layout_height="65dp"
        android:text="username"
        tools:layout_editor_absoluteY="117dp"
        tools:layout_editor_absoluteX="61dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        app:layout_constraintGuide_begin="20dp"
        android:orientation="horizontal" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="217dp"
        android:layout_height="57dp"
        android:ems="10"
        android:inputType="textPassword"
        tools:layout_editor_absoluteY="218dp"
        tools:layout_editor_absoluteX="61dp" />
</android.support.constraint.ConstraintLayout>

Answer 1

Your emulator screen and the layout editor are different because of tools namespace. In a few words, it is a tool that helps you to better visualise the written code. This tool also generates constraints like tools:layout_editor_absoluteY="343dp", which inform the layout editor on how it should draw the views. The problem is that this constraints will not be present in your app code, resulting in that weird behaviour when all views are overlapped (since the above mentioned constraints are not used in the app code we can deduct that there are no constraint at all).

Since you are a beginner I would recommend to start with a LinearLayout or RelativeLayout because I think that ConstraintLayout is harder to understand, use and debug.