Raster Graphics for Android

The various cheat-sheet articles I see for this are now out of date, or focus too much on creation of the Launcher Icon, whereas of course we also need graphics inside our apps.

Now, don't go overboard. Whenever possible, use some existing or easily-modifiable drawable. This is a good reason we want specifications instead of just comps.

• Gradients - No need to make repeated backgrounds for bars, etc. when you can just apply a gradient to a box.
• Built-in Shapes - There are hundreds of icons (and form elements, and other shapes) built into Android. Check a tediously-organized but comprehensive list at androiddrawables.com
• Modify Drawables - Many of them can be changed in color, and don't forget crazy things like rotate. Used for making clocks tick and so on, you can just rotate an arrow to point the other way, for example.

But if you have to export raster images, you better do it right or everything will end up fuzzy and/or mis-sized. Note that Android considers density to also loosely map to screen size. MDPI is not just 160 dpi, but also expects a 3.5-4" screen. This seems to have either broken down or I cannot find a new translation table. The original XHDPI assumed something like 10" screens but that's clearly untrue now.

Generaized Desity	Constant Name	Actual Density	Physical Size	Scale Factor	Notes
LDPI	DENSITY_LOW	120 dpi	2-3"	25%	Almost legacy even by the time Android 1.3 was launched. Small and crappy screens. But, they exist and with weird devices coming down (smart watches?) this may matter again. I still export to this density.
MDPI	DENSITY_MEDIUM	160 dpi	3.5-4"	33.34%	The classic medium size, though now a pretty small resolution.
TVDPI	DENSITY_TV	213 dpi	?	44.37%	Yes, for TVs. You probably don't need it, but smart TVs will come up sometime.
HDPI	DENSITY_HIGH	240 dpi	?	50%	The big terribly shiny screens... from 3-4 years ago. Pretty average now.
XHDPI	DENSITY_XHIGH	320 dpi	?	66.67%	The start of the stupid labels by adding Xs. Everything good is Extra High density now.
XXHDPI	DENSITY_XXHIGH	480 dpi	?	100%	First used on the Nexus 10, and now being used a bit more. Largest size I support, at least for now.
XXXHDPI	DENSITY_XXXHIGH	640 dpi	?	N/A	I am not yet exporting for this scale. When I do, I am sure there will be an XXXXHDPI, or they will have changed their mind, and my process will have changed to account for that.

Note that "Scale factor" is mine and based on my procedure. My export procedure may make you giggle, but I don't care. This is what I do and it works for me:

• All icons are drawn in vector programs. Usually InDesign for workflow reasons, but Illustrator is fine also. They are drawn to a physical scale so I know how big they need to each be in the final render.
• Grab all the graphics I will need to turn into rasters, and put them on one page, still in their relative scales.
  • This is all about making images the same physical size on each displayed device. You are reasonably likely to not want to do this, so adjust accordingly. For example, your spec should have designed and stated that devices with so big/small a screen. So, just put that scaled size for the image separately
  • Label stuff. So you don't forget. And, so you can see things. I export lots of white icons, and on clear they are hard to see. Labels help locate them in the next steps.
• Export that page to a PDF.
• Open that PDF in Photoshop. My pages are always tabloid (11x17") size so I set the import resolution to the physical width of the drawing sheet (here, 1224 pt) and the resolution to 480 ppi. This makes it the right size and density for XXDPI. All others will be scaled down from that inside Photoshop.
• Go into the Photoshop document and add guides to be used as crop lines. Leave a bit of space around items. Remember anti-aliasing; it can easily need 2 pixels past the hard image edge for this. If you don't provide that, the image will look odd. Provide more for shadows, and be sure to use the eyedropper to make sure you aren't missing any shadows.
• You can also plan for this, especially if you have shadows, by sticking bounding boxes into the vector art before export. The box won't be able to be a snappable line and will itself get fuzzy over time, but can be a helpful guide for things like shadow edges or gradients to nothing.
• Clean up the edges. You must pixel push as everyone's scaling messes up sharp edges. There tend to be bright and/or dark lines just inside the edges. Clean those off. Do not overly remove anti-aliasing even on straight (vertical, horizontal) items. A little bit makes it look more polished.
• Crop to each item (or, copy and paste to a series of new documents, depending how how your brain works best) then export as a 24 bit PNG
  • Rarely, there is no transparency, and you can use 8 bit PNGs to save size. Rarely.
  • Use all your optimizing skills as usual for exporting to Web. Don't have any? See articles like this one.
• Now scale to the next size down by the appropriate factor, and change the density to the new ppi value.
  • Do this in Image Size, and be sure to change Resolution first. Then switch the Pixel Dimension to percentage. Often, it'll already be spot on, but the rest of the time it'll just be close. Type the right percentage value in one of these boxes to snap it back to correct dimensions.
• Zoom in and clean up the images, again, for this size.
  • As you get smaller, cleanup may mean changes to the image. Even if you don't export special small sizes, do things to make it work well. For example, I often have a /slightly/ darker stroke around the edges of my icons (if not white ones, obviously), to make the edges stand out. When they get small, the stroke takes up so much of the area it looks like an element itself, so I need to remove it.
• Crop if needed, and export these. Same way.
• Go into history, pop back up to the cleaned up version of the original size. Do all scaling from the largest useful size. Progressive scaling will make them fuzzy.
• Repeat till done.

Be sure to put them in a useful folder structure and name them well.

Also a good idea to clean up all images to remove un-needed data using online tools which I'll link to later.

Much of the core data is from the developer.android page on Android Display Metrics and Supporting Multiple Screens. Check that out if you worry they've changed or added a density or just want a much, much longer overview.