Android constraint layout changes it's appearance in Mobile

Layout is looking awesome but not in Mobile. How to overcome it!!!

tried to connect each view to parent separately, watched some tutorials to resolve the issue but it was not resolving the issue.I tried to connect each view with parent but it didn't resolved the issues in landscape mode.

 <?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="#FF1E38C9"
    tools:context=".MainActivity">

    <EditText
    android:id="@+id/UrlEditText"
    android:layout_width="280dp"
    android:layout_height="45dp"
    android:background="@android:color/transparent"
    android:ems="10"
    android:hint="Search url"
    android:inputType="textUri"
    android:textAlignment="center"
    android:textSize="25sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.045"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.001"
    tools:text="www.google.com" />

    <Button
    android:id="@+id/DownloadButton"
    android:layout_width="49dp"
    android:layout_height="44dp"
    android:background="@android:drawable/stat_sys_download_done"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.825"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.001" />

    <Button
    android:id="@+id/GoogleButton"
    android:layout_width="92dp"
    android:layout_height="41dp"
    android:background="#FF09E0F8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.843"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.371" />

    <Button
    android:id="@+id/FacebookButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:background="#FF09E0F8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.37" />

    <Button
    android:id="@+id/YoutubeButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:background="#FF09E0F8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.177"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.369" />

    <Button
    android:id="@+id/GmailButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:background="#FF09E0F8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.169"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.538" />

    <Button
    android:id="@+id/InstagramButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:background="#FF09E0F8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.499"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.536" />

    <Button
    android:id="@+id/TwitterButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:background="#FF09E0F8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.843"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.536" />


    </android.support.constraint.ConstraintLayout>

I was expecting same results as they were in Android studio

Use horizontal guidelines to limit views/buttons to a particular area and add chains by selecting each horizontal(left to right) view and then cycle chains(a button appearing at bottom of the current view) to change the gap in between.

Visit Official site for more https://developer.android.com/training/constraint-layout#constrain-chain

And you can follow this tutorial as well. Goodluck!!! https://www.youtube.com/watch?v=hqEfshM5Vfw

Hope it will help beginners

<?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/backgroundhomescreen"
tools:context=".MainActivity">

<EditText
    android:id="@+id/UrlEditText"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@android:color/transparent"
    android:ems="10"
    android:hint="Search url"
    android:inputType="textUri"
    android:textAlignment="center"
    android:textSize="25sp"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toStartOf="@+id/DownloadButton"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0"
    tools:text="www.google.com" />

<Button
    android:id="@+id/DownloadButton"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:background="@android:drawable/stat_sys_download_done"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guidelinevert"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0" />

<Button
    android:id="@+id/GoogleButton"
    android:layout_width="92dp"
    android:layout_height="41dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/google"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toStartOf="@+id/InstagramButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline3" />

<Button
    android:id="@+id/FacebookButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/facebook"
    app:layout_constraintBottom_toTopOf="@+id/guideline3"
    app:layout_constraintEnd_toStartOf="@+id/YoutubeButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/GmailButton"
    app:layout_constraintTop_toTopOf="@+id/guideline2" />

<Button
    android:id="@+id/YoutubeButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/youtube"
    app:layout_constraintBottom_toTopOf="@+id/guideline3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/FacebookButton"
    app:layout_constraintTop_toTopOf="@+id/guideline2" />

<Button
    android:id="@+id/GmailButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/gmail"
    app:layout_constraintBottom_toTopOf="@+id/guideline3"
    app:layout_constraintEnd_toStartOf="@+id/FacebookButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline2" />

<Button
    android:id="@+id/InstagramButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/instagram"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toStartOf="@+id/TwitterButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/GoogleButton"
    app:layout_constraintTop_toTopOf="@+id/guideline3" />

<Button
    android:id="@+id/TwitterButton"
    android:layout_width="90dp"
    android:layout_height="40dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/twitter"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/InstagramButton"
    app:layout_constraintTop_toTopOf="@+id/guideline3" />


<android.support.constraint.Guideline
    android:id="@+id/guidelinevert"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.84" />

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

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

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



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

</android.support.constraint.ConstraintLayout>