Android Assets

Android devices come in all shapes and sizes and display resolutions. This means providing uniform assets across devices is tedious and somewhat complicated.

DP (Density Pixel)

Google created a special type of unit, dp (density pixel), to make dealing with assets easier.

How is that easier?

This unit generalizes all various display densities into a single display. What does that mean? It means a 100 dp x 100 dp will display the exact same on any device regardless of the device's properties. So a 100 ppi device, 200 ppi device, 300 ppi device and 400 ppi device will also display the asset as the same size and same quality.

How does this magically happen?

It doesn't

Assets must be created in a very special way to let Android do it's thing. A designer needs to provide different assets for each generalized density type. What are these generalized density types and why do we need them?

The table above shows the generalized density types but why are they useful?

Density-comparison.png

Consider a device that has a screen size of 4 in x 4 in that has 500 px x 500 px and another device that is 8 in x 8 in with 500 px x 500 px. If you display a 100 px by 100 px image on both, the image on the second device will be twice as large despite having the same number of pixels. Density Pixels fix this by creating a generalized unit that is tangential to the actual device density. The Android system will scale images, using the above scaling factors, to match the various display densities and create a uniform* experience.

Great, Android does everything...

Android does do most of the work but relying solely on Android to scale the images is poor practice.

Scaling is extra computations that negatively impact application performance. Additionally, a designer might want to use a different asset for smaller density devices, knowing they can only fit so much content in the smaller image - that's where generalized density types come into play. A designer can create different assets targeting each individual density type; offloading scaling from the Android application and giving them the opportunity to provide specialized assets for smaller density devices.

Ok, how does scaling work?

In the above table, the scaling factor refers to how different density types are scaled from the baseline density, MDPI. Suppose you have an asset which is 100 px x 100 px. This asset will display as 100 dp x 100 dp on an MDPI density device - MDPI devices are the "baseline" density. Now you need to create assets that target all of the other density types.

Creating assets

To achieve the best results, you'll want to select your target asset size then calculate the maximum target size. Afterwards, you'll create your asset at the maximum target size and then scale the image down accordingly (ie. scaling factor) to target the other density types. Scaling down is superior to scaling up - for obvious reasons.

Example

Let's go back to the 100 px x 100 px image size.

Our target size is 100 px x 100 px. This gives us a target maximum size (XXXHDPI) of: 400 px x 400 px. We would create our asset at 400 px x 400 px and then scale the image to the following sizes: