• 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

If you want to share your opinion, leave a comment.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>