Creating Android Applications for Multiple Screen Sizes
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.
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||
|Small screen||QVGA (240x320)|
|Normal screen||WQVGA400 (240x400)
|HVGA (320x480)||WVGA800 (480x800)
|Large screen||WVGA800* (480x800)
|Extra Large screen|
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:
So for mdpi (for example), your folder would be named:
You should take note that you can have separate folders for landscape images. For mdpi, the folder for landscape images would be names
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:
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:
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.
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.