How to support multiple screen in Android

Public on August 21, 2015
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
24Small
Around 4Around 4Normal
From Around 47Large
710Xlarge


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-smalllayout-normal etc. So inside res directory we will have a structure like this one:

image_thumb

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_thumb12
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_thumb39
layout-large
image_thumb40

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_thumb21
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_thumb37
Portrait orientation
image_thumb38

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
Smallaround 120dpi (ldpi)
Normalaround 160dpi (mdpi)
Higharound 240dpi (hdpi)
x-Higharound 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_thumb43
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. - See more at: http://www.survivingwithandroid.com/2012/07/how-to-support-multiple-screen-in.html#sthash.NlI3001Y.dpuf




[Advertising]Faster Thinking - Speed up your brain


Faster Thinking Game



sentiment_satisfied Emoticon