Image size for different screen size and resolution

Question

What I have In my project is a drawable folder in which I've placed all the drawables I need to resize some of them to do that I placed values folder:

values-normal-xhdpi values-normal-mdpi ...

all the values that are in the xhdpi must be divided by 80/60=1.333 so that I get the same display for both devices...

why is it like that? when I divide it by 2 I get small buttons on the mdpi device;

and when I keep the dimensions the same I get very big buttons on the mdpi device;

Example: in the values-normal-mdpi:

<!-- In the about the progragm activity the buttons -->
    <dimen name="aboutproductimgwidth">73.5dp</dimen>
    <dimen name="aboutproductimgheight">73.5dp</dimen>

    <!-- the logo in the animation activity -->
     <dimen name="logoimgwidth">162dp</dimen>
     <dimen name="logoimgheight">162dp</dimen>

in the values-normal-xhdpi:

<!-- In the about the progragm activity the buttons -->
    <dimen name="aboutproductimgwidth">98dp</dimen>
    <dimen name="aboutproductimgheight">98dp</dimen>

    <!-- the logo in the animation activity -->
     <dimen name="logoimgwidth">216dp</dimen>
     <dimen name="logoimgheight">216dp</dimen>

when I placed these values I've got the exact same display on both devices.. and that's what I need.

EDIT1 Even when I did it in another way, and that's by placing an image of 160px in the drawable-normal-xhdpi folder and another one with 80px in the drawable-normal-mdpi folder I've got different display on both devices; on the mdpi device I've got really large buttons and on the xhdpi device I've got a nice display why?!! although I did what they said I divided the image of xhdpi on 2;

EDIT2 sorry I placed some photos but can't keep them online for too much time.. but what I have in my display: ONE DEVICE HAS A TEXT UNDER THE BUTTONS AND A TEXT ABOVE THE BUTTONS BECAUSE THE BUTTONS ARE TOO LARGE AND IN THE OTHER DEVICE I AM GETTING THE TWO TEXTS ABOVE THE BUTTONS BECAUSE THE BUTTONS ARE JUST AS BIG AS I NEED THEM TO BE.. ALTHOUGH I USED IN THE FIRST DEVICE BUTTONS 80PX BECAUSE IT'S A MDPI DEVICE AND IN THE SECOND ONE 160 PX BECAUSE IT'S XHDPI

Answer 1

If you did it properly, then the image in your drawables-mdpi should be 1/2 the size of the image in xhdpi.

What you're seeing on the screen is that a typical mdpi device is 320 px while a typical xhdpi is 720 px. So if you made two buttons, each 1/2 the screen size, then the xhdpi buttons should be 360px. Following "procedure" means half sized 180px buttons in mdpi. But on the mdpi screen 2 buttons would be 360px, and not fit. To get them to fit you would need to reduce them 30 px, or about 13.33%

Sounds like the screens you are looking at may not be typical screens, but the root of the problem is that you are adjusting the image size in both the drawables and in the values folders. You need to redesign your approach to handling different screen densities - pick one or the other, but probably not use both unless you have a very unusual use case.

Answer 2

You are having problems in setting the correct dpi of image for different drawable folders. If you want to automatically generate a image for all required sizes the please use http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html.

Here you can upload your image or use text/clip art and it will provide you with a zip containing images of all dpi.

Answer 3

You need to add settings for different device sizes in your AndroidManifest.xml. You can see that settings here.