Home > DeveloperSection > Blogs > Android Support for different screen sizes

Android Support for different screen sizes


Android Android  Android Layout 
Ratings:
0 Comment(s)
 2386  View(s)
Rate this:

Android Support for different screen sizes


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

 


Don't want to miss updates? Please click the below button!

Follow MindStick