Should Use "Sp" Instead of "Dp" for Text Sizes

What is the difference between px, dip, dp, and sp?

From the Android Developer Documentation:


  1. px

    Pixels - corresponds to actual pixels on the screen.


  2. in

    Inches - based on the physical size of the screen.

    1 Inch OR 2.54 centimeters


  3. mm

    > Millimeters - based on the physical size of the screen.


  4. pt

    > Points - 1/72 of an inch based on the physical size of the screen.


  5. dp or dip

    > Density-independent Pixels - an abstract unit that is based on the physical density of the screen. These units are relative to a 160
    dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both "dip" and "dp", though "dp" is more consistent with "sp".


  6. sp

    > Scaleable Pixels OR scale-independent pixels - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommended you
    use this unit when specifying font sizes, so they will be adjusted
    for both the screen density and the user's preference. Note, the Android documentation is inconsistent on what sp actually stands for, one doc says "scale-independent pixels", the other says "scaleable pixels".

From Understanding Density Independence In Android:

















































Density BucketScreen DensityPhysical SizePixel Size
ldpi120 dpi0.5 x 0.5 in0.5 in * 120 dpi = 60x60 px
mdpi160 dpi0.5 x 0.5 in0.5 in * 160 dpi = 80x80 px
hdpi240 dpi0.5 x 0.5 in0.5 in * 240 dpi = 120x120 px
xhdpi320 dpi0.5 x 0.5 in0.5 in * 320 dpi = 160x160 px
xxhdpi480 dpi0.5 x 0.5 in0.5 in * 480 dpi = 240x240 px
xxxhdpi640 dpi0.5 x 0.5 in0.5 in * 640 dpi = 320x320 px

dp or sp in Android Text

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.

  • Please work on your ConstraintLayout design skills by visiting constraintlayout.com
  • Your usage of LinearLayout weight is completely wrong
  • Your heavily using fixed dp size https://developer.android.com/training/multiscreen/screendensities
<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>

For setting font size what is most preferred in android sp, px or pt

sp: Scale Independent Pixel, scaled based on user’s font size preference.Fonts should use sp.

sp is preferrable for setting font size.

Android sp vs dp texts - what would adjust the 'scale' and what is the philosophy of support

It is exposed in the settings menu on some Android devices (manufacturer dependent). It may also be altered by some accessibility options (device-dependent).

In general, you should always used scale-independent pixels, especially for a large body of text.

However if your text has to fit into a bounding-box of known size then you should use density independent pixels in order to ensure that the text always fits properly and that all characters are visible regardless of the users' setting.

In a nutshell: would increasing the text-size by around 5sp result in the text being unreadable or mangle your UI? If so use density-independent pixels. If not, use scale-independent pixels. However you should generally aim to use scale-independent pixels wherever possible, which means designing a UI that can accommodate different text sizes.

When should we use dp or sp in layout?

Android recommends to use sp when you are setting font size and dp for everything else like width, length, height, margin, padding

SP vs DP in Android TV

sp exists on both Android mobile and TV so that people can change their font size as an accessibility option in their device's settings. dp and sp automatically scale with the pixel density, but sp is impacted by the font settings on the device.

So if a person using the TV app thinks the fonts on their TV are too small, they can change the setting and it will make the font larger everywhere for every app. Using dp to define text is essentially turning off the ability for the text in your app to respond to this font setting that the user has selected. This is why it is recommended to use sp instead of dp for text.

For more info, check out this SO post

Why should we use sp for font sizes in Android?

The dp has constant ratio transition to px: dp = px * ratio. Where ratio will never change on any particular device.

While sp (s for scaled) has scalable ratio: sp = px * ratio * scale. Where ratio never changes, but scale is user configurable. This scale can be used by people who need larger font sizes, for example, to use device more comfortably.

What should I use for margins, sp or dp?

sp for font sizes, dp for everything else. sp stands for Scale-independent Pixels, dp stands for dip=density independent pixels. Detailed explanation



Related Topics



Leave a reply



Submit