Android Asset Studio – Optimizing UI Image Assets

Optimizing UI Image Asset-Android has categorized the mobile displays into various density buckets to ease the image optimization workflow.

Density Bucket             Scaling Factor           Resolution

mdpi                                   1.0                                     360 x 640 px

hdpi                                    1.5                                     540 x 960 px

xhdpi                                  2.0                                    720 x 1280 px

xxhdpi                                3.0                                    1080 x 1920 px

xxxhdpi                              4.0                                    1440 x 2560 px

 

Now suppose you have a Mobile UI designed in Photoshop (or whatever program you prefer) at the dimensions of 720 x 1280 px and you have an image asset that you need to export for all the densities that has a pixel dimension of 100 x 100 px. You already know that it falls under the density bucket xhdpi(2.0). Now head over to http://androidpixels.net and in the Pixels column in front of xhdpi enter the value 100. It will make other values change and you’ll have the pixel dimension for other densities that you need to create the image asset at. This scenario works when you manually need to create image assets and when the image asset is not in a square ratio.

There is another scenario in which you might need to extract all the image assets in a design. If you follow the above steps it will take a lot of time depending on the number of image assets and will definitely lead to frustration.

I have figured out a way around this problem. You just need to follow the below mentioned steps.

1. Design on the highest resolution (i.e. 1440 x 2560 px) [xxxhdpi].
2. When you export the image assets make sure they are in square ratio, if needed add transparent pixels to the image assets to make them square. For e.g. If an image asset is 10 x 30 px, make it 30 x 30 px by adding transparent pixels.
3. Calculate the DP value of every image asset using http://androidpixels.net and export them for all densities using Android Asset Studio by following these screenshots.

 

You already know that your design fall under xxxhdpi. Suppose one of your image asset is at 200 x 200 px. Enter this value in front of xxxhdpi and next to it you’ll get it’s DP value or optical size. In this case it’s 50 DP.

Now head over to Android Asset Studio and click on the 4th link that says Generic Icons.

Now on this screen set all the options as illustrated.

Navigate to your Downloads folder and find the zip file, Extract it and you’ll find all the image assets placed in the right folders in respect to the different density buckets.