Android development blog
Tutorials about Android dev topics

How to support multiple screen in Android

Android is an operating system installed on many devices. One of the most important consequence is that the developer has to face with different screen resolution and densities.
There are, on the market, many devices with different capabilities in terms of resolution and density and as developer we have to take it into account in order to create an application that can have a good usability in all these devices. You can think that an android application can be executed on a smart phone and on a tablet and it should be clear the screen size differences.

Reading several manuals and docs it wasn’t so clear how things work in android so i decided to write this simple guide to make a starting point for other developers that want to start coding in android.
Before digging into the details how to support multiple screen sizes and densities it is important that we clarify some terms:

- Resolution: is the number of pixels on the device screen. It can be for example 480x800 etc.
- Density: is the number of pixel in a specific area. Usually we consider dot per inch (dpi). This is a measure of the screen quality
- Orientation: is how the screen is oriented. It can assume two different values:   Landscape and Portrait

Using these concepts we can create apps that support multiple screens.
There are two different aspects that we have to consider one is how we place object into the screen and we define it as layout and the second is the images. The first aspect has to do with resolution because we can have more or less space to place our components the second has to do with image resolution.
Android has a smart way to handle different layout for different screen size and different image resolutions for different screen density.
 

From (inch)
To (inch)
Android name
2 4 small
around 4 around 4 normal
from around 4 7 large
7 10 xlarge


If we want to support all these screen sizes we have to map these android names into a directory structure inside the res directory. The convention used by android is the add these name at the end of layout word. For example layout-small, layout-normal etc. So inside res directory we will have a structure like this one:

image

By now don’t consider please the land extension, we will see it later. As you can see all names are mapped in this structure except normal. Normal is the default layout so it isn’t mapped with its name but just with layout. Now let’s see what is inside each directory.

image
As you can see each directory contains the same elements with all the same names. The only thing that changes is the content of each elements.
For example, if we open one of these files (main.xml) in these two directories you will have:

Layout
image
layout-large
image

Doing so you take into the account only the portrait screen orientation. What happen if the user rotate the screen or the device as a landscape screen?
No problem we can support this kind of screen including the magic word –land. So the full structure becomes:

image
In these way we can support all the screen sizes!!. I guess you are wondering what inside each file in land layout. Well in the landscape layout we have to place components in a different way. Let’s see how i solved this problem in a real application published on the market.
Landscape orientation
image
Portrait orientation
image

Screen Density

By now we considered only the screen size but as we said earlier there are different densities too. Density affects primary the images so an image could be the right size one a screen device and looks too small in another device with more density.<br /> So we have to consider this problem. Android groups devices in categories based on their screen density, so we have:<br /> <br /> <div align=">
Density
Android name
Small around 120dpi (ldpi)
Normal around 160dpi (mdpi)
High around 240dpi (hdpi)
x-High around 320dpi (xhdpi)
As we did for layouts we can built a directory structure under the directory res that maps these names. This time we don’t use layout but instead drawable. So we will have:
image
This time we see a directory drawable that doesn’t have any name specification. It is the default directory that is used when we don’t want to map every density.
In some other post, i will show you how to use Inkscape to create images with the right dpi.

Best practice

There are some best practice that we have to consider when supporting multiple screen. First of all we can’t use fixed dimension in our components. For example we can’t specify a component with using 60px. Instead using px we can use dp.
Dp is a density independent pixel that is used in Android to specify dimensions in a “virual” manner. It is the SO that will adapt our virtual dimension to the real one using the real screen density.


13 comments:

  1. Thanks for usefull post.
    my concern is how to know at run time which layout
    folder's xml have to use

    ReplyDelete
  2. This will detected automatically by the android. You just have to go with the above said steps.

    Thanks for this good explanation

    ReplyDelete
  3. You don't have to worry about it it is OS that will select it for you

    ReplyDelete
  4. thanks for the nice post

    ReplyDelete
  5. Nice post.Give it up. Thanks for share this article. For more visit:android development

    ReplyDelete
  6. Very well explain article. Make easy the challenge of supporting different screen size in android. Most importantly this article is best for both either beginner or know android developer. One important issue is handling image bitmap of large memory in android while supporting different screen size

    ReplyDelete
  7. Nice article, and well explained. Just one thing that I'd suggest to change to avoid confusion of terminology: what you call "density" is technically a "resolution". What you call "resolution" would usually be a "size".

    ReplyDelete
  8. PS: Dang! Just realised that Android indeed understands the terms like you do. So, ignore my post, which I cannot remove. Nevertheless the redefinition of "resolution" as an absolute ("number of pixels" or, implicitly, "pixels per screen") instead of a relative ("dpi") value seems unfortunate. It's a bit like redefining "vehicle speed" as "kilometres per tank".

    ReplyDelete
  9. Rajendra ChoudharyJune 21, 2014 at 2:15 PM

    Thanks,,, this post gives well experience but when we use relative layout than what should use screen orientation

    ReplyDelete
  10. thanks for post ;)

    ReplyDelete
  11. i want to ask a simple question what should be in default "Layout" folder i mean which size of layout should be place in it "Small" or "Normal"

    ReplyDelete
  12. its very good article.Helpful to understand design with different screen sizes

    ReplyDelete

Related Posts with Thumbnails