A quick guide on Android density buckets!
Make your developers life easier using our quick guide!
Android OS has a market share of over 40%, followed by Windows with 35.01% and iOS with 14.13%, as of August 2019. More than 1,000 phone manufacturers build over 24,000 distinct devices that run Android OS. This equates to more than 2.5 billion devices in circulation!
The diversity in devices and their screen sizes is one of the reasons for Android’s popularity among consumers.
Now, imagine a world where a designer has to design an app to display across all these devices. Scary, isn’t it? There was a need for a method by which a design can be scaled to fit all the devices perfectly while looking sharp and clear as the designer intended.
Dealing with diversity
To deal with diverse devices with different screen resolutions, Android has created 6 ”buckets” to group the devices of different resolutions. Every bucket is associated with a “density conversion factor”. These are as follows:
LDPI: 0.75x or 75% (~120 DPI)
MDPI: 1x or 100% (base screen) (~160 DPI)
HDPI: 1.5x or 150% (~240 DPI)
XHDPI: 2x or 200% (~320 DPI)
XXHDPI: 3x or 300% (~480 DPI)
XXXHDPI: 4x or 400% (~640 DPI)
LDPI is becoming less common due to a less number of new devices in that bucket.
These logical buckets make it simpler for a designer to use a base screen for designing. Android OS then applies the conversion factor to every element on the screen to give a perfect looking design across multiple screens. The formula to convert the actual pixel size of a device to its DP equivalent is:
DIP = actual resolution / density conversion factor
For example, a device that has a resolution of 1920 x 1080 px (xxhdpi), the DP size will be 1920/3 = 640 and 1080/3 = 360. Thus, the designer should use an artboard of size 360 x 640px to design for such devices.
px vs dp as a unit
Pixels (px) and Density independent pixels (DIP or simply dp) are often confused with each other. However, there is are important differences between them.
Pixels are the fundamental bits of colour information of a screen or image. Screen resolution is specified in pixels to tell about the rows and columns of pixels on a screen. For example, Nexus 5 has a resolution of 1080 x 1920px. This means that there are 1080 columns and 1920 columns of pixels on the screen. Naturally, the higher the resolution, the better the display.
A screen designed for such devices using pixels as the unit would not look as sharp when scaled up. This is because the pixels are just scaled up proportionally which changes the pixel density of the screen.
Density independent pixel is a derivative of screen resolution. The dp of a screen is derived by dividing the actual resolution of a device by the conversion factor of the bucket, as given above. For example, Nexus 5 has a dp size of 360 x 640dp.
Scaling up a screen designed using ‘dp’ as the unit is much easier as it is independent of density and thus looks appropriate across devices with different densities.
SVGs vs Bitmaps
A bitmap image contains bit information of the individual colours for every pixel. PNG, JPG and GIFs are examples of file formats that store bitmap information. Bitmaps are usually used to display image assets. However, when working with shapes and icons, it is best to employ the use of Scalable Vector Graphics (SVG in short).
SVGs are different from bitmaps as they do not store colour information of every bit of an asset. Instead, they store the vector information of assets and icons which makes scalability easier and sharper as compared to a bitmap image. The tools which work on vector-based format are Adobe XD, Adobe Illustrator, Affinity Designer and Inkscape among many others.
Points to remember
- Android solves the problem of designing for diverse device resolutions by creating 6 density buckets that range from ~160 DPI to ~640 DPI
- Density-Independent Pixels (dp) as a unit is useful to export screens and assets suitable for each density bucket. The conversion formula from pixels (px) to dp is given as: dp = actual resolution (in px) / density conversion factor
- SVGs are better suited for shapes and icon assets than bitmaps as they can be scaled up without losing quality or sharpness
- Always design for the baseline screen (1x bucket) and export assets after multiplying them with the suitable conversion factor. Adobe XD automatically exports your design in ldpi, mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi.
If you like what you read, do clap for us and check out the articles recommended by us below :)
5 secret tips for beginners on design wireframing
Designing the UX for text and voice based AI products
Localyze — Cater to your audience in the language they understand!
Edge-based device AI solutions
Want to say hi? Drop us a line on hello@pineapplestudio.in
Check out our work!
