Mobile Assets

 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?

Name Type Density Scaling Factory
Low Density LDPI 120 0.75x
Medium Density MDPI 160 1x (baseline)
High Density HDPI 240 1.5x
X-High Density XHDPI 320 2x
XX-High Density XXHDPI 480 3x
XXX-High Density XXXHDPI 640 4x

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:

Type Size
LDPI 75
MDPI 100
HDPI 150
XHDPI 200
XXHDPI 300
XXXDPI 400

iOS Assets

 
1
Kudos
 
1
Kudos

Now read this

Using() block hell in C#

So the other day I was working on transforming streams for an encryption layer for work. I ended up having some code that looked similar to this: public async Task SendAsync(byte[] data, Delegate next) { using (var stream = ...) { using... Continue →