dp or sp in Android Text

Viewed 263

I have a question about Android and I need your help. I have the following RadioButton:

<RadioButton
    android:id="@+id/r_Button_Standard"
    android:layout_width="95dp"
    android:layout_height="35dp"
    android:layout_weight="1"
    android:background="@drawable/background_selector"
    android:text="@string/radioButton_standard"
    android:checked="true"
    android:textColor="@drawable/text_selector"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.642"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginLeft="10dp"
    app:layout_constraintVertical_bias="0.671" />

It looks like this:RadioButton Now Android Studio generates a warning telling me to use "Should use "sp" instead of "dp" for text sizes" and further tells "There are cases where you might need to use dp; typically this happens when the text is in a container with a specific dp-size. This will prevent the text from spilling outside the container. Note however that this means that the user's font size settings are not respected, so consider adjusting the layout itself to be more flexible."

So now my question is what to do? Basically the text is in a container and it should obviously not spill outside of it. So I think I should use dp. What is meant by 'more flexible layout`?

Comment: Altough 'IntelliJ Amiya' closed this question and gave a link to a question that according to his point of view anseres my question (Should use "sp" instead of "dp" for text sizes) I have to say that in fact it does NOT. I am talking about text within a container not about general text.

Update: Here is my XML layout file:

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


    <ImageView
        android:id="@+id/imageView"
        tools:ignore="ContentDescription"
        android:layout_width="465dp"
        android:layout_height="262dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/test_dish_1" />

    <TextView
        android:id="@+id/cocktailName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test "
        android:textColor="#000000"
        android:textSize="28dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.482"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.434" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Zutaten: Zutat_1, Zutat_2, Zutat_3,\n Zutat_4, Zutat_5, Zutat_6"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.489"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textViewA"
        android:layout_width="95dp"
        android:layout_height="35dp"
        android:text="Option_2"
        android:textColor="#000000"
        android:textSize="22dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.012"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.671" />


    <ImageButton
        android:id="@+id/commentButton"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@null"
        android:contentDescription="comment_Button"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.799"
        app:srcCompat="@mipmap/comment" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/comment_TextView"
        android:textSize="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.025"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.729" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="95dp"
        android:layout_height="35dp"
        android:checked="true"
        android:text="Check"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.967"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.761" />

    <Button
        android:id="@+id/ordering_button"
        android:layout_width="163dp"
        android:layout_height="72dp"
        android:background="@drawable/custom_button"
        android:text="Bestellen"
        android:textAllCaps="false"
        android:textColor="#121212"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.867" />


    <TextView
        android:id="@+id/textViewS"
        android:layout_width="95dp"
        android:layout_height="35dp"
        android:text="Option_1"
        android:textColor="#000000"
        android:textSize="22dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.012"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.584" />

    <LinearLayout
        android:background="#FFD600"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:id="@+id/bottom_layout"
        android:layout_width="0dp"
        android:layout_height="60dp">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@drawable/test_dish_1"
            android:text="Back" />


        <Button
            android:layout_gravity="center_vertical"
            android:id="@+id/button2"
            android:layout_weight="1"
            android:text="Button2"
            android:layout_width="0dp"
            android:layout_margin="4dp"
            android:layout_height="wrap_content"/>


        <Button
            android:layout_gravity="center_vertical"
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="Button3"
            android:layout_margin="4dp"
            android:layout_height="wrap_content"/>

        <Button
            android:layout_gravity="center_vertical"
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="Button1"
            android:layout_margin="4dp"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <RadioGroup
        android:id="@+id/radioGroup_Size"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_bias="0.583"
        app:layout_constraintHorizontal_bias="0.862"

        app:layout_constraintTop_toTopOf="parent">




        <RadioButton
            android:id="@+id/r_Button_Small"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:text="Klein"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.319"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="10dp"
            app:layout_constraintVertical_bias="0.584" />

        <RadioButton
            android:id="@+id/r_Button_Medium"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:checked="true"
            android:text="Normal"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.962"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginLeft="10dp"
            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintVertical_bias="0.583" />

        <RadioButton
            android:id="@+id/r_Button_Large"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:text="Groß"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.962"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="10dp"
            app:layout_constraintVertical_bias="0.584" />

    </RadioGroup>

    <RadioGroup
        android:id="@+id/radioGroup_alcohol"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_bias="0.671"
        app:layout_constraintHorizontal_bias="0.872"

        app:layout_constraintTop_toTopOf="parent">

        <RadioButton
            android:id="@+id/r_Button_Less"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:text="Weniger"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.319"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.671" />

        <RadioButton
            android:id="@+id/r_Button_Standard"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:text="@string/radioButton_standard"
            android:checked="true"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.642"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="10dp"
            app:layout_constraintVertical_bias="0.671" />

        <RadioButton
            android:id="@+id/r_Button_More"
            android:layout_width="95dp"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:text="Mehr"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.962"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="10dp"
            app:layout_constraintVertical_bias="0.671" />


    </RadioGroup>
</android.support.constraint.ConstraintLayout>
2 Answers

Read this article to fully understand SP, DP and Piexel:

Medium Article

TL;DR

SP == DP , but user preferences for font size in device setting app will also be applied to

Consider a user has increased font size in settings and probably he would like to see a higher font size inside your app, sp would take care of that.

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


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="250dp"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/test_dish_1"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/cocktailName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Test "
        android:textColor="#000000"
        android:textSize="28dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.482"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Zutaten: Zutat_1, Zutat_2, Zutat_3,\n Zutat_4, Zutat_5, Zutat_6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.489"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cocktailName" />

    <TextView
        android:id="@+id/textViewA"
        android:layout_width="95dp"
        android:layout_height="35dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:text="Option_2"
        android:textColor="#000000"
        android:textSize="22dp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textViewS" />


    <ImageButton
        android:id="@+id/commentButton"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@null"
        android:contentDescription="comment_Button"
        android:scaleType="fitCenter"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:srcCompat="@mipmap/comment" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/comment_TextView"
        android:textSize="18dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.025"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textViewA" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:text="Check"
        app:layout_constraintBottom_toTopOf="@+id/ordering_button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup_alcohol" />

    <Button
        android:id="@+id/ordering_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:background="@drawable/custom_button"
        android:padding="16dp"
        android:text="Bestellen"
        android:textAllCaps="false"
        android:textColor="#121212"
        android:textSize="25sp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />


    <TextView
        android:id="@+id/textViewS"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:text="Option_1"
        android:textColor="#000000"
        android:textSize="22dp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <LinearLayout
        android:background="#FFD600"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:id="@+id/bottom_layout"
        android:layout_width="0dp"
        android:layout_height="60dp">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@drawable/test_dish_1"
            android:text="Back" />


        <Button
            android:layout_gravity="center_vertical"
            android:id="@+id/button2"
            android:layout_weight="1"
            android:text="Button2"
            android:layout_width="0dp"
            android:layout_margin="4dp"
            android:layout_height="wrap_content"/>


        <Button
            android:layout_gravity="center_vertical"
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="Button3"
            android:layout_margin="4dp"
            android:layout_height="wrap_content"/>

        <Button
            android:layout_gravity="center_vertical"
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="Button1"
            android:layout_margin="4dp"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <RadioGroup
        android:id="@+id/radioGroup_Size"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"

        android:layout_marginEnd="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="@+id/textViewS"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textViewS"
        app:layout_constraintTop_toBottomOf="@+id/textView3">


        <RadioButton
            android:id="@+id/r_Button_Small"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:padding="4"
            android:text="Klein"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.319"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.584" />

        <RadioButton
            android:id="@+id/r_Button_Medium"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:checked="true"
            android:padding="4dp"
            android:text="Normal"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.962"
            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.583" />

        <RadioButton
            android:id="@+id/r_Button_Large"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:padding="4dp"
            android:text="Groß"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.962"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.584" />

    </RadioGroup>

    <RadioGroup
        android:id="@+id/radioGroup_alcohol"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"

        android:layout_marginEnd="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="@+id/textViewA"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textViewA"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup_Size">

        <RadioButton
            android:id="@+id/r_Button_Less"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:padding="4dp"
            android:text="Weniger"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.319"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.671" />

        <RadioButton
            android:id="@+id/r_Button_Standard"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:checked="true"
            android:padding="4dp"
            android:text="@string/radioButton_standard"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.642"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.671" />

        <RadioButton
            android:id="@+id/r_Button_More"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@drawable/background_selector"
            android:padding="4dp"
            android:text="Mehr"
            android:textColor="@drawable/text_selector"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.962"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.671" />


    </RadioGroup>
</android.support.constraint.ConstraintLayout>

We prefer sp for texts on a screen because if the user wants to change the text size from settings (for example: small, medium, large) these texts are automatically scaled as per the screen. But in case of dp, every phone has different density of pixels ( for example: in a 4 x 4 square space, there may be 4 pixels in some phones and 16 pixels in some other phone), so it is not recommended to use dp.

Related