Home/ Questions/Q 8786155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:32:40+00:00

I have to make the Android app with this screen (it’ll be Android version

  • 0

I have to make the Android app with this screen (it’ll be Android version of existing iOS app):
enter image description here

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 320×480 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.

    • 0