Creating Android Applications for Multiple Screen Sizes
Jamil Antonino March 06, 2011 05:55

A lot of Android applications I've used don't provide interfaces for multiple screen sizes. Using applications that don't scale properly can be extremely annoying, and if your app doesn't scale properly, it can really decreases the value of your app to users. In this post, I will explain how to create the different layouts for the different screen sizes.


Screen Types

Reading the Android Developer Documentation on the topic give us a good base to understand how Android can scale to multiple screen sizes, but doesn't fully explain how to achieve it. Let's start at the beginning. Android provides for 4 screen sizes and 4 pixel densities. The screen sizes are the physical sizes of the screen, while the pixel densities are the resolution.

Low density (120), ldpi Medium density (160), mdpi High density (240), hdpi Extra high density (320), xhdpi
Small screen QVGA (240x320)
Normal screen WQVGA400 (240x400)
WQVGA432 (240x432)
HVGA (320x480) WVGA800 (480x800)
WVGA854 (480x854)
Large screen WVGA800* (480x800)
WVGA854* (480x854)
Extra Large screen
Source: http://developer.android.com/guide/practices/screens_support.html

The table above shows the different screen sizes with the supported pixel density. This is important to know, because this will govern the folder names that will contain elements for each screen type.


Create the Folders

When you create an android project, in the res folder, you will find the drawable and layout folders. The drawable folder holds images, while the layouts folder contains your layout XML files. You can create multiple such folders, with different names, to hold the elements for different screen types.

For drawable folders, the name should follow this format:

drawable-(pixel density)

So for mdpi (for example), your folder would be named:

drawable-mdpi

You should take note that you can have separate folders for landscape images. For mdpi, the folder for landscape images would be names

drawable-land-mdpi

For layout folders, your folders should follow the following format:

layout-(screen size)-(pixel density)

Why, you might ask, is pixel density included? If you look at the the table above, you'll notice that under a screen size, you can have multiple pixel densities. For example, under the normal screen size, you can have mdpi and hdpi screens. This becomes a problem, because your layout won't render properly if they use the same layout files. For this example, your layout folder names would be:

layout-normal-mdpi
layout-normal-hdpi

This separates your layout files, allowing you to provide the correct layout files for each screen type.

You should also take note that you can still provide a different set for landscape mode. It would be in this format:

layout-normal-land-mdpi
layout-normal-land-hdpi

Create the Images and Layout Files

Now that you have the folders, you need to provide the images and layout files. The first thing you need is your images. You need to resize your existing images to match the pixel density and screen sizes you need. You need to do this, because mdpi images won't look sharp on a hdpi screen. Once you have all the images, put them in the appropriate folders.

The next thing you need to do is copy all your layout files into each of the different layout folders. Once there, you should fire up the emulator, and start adjusting the layout to display properly. Most of the time, there are minimal tweaks, but depending on your layout, it may be a lot of work.


All done!

Once you have tweaked all your layout files, your app should be ready to scale to any screen size. It's a lot of work, necessary for your app to display properly.


 

blog comments powered by Disqus