Android constraint layout changes it's appearance in Mobile

Question

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

I faced too many issues but resolved the problem and now it's pretty. Even it's working very well in landscape mode — Kaleem, Apr 06 '19 at 09:00
Use [SequenceLayout](https://github.com/yasharpm/SequenceLayout) instead. It's easy to understand and gives you more control over positioning your views. — Yashar PourMohammad, Apr 07 '19 at 07:37

Tamir Abutbul · Answer 1 · 2019-04-06T12:58:49.600

please notice that in both of your answer and question you are using fixed sizes on your view and that will not make your screen responsive to all screen size(you will keep seeing your problem in the future). I agree that you can use guidelines, but don't use them with fixed size, use them like this :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">


<EditText
    android:id="@+id/UrlEditText"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="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/guideline5"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="www.google.com" />

<Button
    android:id="@+id/DownloadButton"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@android:drawable/stat_sys_download_done"
    app:layout_constraintBottom_toTopOf="@+id/guideline5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline3"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/GoogleButton"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/FacebookButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/FacebookButton"
    app:layout_constraintTop_toTopOf="@+id/FacebookButton" />

<Button
    android:id="@+id/FacebookButton"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toStartOf="@+id/GoogleButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/YoutubeButton"
    app:layout_constraintTop_toTopOf="@+id/guideline6" />

<Button
    android:id="@+id/YoutubeButton"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/FacebookButton"
    app:layout_constraintEnd_toStartOf="@+id/FacebookButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/FacebookButton" />

<Button
    android:id="@+id/GmailButton"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/InstagramButton"
    app:layout_constraintEnd_toStartOf="@+id/InstagramButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/InstagramButton" />

<Button
    android:id="@+id/InstagramButton"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline7"
    app:layout_constraintEnd_toStartOf="@+id/TwitterButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/GmailButton"
    app:layout_constraintTop_toTopOf="@+id/guideline4" />

<Button
    android:id="@+id/TwitterButton"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/InstagramButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/InstagramButton"
    app:layout_constraintTop_toTopOf="@+id/InstagramButton" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.8" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.6" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.1" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.7" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

It will look something like this (the top right corner view is there but with no background so in the picture you can`t notice him):

Hope i understand you question - yes it will be responsive to different devices — Tamir Abutbul, Apr 06 '19 at 11:57
If that was not you meaning maybe try to ask me again and i will help you — Tamir Abutbul, Apr 06 '19 at 11:58
I mead to say it will work on all screen sizes, I applied these changes but it made download button larger — Kaleem, Apr 06 '19 at 12:04
OH ok, in that case, yes will work on all screen size, and for the size of your button - simply move your vertical guideline a bit and it will resize your view - that's the nice thing, it so responsive that you can can change your layout really fast — Tamir Abutbul, Apr 06 '19 at 12:10
weird... i have vertical line in my answer with `app:layout_constraintGuide_percent="0.8" ` , I can see it there — Tamir Abutbul, Apr 06 '19 at 12:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191361/discussion-between-kaleem-and-tamir-abutbul). — Kaleem, Apr 06 '19 at 12:21

Kaleem · Accepted Answer · 2019-04-09T02:28:55.943

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>

Android constraint layout changes it's appearance in Mobile

2 Answers2