Android: complex UI design

Question

I have to make the Android app with this screen (it'll be Android version of existing iOS app):

You can see that there're several images, buttons and text label in very specific positions relative to each other.

The problem is that Android devices are very various in screen sizes and dimensions. How to keep the elements' relative sizes on different screens?

Taking this picture as an example, I can calculate, for example, ratio between screen width and circle radius. However, how to keep this ratio with the multitude of Android screens?

Answer 1

You have to create multiple resources for your app. Android has 4 resolutions (ldpi,mdpi,hdpi and xhdpi) and 4 generalized screen sizes (small, medium, large and extra large). So you have to make 4 layouts (or 3 if you don't plan on supporting tablets, since tablets come under the extra large category) to support the screen sizes.

Here's a general guide:

put layouts for small, medium, large and extra large in your res/ folder as follows:

res/layout/sample_layout.xml             // default layout
res/layout-small/sample_layout.xml       // layout for small screen size
res/layout-large/sample_layout.xml       // layout for large screen size
res/layout-xlarge/sample_layout.xml      // layout for extra large screen size

you can also use

res/layout-land/sample_layout.xml for landscape orientation for all screen sizes or you can target landscape layouts for specific screen sizes as res/layout-medium-land/sample_layout.xml

note that all the layouts have the same name.

once you have your layouts ready, you need to take care of image resolutions also

once again in your res/ folder add images like this:

res/drawable-ldpi/sample_image.png         // low density
res/drawable-mdpi/sample_image.png         // medium density
res/drawable-hdpi/sample_image.png         // high density
res/drawable-xhdpi/sample_image.png        // extra high density

once again, all the images have the same name.

general guidelines for designing images are:

ldpi is 0.75x dimensions of mdpi
hdpi is 1.5x dimensions of mdpi
xhdpi is 2x dimensinons of mdpi

generally, I design mdpi images for a 320x480 screen and then multiply the dimensions as per the above rules to get images for other resolutions.

Android will automatically select the best combination of layout and image depending on the device. For example, for a high resolution medium size device, layout-medium and high density image will be displayed to the user.

Make sure you create emulators for all these combinations and test your app thoroughly. here's the official docs for more info:

https://developer.android.com/guide/practices/screens_support.html

For units of measurement, you can use density independent pixels (dp or dip) which will maintain your relative heights, distances etc across multiple resolutions in a stable fashion.