Same image in res/drawable and res/drawable-xhdpi appears as different sizes

Question

I have an image, rectangle.png. Its dimensions are 75x197. It is located in res/drawable and res/drawable-xhdpi. It is displayed many times in a grid layout like so (screenshot from Nexus-10, an xhdpi device):

If I remove the image file from res/drawable-xhdpi, thus causing the layout to use the same image, but in res/drawable, the screen changes to this:

Why is this happening?

Answer 1

It is happening because android is using the size of the image of mdpi in the xhdpi when it should be using the xhdpi so it is scaling it up, in order to use the correct image size on each screen, design an image that fits for mdpi screen as a reference for other resolutions, use emulator to see how it looks, mdpi screens are ~160dpi while xhdpi are ~320dpi, then use this scaling factor in order to scale it according to your desired resolution:

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

When designing the layout this info will help you according to the developer guide:

xlarge screens are at least 960dp x 720dp large screens are at least 640dp x 480dp normal screens are at least 470dp x 320dp small screens are at least 426dp x 320dp

This formula helps to convert from px to dpi or dp: px = dp * (dpi / 160

Answer 2

Why is this happening?

res/drawable/, for bitmaps, is equivalent to res/drawable-mdpi/. Android thinks that your image is designed for use on -mdpi screens, which are 160dpi. An -xhdpi device, like the Nexus 10, is 320dpi. Hence, Android will double the pixels, in both dimensions, such that the image as seen on an -xhdpi device will be the same size as that same image would be on an -mdpi device.