dotnetco.de

Create Images for iOS and Android automatically

Android and iOS support using images in different sizes automatically. So to use this feature, you need to provide images in several formats. For Android (as defined in Android Developers Doc) it’s:

  • xxxhdpi: 4x (640dpi)
  • xxhdpi: 3x (480dpi) (75% of xxxhdpi)
  • xhdpi: 2x (320dpi) (50% of xxxhdpi)
  • hdpi: 1.5x (240dpi) (37.5% of xxxhdpi)
  • mdpi: 1x (160dpi) (25% of xxxhdpi)
  • ldpi: 0.75x (120dpi) (18.75% of xxxhdpi)

For iOS (as defined in Apples Human Interface Guidelines) it’s:

  • @3x
  • @2x (67% of @3x)
  • standard (33% of @3x)

Of course it’s best to get each file in each solution from your designer. But if you’re working on your own project, you might not have a designer. Nevertheless you should supply all these different image formats at least for performance reasons.

As I have already a Mac OS shell script for Automatic creation of App Logos in different sizes, here is an updated version for all images.

Preparations

  • Create a new directory and copy the script into
  • Copy all the @3x files into this new directory. It’s important that all files are named correct like “filename@null3x.png” to get it working.
  • Make sure filenames follow the android filename guideline which is stricter than iOS. Only use lowercase a-z, 0-9 and underscore. And in source files of course “@3x” is allowed as this part will be automatically stripped for Android.

You could start the script (“sh script.sh”) without any parameters. The script process all files where filename ends with “@3x.png” and do the following:

  • check whether all filenames are valid
  • create new directories for Android (“drawable-xxxhdpi” etc.) and a single directory (“ios”) for the ios images.
  • create the files and save them in the new directories.

In case you get an error message like “convert: command not found“, please make sure that ImageMagick is installed correct on your Mac. You could find more information in Automatic creation of App Logos in different sizes.

echo "Check whether all filenames are valid..."
for f in *@3x.png;
do
	filename="${f%@3x.*}"
	if ! [[ $filename =~ ^[a-z0-9_]+$ ]]; then
		echo "filename '$filename.png' is invalid. Please only use lowercase a-z, 0-9 and underscore."
		exit 1
	fi
done
echo "Filenames are valid. Creating directories if necessary."

mkdir -p drawable-xxxhdpi
mkdir -p drawable-xxhdpi
mkdir -p drawable-xhdpi
mkdir -p drawable-hdpi
mkdir -p drawable-mdpi
mkdir -p drawable-ldpi
mkdir -p ios

echo "Start processing all *@3x.png files in current directory"
for f in *@3x.png; 
do 
	echo "Processing $f"; 
	filename="${f%@3x.*}"

	# Android
	cp $f drawable-xxxhdpi/$filename.png
	convert $f -resize 75% drawable-xxhdpi/$filename.png
	convert $f -resize 50% drawable-xhdpi/$filename.png
	convert $f -resize 37.5% drawable-hdpi/$filename.png
	convert $f -resize 25% drawable-mdpi/$filename.png
	convert $f -resize 18.75% drawable-ldpi/$filename.png

	# iOS
	cp $f ios/$filename@null3x.png
	convert $f -resize 67% ios/$filename@null2x.png
	convert $f -resize 33% ios/$filename.png
done

echo " Done"

Leave a Comment