Android layout not matching with device [Android Studio]

Question

Hi I am new to using android studio and I do not get why the layout that I am seeing in the preview of the IDE does not match with the ones that I am seeing on my screen. I am using Samsung J7 Prime.

This is what I see in the preview

however, this is what I see on my device.

this is what I see on my device.

Please help, thank you in advance.

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="65dp"
        android:layout_marginEnd="32dp"
        android:text="@string/original_price"
        app:layout_constraintBaseline_toBaselineOf="@+id/etNum1"
        app:layout_constraintEnd_toStartOf="@+id/etNum1"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="72dp"
        android:layout_marginTop="6dp"
        android:layout_marginEnd="60dp"
        android:text="@string/rate"
        app:layout_constraintEnd_toStartOf="@+id/etNum2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/etNum2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="65dp"
        android:layout_marginEnd="61dp"
        android:text="@string/discount"
        app:layout_constraintEnd_toStartOf="@+id/etNum3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/etNum3" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="65dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="46dp"
        android:text="@string/sales_price"
        app:layout_constraintEnd_toStartOf="@+id/etNum4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/etNum4" />

    <EditText
        android:id="@+id/etNum1"
        android:layout_width="0dp"
        android:layout_height="39dp"
        android:layout_marginTop="101dp"
        android:layout_marginEnd="75dp"
        android:autofillHints=""
        android:ems="10"
        android:inputType="number"
        android:labelFor="@id/etNum1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/etNum2"
        android:layout_width="0dp"
        android:layout_height="37dp"
        android:layout_marginTop="79dp"
        android:layout_marginEnd="72dp"
        android:layout_marginBottom="80dp"
        android:autofillHints=""
        android:ems="10"
        android:inputType="number"
        android:labelFor="@id/etNum2"
        app:layout_constraintBottom_toBottomOf="@+id/etNum3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="@+id/textView" />

    <EditText
        android:id="@+id/etNum3"
        android:layout_width="0dp"
        android:layout_height="34dp"
        android:layout_marginTop="143dp"
        android:layout_marginEnd="76dp"
        android:layout_marginBottom="143dp"
        android:autofillHints=""
        android:ems="10"
        android:inputType="number"
        android:labelFor="@id/etNum3"
        app:layout_constraintBottom_toTopOf="@+id/calculate"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:editable="false"/>

    <EditText
        android:id="@+id/etNum4"
        android:layout_width="0dp"
        android:layout_height="39dp"
        android:layout_marginTop="47dp"
        android:layout_marginEnd="72dp"
        android:autofillHints=""
        android:ems="10"
        android:inputType="number"
        android:labelFor="@id/etNum4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView4"
        app:layout_constraintTop_toBottomOf="@+id/etNum3"
        android:editable="false"/>

    <Button
        android:id="@+id/calculate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="14dp"
        android:layout_marginBottom="229dp"
        android:text="@string/compute"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView4" />

    <Button
        android:id="@+id/clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="29dp"
        android:text="@string/erase"
        app:layout_constraintStart_toStartOf="@+id/calculate"
        app:layout_constraintTop_toBottomOf="@+id/calculate" />

</android.support.constraint.ConstraintLayout>

You need to set the dimension for all the screen size in the dimens.xml @daniella — Brahma Datta, May 13 '19 at 12:16

score 1 · Accepted Answer · answered May 13 '19 at 16:28

You are using a fixed size in a lot of places for your views(for example android:layout_marginTop="79dp" and android:layout_height="37dp").

Because different phones got different screen size, when you are using a fixed size on your view you are making your layout less responsive.
If you want to place some view anywhere at your screen I would recommend using guielines and constraint your views into the guideline rather then give your view a fixed size value to fit the preview(don't forget that with fixed sizes what may fit one screen may not fit another screen).
For your desired layout you can simply use chains.

Here is an example of the layout that you want to achieve using cnostraintLayout and chains:

<?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"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/original_price"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintEnd_toStartOf="@+id/etNum1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/rate"
    app:layout_constraintBottom_toTopOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/discount"
    app:layout_constraintBottom_toTopOf="@+id/textView4"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView2" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/sales_price"
    app:layout_constraintBottom_toTopOf="@+id/calculate"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView3" />

<EditText
    android:id="@+id/etNum1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:autofillHints=""
    android:ems="10"
    android:inputType="number"
    android:labelFor="@id/etNum1"
    app:layout_constraintBottom_toBottomOf="@+id/textView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/textView"
    app:layout_constraintTop_toTopOf="@+id/textView" />

<EditText
    android:id="@+id/etNum2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:autofillHints=""
    android:ems="10"
    android:inputType="number"
    android:labelFor="@id/etNum2"
    app:layout_constraintBottom_toBottomOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="@+id/etNum1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/etNum1"
    app:layout_constraintTop_toTopOf="@+id/textView2" />

<EditText
    android:id="@+id/etNum3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:autofillHints=""
    android:editable="false"
    android:ems="10"
    android:inputType="number"
    android:labelFor="@id/etNum3"
    app:layout_constraintBottom_toBottomOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="@+id/etNum1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/etNum1"
    app:layout_constraintTop_toTopOf="@+id/textView3" />

<EditText
    android:id="@+id/etNum4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:autofillHints=""
    android:editable="false"
    android:ems="10"
    android:inputType="number"
    android:labelFor="@id/etNum4"
    app:layout_constraintBottom_toBottomOf="@+id/textView4"
    app:layout_constraintEnd_toEndOf="@+id/etNum1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/etNum1"
    app:layout_constraintTop_toTopOf="@+id/textView4" />

<Button
    android:id="@+id/calculate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:text="compute"
    app:layout_constraintBottom_toTopOf="@+id/clear"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView4" />

<Button
    android:id="@+id/clear"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="erase"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/calculate"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/calculate"
    app:layout_constraintTop_toBottomOf="@+id/calculate" />

</android.support.constraint.ConstraintLayout>

And it will look like this:

score 0 · Answer 2 · answered May 13 '19 at 11:57

Try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:gravity="center">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title 1" />


    <EditText
        android:id="@+id/etNum1"
        android:layout_width="wrap_content"
        android:layout_height="39dp"
        android:layout_marginStart="20dp"
        android:ems="10"
        android:hint="Title 1"
        android:inputType="number"
        android:labelFor="@id/etNum1" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title 2" />


    <EditText
        android:id="@+id/etNum2"
        android:layout_width="wrap_content"
        android:layout_height="39dp"
        android:layout_marginStart="20dp"
        android:ems="10"
        android:hint="Title 2"
        android:inputType="number"
        android:labelFor="@id/etNum1" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title 3" />


    <EditText
        android:id="@+id/etNum3"
        android:layout_width="wrap_content"
        android:layout_height="39dp"
        android:layout_marginStart="20dp"
        android:ems="10"
        android:hint="Title 3"
        android:inputType="number"
        android:labelFor="@id/etNum1" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title 4" />


    <EditText
        android:id="@+id/etNum4"
        android:layout_width="wrap_content"
        android:layout_height="39dp"
        android:layout_marginStart="20dp"
        android:ems="10"
        android:hint="Title 4"
        android:inputType="number"
        android:labelFor="@id/etNum1" />

</LinearLayout>


<Button
    android:id="@+id/calculate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    android:text="Button 1" />

<Button
    android:id="@+id/clear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="20dp"
    android:text="Button 2" />
</LinearLayout>

Hey @Dinesh Shingadiya, thank you for your answer and thank you for taking an active part in stack overflow community and helping others. Your suggested layout won't be responsive because you have a lot of fixed size values for your views, Check my answer, I think it can help you better understand ConstraintLayout. — Tamir Abutbul, May 13 '19 at 16:31

score 0 · Answer 3 · answered May 13 '19 at 13:44

0

Remove all constraints top of and remap them according to what should be on top of for example textView should be on top of textView1 Goodluck

answered May 13 '19 at 13:44

James Christian Kaguo

1,251
15
14

His problem was not with bad constraints, he was using fixed size on his views and that caused the problem. I am talking about this in my answer above – Tamir Abutbul May 13 '19 at 16:29

Android layout not matching with device [Android Studio]

3 Answers3