In my last post,we have learned how to support an android device for different languages in Android support for different Languages . Now we are going to see how android support for different screen sizes.

Android categorizes device screens using two general properties: size and density. You should expect that your app will be installed on devices with screens that range in both size and density. As such we should include some alternative resources that optimize our app’s appearance for different screen sizes and densities

1. There are four generalized sizes: small, normal, large, xlarge.

2. And four generalized densities: low(ldpi), medium(mdpi), high(hdpi), extra high(xhdpi)

To declare different layouts and bitmaps we like to use for different screens, we must place these alternative resources in separate directories, similar to how we do for different language strings.

Also, be aware that the screens orientation (landscape or portrait) is considered a variation of screen size

Create Different Layouts

To optimize our app on different user sizes, we should create a unique layout XML file for each screen size we want to support. Each layout should be saved into the appropriate resource directory, name with a -<screen_size> suffix. For example a unique layout for large screens should be saved under res/layout-large/

For example this project includes a default layout and an alternative layout for large screens

MyProject/
    res/
        layout/
            main.xml
        layout-large/
            main.xml 

 The file name is must be exactly the same, but their contents are different in order to provide the optimized UI for the corresponding screen size.

Simply reference the layout file in our app as usual:

@Override
 protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
}

The system loads the layout file from the appropriate layout directory based on screen size of the device on which our app is running.

Here‘s a project with an alternative layout for the landscape orientation:

MyProject/ 
    res/ 
        layout/ 
            main.xml 
        layout-land/ 
            main.xml

By default, the layout /main.xml file is used for portrait orientation.

If we want to provide a special layout for landscape, including while on large screens, then you need to use both the large and land qualifier

MyProject/ 
    res/ 
        layout/ # default (portrait) 
            main.xml 
        layout-land/ # landscape 
            main.xml 
        layout-large/ # large (portrait) 
            main.xml 
        layout-large-land/ # large landscape 
           main.xml

Create different Bitmaps

We must need to provide bitmap resource that are properly scaled to each of the generalized density buckets: low, medium, high and extra-high density. This helps us to achieve good graphical quality and performance on all screen densities.

To generate these images, we should start with our raw resource in vector format and generate the images for each density using the following size scale: 

xhdpi : 2.0
hdpi: 1.5
mdpi : 1.0 (baseline)
ldpi : .75

This means if we generate a 200x200 image for xhdpi devices, we should generate the same resource in 150x150 for hdpi, 100x100 for mdpi, and 75x75 for ldpi devices.

Then place the file in the appropriate drawable resource directory:

MyProject/ 
    res/ 
        drawable-xhdpi/ 
            myimage.png 
        drawable-hdpi/ 
            myimage.png 
        drawable-mdpi/ 
            myimage.png 
        drawable-ldpi/ 
            myimage.png

Any time we reference @drawable/myimage. The system selects the, appropriate bitmap based on the screen density 

This post is refereed from Google docs Supporting Different Screens