android - Not the same interface display on different screens

Question

I'm new in android programming and my problem is that i created a simple calculator interface with some LienarLayouts and the result is not the same on the design display and my physical phone.

The result i get on the design

The result i get on my phone (Galaxy S7)

I couldn't find any solutions for that. For the operators it's some images that i put on different drawable folders (hdpi, xhdpi and xxhdpi).

i will put my xml file here.

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="@android:color/background_light">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="165dp"
            android:background="@color/clrBlue"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:gravity="right"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="50dp"
                android:text="567"
                android:textColor="@android:color/background_light"
                android:textSize="45sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="87dp"
            android:orientation="horizontal"
            android:weightSum="4">

            <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="7"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="8"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <Button
                android:id="@+id/button3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="9"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <ImageButton
                android:id="@+id/imageButton"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                app:srcCompat="@drawable/divide" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="87dp"
            android:orientation="horizontal"
            android:weightSum="4">

            <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="4"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="5"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <Button
                android:id="@+id/button3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="6"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <ImageButton
                android:id="@+id/imageButton"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                app:srcCompat="@drawable/multiply" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="87dp"
            android:orientation="horizontal"
            android:weightSum="4">

            <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="1"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="2"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <Button
                android:id="@+id/button3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                android:text="3"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <ImageButton
                android:id="@+id/imageButton"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/background_light"
                app:srcCompat="@drawable/subtract" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="192dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <Button
                    android:id="@+id/button15"
                    android:layout_width="150dp"
                    android:layout_height="wrap_content"
                    android:background="@color/clrBlue"
                    android:text="clear"
                    android:textSize="25sp" />
            </LinearLayout>

            <Button
                android:id="@+id/button3"
                android:layout_width="96dp"
                android:layout_height="match_parent"
                android:background="@android:color/background_light"
                android:text="0"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <ImageButton
                android:id="@+id/imageButton"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/background_light"
                app:srcCompat="@drawable/add" />
        </LinearLayout>

    </LinearLayout>

    <ImageButton
        android:id="@+id/imageButton5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@color/transparent"
        android:paddingRight="50dp"
        android:paddingTop="125dp"
        app:srcCompat="@drawable/equal" />
</RelativeLayout>

Answer 1

Relative and Linear layouts is not best choice for create calculator layout. To make this layout try use GridLayout or ConstraintLayout. It will be easier and more reliable solution

Edited

Answer 2

The result is different because of the different sizes. At the top of your layout display you will see that Nexus 4 is selected which is of screen size 4.7" and I think Galaxy S7 is of size 5.1".

Also, there can be a difference in density pixels. You can refer to the android document for different pixel densities. Support Different Pixel Densities