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.
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.
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:
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.
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 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 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.
res/layout-w600dp/main_activity.xml
Hmm.. Really great work. Very Comprehensive. Exactly what I was looking for.
Keep it up.
Thank you so much. It really helped.