Layout doesnt fit screenshot even when using dp

Question

I am new to Android programming and struggling with the designing of my Tic Tac Toe app. In the layout editor I have a button at the bottom of the screen. When I run the app on my phone, only the top of the button is visible because my screen is not big enough. Can anyone point me to the right direction and explain why it is the case?

Here is the picture from the app on my phone:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:background="#2190F3"
android:orientation="vertical" >


<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="20dp"
    android:textSize="40sp"
    android:textStyle="bold"
    android:textColor="#000000"
    android:text="@string/title" />

<LinearLayout
    android:layout_marginTop="100dp"
    android:layout_width="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_height="wrap_content"

    android:orientation="horizontal">

    <Button
        android:id="@+id/button3"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_weight="3"
        android:text="X" />

    <Button
        android:id="@+id/button"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_weight="3"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="120dp"
        android:layout_weight="3"
        android:layout_height="120dp"
        android:text="Button" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button4"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_weight="3"
        android:text="X" />

    <Button
        android:id="@+id/button5"
        android:layout_weight="3"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:text="Button" />

    <Button
        android:id="@+id/button6"
        android:layout_weight="3"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:text="Button" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button7"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_weight="3"
        android:text="X" />

    <Button
        android:id="@+id/button8"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_weight="3"
        android:text="Button" />

    <Button
        android:id="@+id/button9"
        android:layout_width="120dp"
        android:layout_weight="3"
        android:layout_height="120dp"
        android:text="Button" />
</LinearLayout>

<Button
    android:id="@+id/button11"
    android:layout_width="120dp"
    android:layout_height="60dp"
    android:layout_marginTop="50dp"
    android:layout_gravity="center_horizontal"
    android:text="Button" />

</LinearLayout>

Answer 1

This is because your preview screenshot is emulating a specific dpi and your actual physical device has some other dpi. It is a misunderstanding that by inserting size in DP, you'll get one to one similarity. For more on this in detail, check this

As for your case, suggestion would be to do away with hardcoded sizes and size your UI using 'weight'