Supporting Different Screen Sizes in Android

Android devices come with different screen and pixel sizes. Such as, one device has 160 pixels per square inch, another device fits 480 pixels in the same space. If variations in pixel density are not considered, the system might rescale the images or display it as a completely wrong size. As a result image quality will be changed.

This guide shows you how you can design splash images to support different screen sizes & resolutions in smartface app.

As we indicated that, devices screen sizes unpredictable (due to the many mobile manufacturers). Thus, Android apps can solve it by 9-patch images.

​

What is 9-patch images?

A nine-patch image is a stretchable bit map. Android automatically resize it to accommodate the contents of the view and the size of the screen. Selected parts of the image are scaled horizontally or vertically based on indicators drawn within the image. Output file extension must be end with .9.png.

​

How to create & use the 9-patch image?

Relative sizes for an image at different density sizes

​

Based on the figure above, the corresponding splash images are used based on the device DPI. Images given to each corresponding folder should be kept at the minimum size to avoid shrinking. Keep in mind that 9-patch doesn't support image resize. Thus, the appearance of splash screen might change on smaller device screens.

​

Note that the table above indicates the most popular minimum screen size of android devices. It is not absolute.

Here, we need to consider all minimum sizes and the stretching in 9-patch. You can decide the sizes according to the specific requirements as well.

​

Conversion of Image to 9-patch Image

There are two options for this purpose; either creating the images with Android Studio tool or using an online 9-patch tool.

​

Using Android Studio for Generating 9-patch Images

Example original splash image:

​

Step 1 : Download the Android Studio Draw9Patch tool and launch it.

​

Step 2 : Drag & drop the splash image over the app. There is 1 pixel space from each edge to draw an indicator for configuration. The left window is the configurable area; the right one shows how it appears when stretched vertically and horizontally.

​

Step 3 : Enable the Show patches toggle to preview the stretchable patches in the drawing area (purple is a stretchable patch). Here, the splash screen is going to be stretched in horizontal but not in vertical.

​

In this case, we would like to stretch the edges rather than the Smartface logo.

For this purpose, draw only the top & left border of the image. After the changes, the Smartface logo isn't stretched in vertical and horizontal as seen in the right pane.

​

Step 4 : Save the 9-patch image (File > Save 9-patch) which would generate the files with the .9.png extension. Duplicate the image with the dimensions specified in the table in this document and then place the 9-patch images to the corresponding dpi folder under your workspace.

​

References and additional resources:

• ​https://github.com/gomobile/sample-9-patch-splash-screen/blob/master/docs/README.md​

• ​https://stackoverflow.com/questions/6272384/most-popular-screen-sizes-resolutions-on-android-phones​

• ​https://developer.android.com/training/multiscreen/screendensities​