Android Resizer Toolkit Documentation
I love Android, but one of the most boring tasks I have to do when designing a UI is to create the full set of drawables for all resolutions; so I've decided to create a simple extension for Photoshop for automating this kind of tasks.
Enter Android Resizer ToolkitWith this panel you will be able to generate a set of icons for the main Android dpi resolutions (xhdpi, hdpi, mdpi, ldpi), from a single image or even from a grid of images. As an example, you can create an animation using your favorite tool (for instance Flash Pro), generate a spritesheet and then export each single image directly in your project (the tool will take care of creating the corresponding drawable folders if they do not exist).
DownloadThe extension can be freely downloaded as a .zip file.
Opening the PanelTo open the panel from Photoshop, choose Window > Extensions > Android Resizer Toolkit as shown in the following picture.
The Panel InterfaceExporting drawables for Android is divided in two steps:
- Step 1: setting the section size and choosing the drawables size
- Step 2: setting the filenames, choosing the export path and generating the drawables
Step 1 - Setting the section size and choosing the drawables sizeThe first section of the panel lets you define the dimensions for the drawables. Here's the main features:
- help button: this will link to the online documentation (this page)
- item size fields: these two text input fields let you define the width and height attributes for a single exported element
- set document size button: clicking on this icon will set the Item size fields to the active document dimensions. This comes handy if you plan to export the document as a single image (for instance, an icon)
- xhdpi fields: if enabled (by selecting the checkbox), will export the images in a folder named drawable-xhdpi. The two text inputs will set the size of the images
- hdpi fields: as above, but the target folder will be drawable-hdpi
- mdpi fields: as above, but the target folder will be drawable-mdpi
- ldpi fields: as above, but the target folder will be drawable-ldpi
- next button: this will open the second step of the resizer panel.
Step 2 - Setting the filenames, choosing the export path and generating the drawablesOnce the drawable dimensions are set you have access to the second panel:
- help button: as for panel 1, this will link to the online documentation (this page)
- name list: the file name for each generated drawable. Clicking on the name will let you edit it. If you leave a text input empty, no drawable will be generated for that section (handy when you have some empty sections you don't want to export)
- click to edit/clear button: clicking on this button automatically clear the corresponding textfield and focus on it for typing. It's also useful if you want to exclude some items from exporting by clearing the name
- generate sequential names button: clicking on this button will rename the full list with the corresponding item, adding a four digit sequential number. This feature is usually chosen if you plan to export a sequence of frames (for instance for a progress bar)
- enable/disable rollover item selection: if enabled, rolling over an item on the list will select the corresponding area on the active document
- resample method menu: this will select the method for resizing the images. The default value is bicubic
- animation-list export parameters: if enabled (by selecting the toggle button), an animation-list xml file will be exported in the drawable folder of the export path (the directory will be generated if it does not exists). The first text input will be used as the name of the file, while the second one id the duration (in ms) for each item in the sequence
- export path: the directory where all the drawables will be exported. You can choose your Android project res folder and the extension will take care of the rest
- export drawable button: when you are ready, simply click on this button to start the export process.
- back button: this will open the first step of the resizer panel.
Size ValidationWhen you insert the drawable size, you will get a warning if some size won't be an integer, as shown below.
Please note that you will be able to export the files anyway, but the width or height will be rounded. Also note that you can export some files that will have a higher width or height than the original section, but these will obviously appear pixelated.
Tutorial - Exporting an IconThis tutorial shows how to export a single image with Photoshop as a multi resolution drawable in your android project. It is based on Photoshop CS6 (but it can be easily ported to Photoshop CS5).
1. Download and Install the ExtensionIf you don't have the extension installed in Photoshop, please download it now (it's free!).
2. Opening the PanelWe will be using a battery image, like the following one (96x148 pixels):
Open this file in Photoshop and then the Android Resizer Toolkit (Window > Extensions > Android Resizer Toolkit). Click the Set document size button; width and height should be filled with 96 and 148 values. We want the mdpi drawable to be 48dpi wide, so insert this value in the first text input in mdpi. All the fields should be auto-completed, as shown in picture 2. Click the Next button to open step 2.
3. Naming and Exporting the IconThe list should have a single item named element0000. Click on it and rename it battery. Leave the Resample method value as it is.
Open the export directory selection by clicking on the Select path button. Navigate to your chosen directory and confirm (for instance your android project res folder). You are now ready to export the images. Click on Export drawables and let Photoshop do the rest. An image named battery.png will be generated for each selected resolution, as shown in picture 4.
Tutorial – Exporting an Animation-List SequenceThis tutorial shows how to export a sequence of images with Photoshop as a multi resolution drawable animation-list in your android project. It is based on Photoshop CS6 (but it can be easily ported to Photoshop CS5).
1. Download and Install the ExtensionIf you don't have the extension installed in Photoshop, please download it now.
2. Opening the PanelFirst of all open the following document (1024x2048 pixels) in Photoshop. The image has four columns and eight rows, each sized 256x256 pixels. Some elements are empty: we will see later how to exclude them from the export process. Open the Android Resizer Toolkit and insert 256 in both width and height attributes. Enable ldpi exporting by clicking on the corresponding checkbox. Insert 265 in the first text input of xhdpi; all the other elements should be auto-completed correspondingly.
Click the Next button to proceed to the next panel.