Resize your image according to screen sizes?

Question

I noticed that whenever I tested my app on my Droid X and Droid Bionic, the images where actually fine. But whenever I tested it on Larger devices such as Android Tablet. The image is kinda stretched.

I also have a question about the information below, I tried to make 4 copies of "my_layout.xml" and store it in "layout,layout-small,layout-xlarge,layout-xlarge-land" folders. Each of them contain different sizes of the image. That one did the work, they all look good in any sizes of screen devices. But my problem is, I have 300 or more layouts that contain the same image, does it mean I have to create a copy for each one of them and modify the image size? Is there any other way to solve this?

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
res/layout-large/my_layout.xml       // layout for large screen size
res/layout-xlarge/my_layout.xml      // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

I also tried to make different sizes of the image and store it in "drawable-hdpi,drawable-ldpi,drawable-mdpi" They all look fine in all screen devices except in "5.1 WVGA, 5.4in FWVGA, and 10.1 WXGA"

Like I said before, making different layouts with different sizes solve the problem, but do I really have to create a copy for each one of them and modify the image size? Is there any other way to solve this?

Answer 1

You need not re-size manually & add in "drawable-hdpi,drawable-ldpi,drawable-mdpi" This will increase your APK's size, instead use only one High Resolution image and put it in "drawable-nodpi" or just in "drawable" or drawable-hdpi. Test it in all the devices. It should work fine. Tip: put the image that will look Good in 10.1 WXGA, Automatically, the Lower size screen will look good.

EDIT : Create image of the Ratio 3:4:6:8

Ex: if you have an image of width:120px and Height:90px for low resolution devices (drawable-ldpi), then, for drawable-mdpi is 3:4 (120x4/3) = 160
drawable-mdpi the image size should be W:160px , H:120px
drawable-hdpi the image size should be W:240px , H:180px (twice of ldpi)
drawable-xhdpi the image size should be W:320px , H:240px (twice of mdpi)

Make sure that all your images are of good quality, even if it's of different dimensions.

Refer : How to Support Multiple Screens