Decide Android App Screen Size

On April 11, 2014, in Android, Android Phone and Tablet, by James Liu

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.

Android Screen Ranges

Android Screen Ranges

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 platform version before October 2013


android screen size and desity 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.

res/layout-w600dp/main_activity.xml

 

2 Responses to “Decide Android App Screen Size”

  1. Junaid says:

    Hmm.. Really great work. Very Comprehensive. Exactly what I was looking for.
    Keep it up.

  2. Sahar says:

    Thank you so much. It really helped.

Leave a Reply

Premium WordPress Themes

Free WordPress Theme