About Android image and asset sizes
Solution 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
Solution 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.
Solution 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
Solution 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.
manuelBetancurt
Computers, BJJ, Open Source, Psichotronics "Ars longa, vita brevis, occasio praeceps, experimentum periculosum, iudicium difficile", "Life is short, [the] craft long, opportunity fleeting, experiment treacherous, judgment difficult." Hippocrates "Hay cosas tan grandes y complejas que solo el hombre indicado o un loco se atreven a afrontar!!", "There are things so great and complex that only the right man or a nut case dare to face!!" Don Juan
Updated on November 28, 2020Comments
-
manuelBetancurt over 3 years
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!
-
James andresakis about 11 yearsThis is the easiest explanation of this topic Ive seen online anywhere. I literally book marked it on my designers work station lol
-
Kevin Coppock about 11 yearsHaha, great! :P Just added info for XXHDPI, too.
-
phtrivier over 9 yearsHow 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" ?
-
Kevin Coppock over 9 years@phtrivier 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.
-
Azlan Jamal almost 8 yearsBest explanation. I also use this site for conversion regards px and dp. pixplicity.com/dp-px-converter
-
Mahdi over 7 yearswhat last part of you answer meanings? ldpi 120 ? where this number came from?
-
widavies about 4 years@phtrivier 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 todip
and then convert to the image sizes you may need. -
widavies about 4 yearsI also made a tool to calculate this on the fly: pixit-tool.web.app/#