About Android image and asset sizes
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!
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
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.
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
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.