DEV Community: Sagar Malhotra

DP vs SP vs DPI vs PX in Android

Sagar Malhotra — Sun, 28 Jul 2024 15:47:30 +0000

We use some standard Units of measurement to make sure everyone is on the same table when we are talking about sizes, in real world, and in the Android world.

Even if you are not aware of a single term here, don’t worry I will start from the basics and explain the actual difference between all these Size-related Units used in Android.

Let’s understand the basics:

Screen Size:

Screen size is the diagonally calculated size of your screen. This is generally calculated in Inches, which is a real-world Unit of measurement for sizes.

PX or Pixels:

These are the smallest units of display on a screen. Each pixel represents a single point of color, or you can also consider it as a dot that represents a single color.
There are hundreds of dots present on your screen that show some specific color patterns to form an image.

Screen Resolution:

Screen resolution is the number of pixels a display can show in each dimension (vertical and horizontal).

You might have heard a screen resolution is 1920 × 1080 pixels or 720 × 1280 pixels. That simply means 1920 pixels are there on the screen vertically and 1080 pixels are there horizontally.

Note: More Resolution does not always mean more screen size.
Suppose there is a device with just 720*1280 resolution with 6 inches of screen size and another device with 1920*1080 resolution with the same 6 inches of screen size. So, we will see a significant difference in the quality of screens on both devices because of the terms called Density and PPI.

Density:

In general: Density is essentially a measurement of how tightly matter is packed together.
Same here, density means how many no. of pixels are present in a particular area on your screen.
The more the no. of pixels present in an area more will be the density and screen quality.
The screen with high resolution has comparatively smaller pixel sizes so that there can be more density(more pixels tightly packed together).

PPI: Pixel per inch.

Density ∝ PPI ∝ Screen Quality ∝ (1/Pixel)

That is why a 6-inch screen with a higher resolution of 1920*1080 will have more pixels in a small area and hence more colors can be generated in a small area of the screen and hence better the quality.

DPI or Dots per Inch:

To measure the above-mentioned density of the screen, we use this DPI.

It simply means how many no. of pixels are present in one inch of the size.

The base DPI is 160 dpi which corresponds to lower resolution screen devices and we call it MDPI.

DP or DIP or Density-Independent Pixels:

As the name suggests, is a virtual pixel unit that’s used as a unit of measurement to preserve the visible size of a user interface (UI) on screens with different densities.

It will remain the same from the user's perspective for different screen sizes but for different screen sizes, there will be different densities that correspond to different PX values.

That also means there is a standard formula that we can use to calculate the DP and PX relation based on the current screen DPI.

Formula:
PX = DP * (dpi/160)

For MDPI devices: dpi values is 160, put the value here:

PX = DP * (160/160)

PX = DP

1 PX is equal to 1 DP in MDPI devices.

Now, you can also calculate how many pixels correspond to 1 DP in different screen sizes.

SP or Scalable Pixels or Scale-Independent Pixels:

It’s like DP for Fonts. The default value of an sp is the same as the default value for a dp

It is the same as DP but it just takes care of the User system settings for Font-Sizes and scales the Fonts size if the user decides to increase/decrease the Font size from settings.

I hope this gives you the clarity on what you need to know and what you should use for displaying anything in the UI.

Use DP for any components, so that they won’t show different sizes to user for different screen sizes and resolutions.

Always use SP for Text components, so that it can respect the user system settings along with the resolution of screen.

Follow Sagar Malhotra for more such Android related content.

Add Multilingual support (Multiple Languages) to your Android App

Sagar Malhotra — Sat, 09 Mar 2024 13:55:53 +0000

Supporting multiple languages is important to scale up your application and reach the masses. Around 25% of India and 64% of Europe's working adult population are multilingual, and even the USA saw a ~194% increase in multilingual population. (Source)

Also, 65%+ consumers prefer to consume content in their preferred language, so this should be considered an important functionality that already comes with most of the TOP applications like Amazon, WhatsApp, Facebook, etc.

So, let’s build for multilingual world!

1. Organize your string resources.

Do not use hardcoded string values anywhere in your code

Do

Text(stringResources(R.string.follow_me))

Don’t

Text("Follow me")

Using strings.xml, we will have a common place for all our string resources and we can then support multiple languages by adding more strings.xml files.

Note: If you are having some complex string calculations/concatenations then still you can store them in strings.xml and format accordingly, maybe using MessageFormat

2. Add Multiple Languages

You already have one place for all your string resources, now you just have to translate every string resource to all other supported languages.

//Example of hindi strings.xml file
<resources>
    <string name="subscribe_to_sagar_malhotra">सागर मल्होत्रा की सदस्यता लें</string>
    <string name="language">हिन्दी</string>
</resources>

I am using an Android Studio Plugin named “AndroidLocalize” to perform this operation.

The translated values might need some changes, but it can help you save a lot of time.

3. Trigger language change

Whatever UI you are using for your language picker(here ExposedDropDownmenu), you have to trigger an onClick event to notify your OS that you have changed the locale of your application, so that the OS can also switch to that specific language’s strings.xml file.

onClick = {
    // set app locale given the user's selected locale
    AppCompatDelegate.setApplicationLocales(
        LocaleListCompat.forLanguageTags(
            "hi"//ISO for hindi
        )
    )
}

You need to pass the ISO-639 code of your language to send and notify your OS of changed language preferences.

3.1 Fixing the issue

This might not work for your application, as currently this method only works for AppCompatActivity, check if you are extending ComponentActivity for your specific Activity.

class MainActivity : AppCompatActivity() { ... }

After extending AppCompatActivity, you also need to make changes to your supported theme for the specific activity.

<style name="Theme.MultilingualApp" parent="Theme.AppCompat.Light.NoActionBar" />

Save Locale Preferences

For Android 12 or below, you have to either manually store the selected language preference value or just use this configuration in your AndroidManifest to allow AndoridX to handle the locale preferences itself.

<service//Inside application tag
    android:name="androidx.appcompat.app.AppLocalesMetadataHolderService"
    android:enabled="false"
    android:exported="false">
    <meta-data
        android:name="autoStoreLocales"
        android:value="true" />
</service>

5. Android OS Per-App Language Preferences

In Android 13 and above, the Android OS also supports changing the Per-App Language preference from system settings.

To notify your OS that your application also supports multiple languages, add the necessary configuration in your AndroidManifest file.

//Add this to your application tag
android:localeConfig="@xml/locale_config"

Define all your supported languages in the local_config.xml file


<?xml version="1.0" encoding="utf-8"?>
<locale-config xmlns:android="http://schemas.android.com/apk/res/android">
    <locale android:name="en" />
    <locale android:name="gu" />
    <locale android:name="hi" />
    <locale android:name="ar-AE" />
</locale-config>

Now, your application will also support changing the language from system settings too.

6. Avoid Activity Recreation

You might have noticed that your activity is recreating when you are changing your application locale, that is because changing the locale is also a kind of configuration change and by default your activity will be recreated whenever a configuration change occurs.

You can prevent this default behavior by informing your OS using AndroidManifest.

//Add this to your specific activity tag
android:configChanges="layoutDirection|locale"

Video:

I hope this feature helps you reach a wider audience, make sure to Follow me for more such useful content.