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>

score 0 · Accepted Answer · answered Dec 07 '19 at 12:02

0

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'

answered Dec 07 '19 at 12:02

Azhar92

923
2
8
17

can you specify about your suggestion? Where do I need to put the weight and why? – Dec 07 '19 at 12:07

score 0 · Answer 2 · answered Dec 07 '19 at 12:03

Use this instead,

<?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:background="#2190F3"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp">

<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:text="@string/title"
    android:textColor="#000000"
    android:textSize="40sp"
    android:textStyle="bold" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="100dp"
    android:orientation="horizontal">

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

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

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

</LinearLayout>

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

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

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

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

</LinearLayout>

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

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

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

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

</LinearLayout>

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

I hope it will work. It sis not the best solution. The best solution for this is by using constraintlayout.

Thanks for oyur answer. Can you tell me your changes and why you did them? I want to understand what happened and what is the solution — , Dec 07 '19 at 12:09

Layout doesnt fit screenshot even when using dp

2 Answers2