Images on different types of screen

1

At this moment I have these layout's to support the different screen sizes

When I test the app on 4-inch or 4.5-inch devices, both will use the activity_main.xml layout that corresponds to the normal size but repair that on the 4-inch device some images or text are cut off because they do not fit on the screen. p>

How can I resolve this?

    
asked by anonymous 06.02.2017 / 20:29

1 answer

2

Please note that devices with equal dimensions may have different screen densities.

The space occupied by an image, relative to the dimensions of the screen, is different in each density. The smaller the density the greater the space occupied.
In order for the occupied space to be equal, it is necessary to provide scaled images for each of them.

You should create in the \res folder new drawable folders, one for each density, in the form drawable-xxx , where xxxx is:

  • ldpi
  • mdpi
  • hdpi
  • xhdpi
  • xxhdpi

The sizes of the images, to be included in each of them, are calculated in relation to the image in the mdpi folder. Use an image editor that allows you to resize them, for example Photoshop.

The factors to use are:

  • ldpi = > 0.75
  • mdpi = > 1
  • hdpi = > 1.5
  • xhdpi = > 2
  • xxhdpi = > 3

Having the dimensions of the mdpi the other dimensions are calculated by multiplying this dimension by its factor:

dimensão-hdpi = dimensão-mdpi * 1.5

When the starting dimension does not match the mdpi, divide it by the factor corresponding to that density and multiply by the density factor for which you want to calculate the dimensions.

For example, if you have an image that "looks good" in xhdpi , the dimensions for the other densities are calculated as:

dimensão-xxx = (dimensão-xhdpi / 2) * factor-xxx
    
07.02.2017 / 17:53