android app design screen size in photoshop

Different from iPhone and iPad, live wallpaper is one of the personalization features to customize Android phones and Android tablets. A live wallpaper on Android is used as background on home screen which animates and changes basing on user actions or over time in the day. As Android developers and designers, we can implement our own live wallpaper and monetize it as an Android applications. Hence, I decide to create a series of tutorials to show how to design a live wallpaper for Android device and monetize it by published in Google Play Store.

In this series of tutorials, I will divide my tutorials into 4 parts:

Android Animated Live WallPaper Tutorials 1: Decide Android App Screen Size
Android Animated Live WallPaper Tutorials 2: Make Android WallPaper Service
Android Animated Live WallPaper Tutorials 3: Make Interactive Android Live Wallpaper
Android Animated Live WallPaper Tutorials 4: Monetize Android Live Wallpaper in Google Play Store

This is the Tutorial 1 for Android Animated live wallpaper app. In the tutorial, I will talk about how to decide our Android application screen size. As we all know, Android runs on a variety of devices which have different screen sizes, resolutions and densities. It is the most difficult problem for us to make our Android application compatible with all Android devices, especially for Android wallpaper app.

How to Decide My Android App Screen Size

To solve this screen size problem, Google provides several rules to help us adjust each apps' user interface to fit the device screens as necessary. To make it easy to design the appearance, Google simplifies physical screen size to 4 types: small, normal, large and extra large (xlarge). Meanwhile, Google also specifies 4 varieties of densities: low (ldpi), medium (mdpi), high (hdpi), and extra high (xhdpi). Therefore, Google suggests designers to provide UI designed for the generalized sizes and densities. For Android programmers, it is recommended to use dp, a virtual pixel unit, to define UI layout in a density-independent way.

How to Design UI for Android Apps for Different Screen Size

To design an app UI for different screen sizes, our initial design has to meet a minimum required space for each screen size. Android defines a minimum size (in dp) for each generalized screen type. Here is an Android screen size guideline.

Minimum Screen Size for Android in dp (landscape)
Screen	Width	Height
xlarge	960dp	720dp
large	640dp	480dp
normal	470dp	320dp
small	426dp	320dp

When we get the screen size in dp, it is not enough for us to design the Android app UI. For each screen size, we need to prepare graphics and bitmap images for each density. Here is an Android screen density guideline.

Android Density Guideline (dpi)
Density Name	DPI	Scaling Ratio
xhdpi	320	8
hdpi	240	6
mdpi	160	4
ldpi	120	3

For easy calculation, we can follow the 3:4:6:8 scaling ratio between the four generalized densities. If we create a 36×36 pixel picture for ldpi device, the rest densities pictures size will be 48×48 for mdpi, 72×72 for hdpi, and 96×96 for xhdpi.

How to Design Android Apps UI in Photoshop

Many designers have problems for designing Android app UI in photoshop or other pixel based graphic design tools because of density-independent unit, dp. Designers don't know how to map dp to pixel. Google also doesn't give a clear Android UI design guide for them, though they give a basic formula for dp and pixel translation.

As Android's definition, 1pd equal to 1px under 160 dpi device (mdpi). So we want to design an Android app for xlarge Android device with mdpi density, we can define our UI size in pixel as 960 pixel in width and 720px in height; Follow the same mapping rule, we can get following Android App screen size UI design guideline:

Android App Screen Size in Pixel Guideline
	xlarge (960×720 dp)	large (640×480 dp)	normal (470×320 dp)	small (426×320 dp)
xhdpi (320dpi)	1920×1440 pixel	1280×960 pixel	940×640 pixel	852×640 pixel
hdpi (240dpi)	1440×1080 pixel	960×720 pixel	705×480 pixel	639×480 pixel
mdpi (160dpi)	960×720 pixel	640×480 pixel	470×320 pixel	426×320 pixel
ldpi (120dpi)	720×540 pixel	480×360 pixel	352.5×240 pixel	319.5×240 pixel

To cover the full screen size and density combinations will be a heavy design work for our designers. In the real world, we don't have to make our android app, animated live wallpaper, to meet all the device screen specifications. From the android platform marketing share and android device screen size density marketing share released by Google before October, 2013, our android UI design can mainly target normal screen size with mdpi, hdpi and xhdpi. It already cover 71.6% android devices in the market.

android platform version before October 2013

android screen size and desity before October 2013

How to Design Android Apps UI for Specific Size and Density

Android wallpaper app is more sensitive for device screen. To make a wonderful wallpaper app, it is most important to make it fit the screen size perfectly. If we let the android system to help us resize the app to fit the screen, the result may be horrible. However, there are over 4000 distinct devices models and 600 distinct brands in the market (Data is provided by Opensignal). Hence, we have to make some decisions on models and brands which our android app are targeted. We can design specific UI for these specific devices. For example, we can choose the latest models from Samsung, HTC, and Google.

Android Phones Screen Specification
Android Brand	Size	Density	Ratio
Samsung Galaxy S4	5.1 inches	1920 x 1080 pixels	432 dpi
Samsung Galaxy Note 3	5.7 inches	1920×1080 pixels	386 dpi
HTC One	4.7 inches	1920×1080 pixels	468 dpi
Google Nexus 5	4.95 inches	1920×1080 pixels	445 dpi

Android Tablets Screen Specification
Android Brand	Size	Density	Ratio
Samsung Galaxy Note 10.1	10.1 inches	2560×1600 pixels	299 dpi
Google Nexus 7	7.02 inches	1920×1200 pixels	323 dpi
Google Nexus 10	10.05 inches	2560×1600 pixels	300 dpi
Kindle Fire HD	7 inches	1280×800 pixels	216 dpi
Kindle Fire HDX	7 inches	1920×1200 pixels	323 dpi
Kindle Fire HDX 8.9	8.9 inches	2560×1600 pixels	339 dpi

To design a layout for specific screen, we can group all layout in one group like below. All layout files in layout-w600dp folder will be applied for devices whose screen width is 600dp with mdpi or more.