My items are all messed up when I run the app on my phone

Question

When I design the app in android studio everything is where it belongs. Why when I view it on my phone everything is messed up?

Studio

On phone

I use Constraint layout. I tried changing API version to an older one, but nothing happened. Does it have something to do with resolutions? I can't use emulators I need it on my phone.

Activity XML code:

<?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">

<android.support.v7.widget.Toolbar
    android:id="@+id/my_toolbar"
    android:layout_width="393dp"
    android:layout_height="76dp"
    android:layout_marginEnd="16dp"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


<Button
    android:id="@+id/button8"
    android:layout_width="65dp"
    android:layout_height="55dp"
    android:layout_marginTop="348dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/button_open"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<Button
    android:id="@+id/button9"
    android:layout_width="65dp"
    android:layout_height="55dp"
    android:layout_marginTop="412dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/button_open"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view9"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="184dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view8"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="480dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view4"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="408dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view6"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="260dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view7"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="336dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<View
    android:id="@+id/view5"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="104dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView30"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="448dp"
    android:layout_marginEnd="244dp"
    android:layout_marginRight="244dp"
    android:text="@string/inbox_text6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView29"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="156dp"
    android:layout_marginEnd="188dp"
    android:layout_marginRight="188dp"
    android:text="@string/inbox_text2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView28"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="376dp"
    android:layout_marginEnd="244dp"
    android:layout_marginRight="244dp"
    android:text="@string/inbox_text5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView22"
    android:layout_width="75dp"
    android:layout_height="27dp"
    android:layout_marginTop="352dp"
    android:layout_marginEnd="324dp"
    android:layout_marginRight="324dp"
    android:text="@string/inbox_title5"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView23"
    android:layout_width="75dp"
    android:layout_height="27dp"
    android:layout_marginTop="416dp"
    android:layout_marginEnd="324dp"
    android:layout_marginRight="324dp"
    android:text="@string/inbox_title6"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />


<TextView
    android:id="@+id/textView18"
    android:layout_width="75dp"
    android:layout_height="27dp"
    android:layout_marginTop="272dp"
    android:layout_marginEnd="324dp"
    android:layout_marginRight="324dp"
    android:text="@string/inbox_title4"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView19"
    android:layout_width="173dp"
    android:layout_height="34dp"
    android:layout_marginTop="120dp"
    android:layout_marginEnd="228dp"
    android:layout_marginRight="228dp"
    android:text="@string/inbox_title2"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView20"
    android:layout_width="75dp"
    android:layout_height="27dp"
    android:layout_marginTop="208dp"
    android:layout_marginEnd="324dp"
    android:layout_marginRight="324dp"
    android:text="@string/inbox_title3"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView21"
    android:layout_width="137dp"
    android:layout_height="30dp"
    android:layout_marginTop="48dp"
    android:layout_marginEnd="264dp"
    android:layout_marginRight="264dp"
    android:text="@string/inbox_title1"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView24"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="300dp"
    android:layout_marginEnd="256dp"
    android:layout_marginRight="256dp"
    android:text="@string/inbox_text4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView27"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="232dp"
    android:layout_marginEnd="260dp"
    android:layout_marginRight="260dp"
    android:text="@string/inbox_text3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<TextView
    android:id="@+id/textView26"
    android:layout_width="wrap_content"
    android:layout_height="14dp"
    android:layout_marginTop="80dp"
    android:layout_marginEnd="216dp"
    android:layout_marginRight="216dp"
    android:text="@string/inbox_text1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<Button
    android:id="@+id/button5"
    android:layout_width="65dp"
    android:layout_height="55dp"
    android:layout_marginTop="196dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/button_open"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />

<Button
    android:id="@+id/button6"
    android:layout_width="65dp"
    android:layout_height="55dp"
    android:layout_marginTop="268dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/button_open"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar" />


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:weightSum="4">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Search" />

        <Button
            android:layout_width="52dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="Refresh" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="goToAnActivity"
            android:text="Send" />
    </LinearLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>

Answer 1

In Android, you need to consider the number of different screen sizes when developing an android application.

Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).

---

So what can you do to support different screen sizes?

• You can fix this by creating a single layout for every screen size but that's a lot of work.

• You can also define Relative Layout with android:weightSum and layout_weight

---

But there is an even better option:

Use ConstraintLayout with guidelines and Chains to support different screen sizes.

From the documentation:

The best way to create a responsive layout for different screen sizes is to use ConstraintLayout as the base layout in your UI. ConstraintLayout allows you to specify the position and size for each view according to spatial relationships with other views in the layout. This way, all the views can move and stretch together as the screen size changes.

And here is an example of a similar layout like you want to achieve:

<?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">

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginTop="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="62dp"
    android:layout_height="19dp"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView9"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView3" />

<TextView
    android:id="@+id/textView9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView10"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView4" />

<TextView
    android:id="@+id/textView10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView11"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView9" />

<TextView
    android:id="@+id/textView11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView12"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView10" />

<TextView
    android:id="@+id/textView12"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView13"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView11" />

<TextView
    android:id="@+id/textView13"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView14"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView12" />

<TextView
    android:id="@+id/textView14"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView15"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView13" />

<TextView
    android:id="@+id/textView15"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView16"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView14" />

<TextView
    android:id="@+id/textView16"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView18"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView15" />

<TextView
    android:id="@+id/textView17"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView18" />

<TextView
    android:id="@+id/textView18"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView17"
    app:layout_constraintStart_toStartOf="@+id/textView3"
    app:layout_constraintTop_toBottomOf="@+id/textView16" />

<android.support.constraint.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.8" />

<android.support.constraint.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.1" />

<Button
    android:id="@+id/button9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="search"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button10"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline6" />

<Button
    android:id="@+id/button10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="rfreshe"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button11"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button9"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="send"
    app:layout_constraintBottom_toBottomOf="@+id/button10"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button10"
    app:layout_constraintTop_toTopOf="@+id/button10" />

<Button
    android:id="@+id/button12"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="open"
    app:layout_constraintBottom_toBottomOf="@+id/textView17"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/textView18" />

<Button
    android:id="@+id/button13"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="open"
    app:layout_constraintBottom_toBottomOf="@+id/textView16"
    app:layout_constraintEnd_toEndOf="@+id/button12"
    app:layout_constraintTop_toTopOf="@+id/textView15" />

<Button
    android:id="@+id/button14"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="open"
    app:layout_constraintBottom_toBottomOf="@+id/textView14"
    app:layout_constraintEnd_toEndOf="@+id/button12"
    app:layout_constraintTop_toTopOf="@+id/textView13" />

<Button
    android:id="@+id/button15"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:text="open"
    app:layout_constraintBottom_toBottomOf="@+id/textView12"
    app:layout_constraintEnd_toEndOf="@+id/button14"
    app:layout_constraintTop_toBottomOf="@+id/textView11" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView9"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView4" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView18"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView16" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView11"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView10" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView13"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView12" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginTop="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/textView15"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView14" />

<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView17" />

<Button
    android:id="@+id/button8"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView17" />

<Button
    android:id="@+id/button16"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView17" />

</android.support.constraint.ConstraintLayout>

The result will look like this in the preview and on a real device:

---

And if you survived reading that long answer (I know, its long, who would read all of this?)

Here is something extra

Now, I know that at first look this may look like a lot of work and some may wonder if this is really worth the effort but here is why I believe ConstraintLayout is the proper way to build your UI:

• It's really user-friendly.

• ConstraintLayout is very easy and simple to learn.

• once you have learned it you will see that you are saving a lot of development time because making your UI is simply fast.

• Constraint layout is meant to support different screen sizes so no need to build a layout for every screen size (this also connect to the previous advantage- saving development time).

So happy coding, I hope that I could help with my answer.