Best practices for supporting Android Application in multiple screen

Android runs on a variety of devices that offer different screen sizes and densities. That’s why handling the multiple screen size is most important. We should design the user interface of our application in such a way so that it appears correctly on the widest possible range of devices. This document will shows you how to support different screen sizes with the following three components:

1. Dimensions.
2. Images and icons
3. Layout design

1. Dimensions

• Always avoid hard-coded layout sizes.
• Use only dp (density-independent pixels), match_parent or wrap_content for layout elements dimensions.
• Use only sp (scale-independent pixels) for text size.
• Keep dimensions in dimens.xml files (Not hardcoded in app code or xml file).
• Provide dimensions for different values folder for different screen resolutions.

Values folder for different screen resolutions.

values-sw720dp          10.1” tablet 1280x800 mdpi
values-sw600dp          7.0”  tablet 1024x600 mdpi
values-sw480dp          5.4”  480x854 mdpi , 
                        5.1”  480x800 mdpi

values-xxhdpi           5.5"  1080x1920 xxhdpi
values-xxxhdpi          5.5"  1440x2560 xxxhdpi
values-xhdpi            4.7”   1280x720 xhdpi,
                        4.65”  1280x720 xhdpi
values-hdpi             4.0” 480x800 hdpi,
                        3.7” 480x854 hdpi
values-mdpi             3.2” 320x480 mdpi
values-ldpi             3.4” 240x432 ldpi,
                        3.3” 240x400 ldpi,                                      

You will find now-a-days maximum phone screen size 4" to 7". So you can create values folder xhdpi, xxhdpi, xxxhdpi, sw480dp and sw600dp with a base value folder.

2. Image and icon

• Provide different images and icon in different drawable folder for different screen resolutions.

drawable-ldpi        //240x320
drawable-mdpi        //320x480
drawable-hdpi        //480x800
drawable-xhdpi       //720x1280
drawable-xxhdpi      //1080X1920
drawable-xxxhdpi     //1440X2560

• Don’t apply fixed values everywhere for image. Fixed dimensions can be vary with different device and image will be looked stretch. So use wrap_content.
• Recommended minimum size for icons is 32 dp and you need 8 dp free space between another icon.
• You should put all your app icons in mipmap directories instead of drawable directories. Beause all mipmap directories are retained in the APK even if you build density-specific APKs. This allows launcher apps to pick the best resolution icon to display on the home screen.

3. Layout Design

The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra large screen should go in layout-xlarge/.

But beginning with Android 3.2 (API level 13), the above size groups are deprecated and you should instead use the sw<N>dp configuration qualifier to define the smallest available width required by your layout resources. The Smallest-Width (SW) qualifier is discussed below.

To create an alternative layout in Android Studio (using version 3.0 or higher), proceed as follows:

1. Open your default layout and then click Orientation in Editor in the toolbar.
2. In the drop-down list, click to create a suggested variant such as Create Landscape Variant or click Create Other.
3. If you selected Create Other, the Select Resource Directory appears. Here, select a screen qualifier on the left and add it to the list of Chosen qualifiers. When you’re done adding qualifiers, click OK.

res/layout/my_layout.xml    #The default layout file
res/layout-ldpi/my_layout.xml
res/layout-mdpi/my_layout.xml
res/layout-hdpi/my_layout.xml
res/layout-xhdpi/my_layout.xml
res/layout-sw480dp/my_layout.xml
res/layout-sw600dp/my_layout.xml
res/layout-sw700dp/my_layout.xml

• Use LinearLayout with proper using of android:layout_weight.

It is not a good practice to create different folders for layouts. Create your layout such that it works fine with all the screen sizes. To achieve this, play with the layout attributes. You only need to have different images for hdpi, mdpi and ldpi types. The rest will be managed by android OS.
If you want to use single layout and that should support all the screens like ldpi, , mdpi, hdpi, x-hdpi, xx-hdpi then you have to use layout_weight in your layout that will handle screen size for all the screens

Smallest-Width (SW) Qualifier

Android introduced the “Smallest Width (SW)” qualifier in Android 3.2. The Smallest-width qualifier allows to target screens that have a certain minimum width given in dp.

Lets take three layout folders named res/layout, res/layout-sw600dp and res/layout-sw720dp. We also have some layouts named main.xml, details.xml and item.xml in base layout folder. We override details.xml, item.xml in res/layout-sw600dp folder and item.xml in res/layout-sw720dp folder.

res/layout
   main.xml
   details.xml
   item.xml
 
res/layout-sw600dp       // 7.0”  tablet 1024x600 mdpi
   details.xml
   item.xml
res/layout-sw720dp       // 10.1” tablet 1280x800 mdpi
   item.xml

On a device with dimensions 640 x 360 dp.

Between 640 and 360 the smallest width is 360 dp. Now the device will compare this smallest width with the folder name. As 360dp is less than 600dp and less than 720dp. So all the layout will come from res/layout folder.

• All the layout will come from res/layout folder.

On a device with dimensions 1024 x 600 dp.

Here, Between 1024dp and 600dp the smaller one is 600dp. Now compare this value agains the folder name. 600dp is equal to the 2nd folder res/layout-sw600dp. So details.xml and item.xml will come from this folder. But notice that main.xml is not declared in this folder. So it fall back to a less specific folder which is base folder. So main.xml will come from res/layout folder.

• details.xml and item.xml will come from res/layout-sw600dp
• main.xml will come from res/layout folder.

On a device with dimensions 1280 x 800 dp.

Here between 1280 and 800 dp the smaller one is 800 dp. If you compare this value you will see it satisfies all the folders. However, the device will choose most specific folder first which is res/layout-sw720dp. So item.xml will come from res/layout-sw720dp folder. But details.xml and main.xml is defined in this folder. So now the device will fall back to less specific folder which is res/layout-sw600dp. So detail.xml will come from this folder. But main.xml is not also defined here. So main.xml will come from base layout folder.

• item.xml will come from res/layout-sw720dp
• detail.xml will come from res/layout-sw600dp.
• main.xml will come from res/layout folder.

3rd Party tools for managing dimensions

• sdp
• ssp

Happy Coding :)