How to Write Good-Looking Android Apps for 4K Displays
Jul 8, 2014
Qualcomm products mentioned within this post are offered by Qualcomm Technologies, Inc. and/or its subsidiaries.
In this post I’ll go through a few simple guidelines for adding 4K support to your applications. I recommend that you follow the guidelines in the Android documentation – particularly Designing for Multiple Screens – for supporting different screen sizes and densities.
1. Use Density-independent Pixel (dp) for layout design
First, to exploit the benefit of inbuilt UI scaling capabilities in Android, design the layout by using density-independent pixels (dp), which will give your app a consistent look and feel on devices with different screen densities. Android defines a density-independent pixel to be 1 physical pixel on a 160-dpi screen. When each element of the layout is defined in dp units, the system scales the resources so that physical sizes of the UI elements are consistent, even when the app is running on high-dpi screens.
I’ve included a table below with the dpi and resolution specs on the Snapdragon 805 Mobile Development Platform Tablet (MDP/T) with 4K display.
| Specification Parameter | Value |
|---|---|
| Screen Size | 10 inches |
| DPI | 440 |
| Actual Screen Dimension | 3840px x 2160px |
| Screen Dimension in dp | 1280dp x 720dp |
| Screen Density Qualifier | xxhdpi |
| Scale Factor | 3 * MDPI size |
| Available Screen Width for Landscape | w1200dp |
| Available Screen Width for Portrait | w700dp |
| Launcher Icon (full asset size) | 144px x 144px |
| Launcher Icon (optical square) | 126px x 126px |
| Action Bar, Tab Icon (full asset size) | 96px x 96px |
| Action Bar, Tab Icon (optical square) | 72px x 72px |
| Notification Icon (full asset size) | 72px x 72px |
| Notification Icon (optical square) | 66px x 66px |
Have a look at Devices and Displays in the Android documentation for more on DPI classifications of devices.
2. High-resolution images and resources
To use the high-dpi resolution of the 4K display, you should place images, icon bitmaps and other UI resources in the drawable-xxhdpi resource folder. For example:
res/drawable-xxhdpi/my_icon.png
3. Multiple layouts for different screen sizes
You design your app for a certain screen size, and Android can scale your layout to fit screens that are close to that size, but it might not look good on a much smaller or much larger screen. Since Honeycomb (3.2), Android has supported multiple layouts qualified by available screen width (w<N>dp), available screen height (h<N>dp) or smallest width that the layout can support (sw<N>dp).
Again, have a look at the table above for layout specifications on the Snapdragon 805 MDP/T. If your app does not have a layout for that screen size, then you should consider creating one.
Next steps
In my next post, I’ll write about using the hardware-based HEVC codec on Snapdragon-powered Android devices. Meanwhile, look through some of the display-related Android documentation:
And try this Android DPI Calculator for converting among xhdpi, hdpi, mdpi, ldpi and tvdpi.