About Android image and asset sizes

Question

I need to clarify some doubt about the image assets for my app,

if I specify in an xml file that the height of something [image view] is 50 dip height

which type of screen should i choose from the resources folder?

drawable, hdpi, ldpi, mdpi, xhdpi,

to have the 50 px height image,

and what is the percentage for bigger, smaller size images compared to the base image,

like in iOS, @2x, is literally 2 times the size of the image, and you say programatically the normal size,

thanks!

Untruthful

Your question is explained in Android's manual: developer.android.com/guide/practices/screens_support.html – Rogozen

Answer 1

mdpi is the reference density -- that is, 1 px on an mdpi display is equal to 1 dip. The ratio for asset scaling is:

ldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
0.75 | 1    | 1.33  | 1.5  | 2     | 3      | 4

Although you don't really need to worry about tvdpi unless you're developing specifically for Google TV or the original Nexus 7 -- but even Google recommends simply using hdpi assets.

What this means is if you're doing a 48dip image and plan to support up to xxhdpi resolution, you should start with a 144px image (192px if you want native assets for xxxhdpi) and make the following images for the densities:

ldpi    | mdpi    | tvdpi    | hdpi    | xhdpi     | xxhdpi    | xxxhdpi
36 x 36 | 48 x 48 | 64 x 64  | 72 x 72 | 96 x 96   | 144 x 144 | 192 x 192

And these should display at roughly the same size on any device, provided you've placed these in density-specific folders (e.g. drawable-xhdpi, drawable-hdpi, etc.)

For reference, the pixel densities for these are:

ldpi  | mdpi  | tvdpi  | hdpi  | xhdpi  | xxhdpi  | xxxhdpi
120   | 160   | 213    | 240   | 320    | 480     | 640

Demetrius

How do you decide you have to start from a 48dip ? Say you only have a tablet (mdpi) at hand, do you start with a random size, and iterate until it looks "big enough" ? – Eda

@Eda It's just a size I used as an example. In this case, it's the size of a launcher icon. Whatever size you need for other assets depends on your use case. – Demetrius

Best explanation. I also use this site for conversion regards px and dp. pixplicity.com/dp-px-converter – Mammiemammiferous

what last part of you answer meanings? ldpi 120 ? where this number came from? – Carrefour

@Eda It might be helpful to note that 1 inch = 160dip, so you can figure out what size you'd like your image to appear on a device in inches first, use this to convert to dip and then convert to the image sizes you may need. – Tarnish

I also made a tool to calculate this on the fly: pixit-tool.web.app/# – Tarnish

Answer 2

Based on kcoppock's answer I have created the following shell script to automatically resize all images to the correct size and copy them in the respective Android drawable-* - folders!

Create a shell script and paste the following code:

createAndroidImages.sh

#!/bin/bash

read -p "Please enter the subfolder of the original images? " folder
read -p "How many DP (width) should the image have? " dp

for i in $(find $folder/. -type f -name "*[A-Z]*"); do mv "$i" "$(echo $i | tr A-Z a-z)"; done

mkdir drawable-ldpi
mkdir drawable-mdpi
mkdir drawable-tvdpi
mkdir drawable-hdpi
mkdir drawable-xhdpi
mkdir drawable-xxhdpi
mkdir drawable-xxxhdpi

cp $folder/* drawable-ldpi/
cp $folder/* drawable-mdpi/
cp $folder/* drawable-tvdpi/
cp $folder/* drawable-hdpi/
cp $folder/* drawable-xhdpi/
cp $folder/* drawable-xxhdpi/
cp $folder/* drawable-xxxhdpi/

sips -Z $(echo $dp*3/4 | bc) drawable-ldpi/*
sips -Z $(echo $dp | bc) drawable-mdpi/*
sips -Z $(echo $dp*4/3 | bc) drawable-tvdpi/*
sips -Z $(echo $dp*3/2 | bc) drawable-hdpi/*
sips -Z $(echo $dp*2 | bc) drawable-xhdpi/*
sips -Z $(echo $dp*3 | bc) drawable-xxhdpi/*
sips -Z $(echo $dp*4 | bc) drawable-xxxhdpi/*

Put your script in a folder and your original images in a subfolder e.g.:

/
.. createAndroidImages.sh
.. originalImages/
....a123.png
....b456.png

Run the shell script in terminal: sh createAndroidImages.sh

To copy the created images directly to your Android Studio Project:

cp -R drawable-* ~/AndroidStudioProjects/ESCRating/app/src/main/res/

You're done! Hope this helps someone!

P.S. Please note that the original images should have at least four times the width in pixels, than the desired width in dpi (e.g. 4 (factor xxxhdpi) * 30dpi => 120px) for optimal results.

Pettus

Answer 3

kcoppock did a great job explaining Andorid screen densities. I just would like to add one more point regarding the original question.

Android Tablet launcher icon uses one density bucket up.

According to Google's developer Nick Butcher's Google+ post

The gorgeous screen on the Nexus 10 falls into the XHDPI density bucket. On tablets, Launcher uses icons from one density bucket up [0] to render them slightly larger. To ensure that your launcher icon (arguably your apps most important asset) is crisp you need to add a 144*144px icon in the drawable-xxhdpi or drawable-480dpi folder.

Find source here

Exuviate

Answer 4

Here is my calculations for upscaling and scaling down of images for android-

ldpi (120 dpi, Low density screen) - 36px x 36px (0.19) (1)

mdpi (160 dpi, Medium density screen) - 48px x 48px (0.25) (1.33)

hdpi (240 dpi, High density screen) - 72px x 72px (0.38) (2)

xhdpi (320 dpi, Extra-high density screen) - 96px x 96px (0.5) (2.67)

xxhdpi (480 dpi, Extra-extra-high density screen) - 144px x 144px (0.75) (4)

xxxhdpi (640 dpi, Extra-extra-extra-high density screen) - 192px x 192px (1.0) (5.33)

My short article is helpful to create image resources using imagemagick, when there are multiple images.

Lamed