How to add images?

Question

I was adding images after reading in the documentation:

This means that if you generate a 200x200 image for xhdpi devices, you should generate the same resource in 150x150 for hdpi, 100x100 for mdpi and finally a 75x75 image for ldpi devices.

So should my images in XHDPI be 200x200 pixels, my images in HDPI be 150x150 pixels, my images in MDPI be 100x100, and my images in LDPI be 75x75? After reading the documentation, that is what I thought, but when I came across this page:

Android background image size in pixel

The answers state to use different pixeol amounts for the different directories. I am very confused now on what to do. Here is what I have here right now, please tell me if I am doing this correct:

So basically, I spent the past 4-5 hours re-sizing lots of my images to the sizes in those folders. Now I'm thinking...did I even re-size them correctly? Is it supposed to be 100x100 for mdpi?

Basically, I just want to know if the directories are supposed to have that many pixels each. Because the question I linked says otherwise.

Thanks so much,

Ruchir

Answer 1

You did well to do what you did, if you actually want the images to be the size you scaled them to.

Let's review:

mdpi is the baseline density, of 160dpi. This means an image that's 160x160 pixels in mdpi will be one inch squared.

hdpi represents 240dpi. The same one inch square will need to be 240x240 pixels, or 1.5 larger than the mdpi asset.

xhdpi resolves 320dpi, so the square needs to be 320x320 pixels.

xxhdpi, at 480dpi brings the asset to 480x480 pixels.

xxxhdpi is only used for launcher images, so no worries there -- it is 640dpi.

We generally design in vector and then scale to hdpi, xhdpi and xxhdpi';mdpiis still relevant for some phone apps, but for tablets, it's virtually gone.ldpiis obsolete, with less than 3% of phones using it. Android will interpolate the closest image for the screen density, if an exact match is not available. For quick results,hdpiandxxhdpi` are sufficient.

Now note that the 200x200 for xhdpi is an example. Your pixel size will be different, based on what size you want the image to be. Take mdpi as a guide -- 40dp are 1/4 inch, 80dp are 1/2 inch, and so on. 40dp is the smallest decent hit-target, so I wouldn't make buttons smaller than that. Once you establish the size of your asset, you then scale it up -- 1.5x for hdpi, 2x for xhdpi and 3x for xxhdpi, and render your assets that way.

Size Inches   mdpi    hdpi   xhdpi  xxhdpi
       0.10      16     24      32      48
       0.25      40     60      80     120
       0.50      80    120     160     240
       1.00     160    240     320     480
       2.00     320    480     640     960

..and so on

Answer 2

The XHDPI, HDPI, MDPI and LDPI directories are for different device screen densities, not different physical image sizes.

1 'density independent pixel' is defined as the physical size of 1 pixel on an MDPI (160 pixels per inch) device. For example, if you want a button to appear 2 inches wide, then the ImageButton layout_width attribute should be set to 2*160=320dp (device independent pixels), and the image in the MDPI directory should be 320px.

<ImageButton
    android:src="@drawable/my_button"
    android:layout_width="320dp"
    android:layout_height="160dp"/>

Devices with different screen densities will automatically look in the XHDPI, HDPI or LDPI directories for an image that matches the device screen density. For example, an XHDPI phone has twice as many pixels per inch as an MDPI phone, so the layout_width should still be set to 320dp (assuming you want it to appear 2 inches for all devices), but the image in the XHDPI directory should be 2*320=640px in order to match the density of the device (otherwise the image will appear blurry).

If you don't provide an image for the device's density, then Android will fall-back to using an image for one of the other densities. For example, here's what happens when an XHDPI device falls back on a LDPI image (still works, but the image used for the button is blurry in comparison to what the device is capable of):