How do I export a graphic to support multiple Android screens in Illustrator?

Question

I'm designing an application for Android right now and am not sure how to proceed.

I want to be able to support everything from a medium-density screen to and extra-extra-high-density screen. google suggests creating a separate resource for each density screen, using a resource folder structure like below:

res/layout/my_layout.xml              // layout for normal screen size ("default")
res/layout-large/my_layout.xml        // layout for large screen size
res/layout-xlarge/my_layout.xml       // layout for extra-large screen size
res/layout-xlarge-land/my_layout.xml  // layout for extra-large in landscape orientation

res/drawable-mdpi/graphic.png         // bitmap for medium-density
res/drawable-hdpi/graphic.png         // bitmap for high-density
res/drawable-xhdpi/graphic.png        // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png       // bitmap for extra-extra-high-density

res/mipmap-mdpi/my_icon.png           // launcher icon for medium-density
res/mipmap-hdpi/my_icon.png           // launcher icon for high-density
res/mipmap-xhdpi/my_icon.png          // launcher icon for extra-high-density
res/mipmap-xxhdpi/my_icon.png         // launcher icon for extra-extra-high-density
res/mipmap-xxxhdpi/my_icon.png        // launcher icon for extra-extra-extra-high-density

Here are descriptions that define the terms for each density resource

Screen Size
small   Resources for small size screens.
normal  Resources for normal size screens. (This is the baseline size.)
large   Resources for large size screens.
xlarge  Resources for extra-large size screens.

The pixel density is also quantifiable as below:

Density
ldpi    Resources for low-density (ldpi) screens (~120dpi).
mdpi    Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi    Resources for high-density (hdpi) screens (~240dpi).
xhdpi   Resources for extra-high-density (xhdpi) screens (~320dpi).
xxhdpi  Resources for extra-extra-high-density (xxhdpi) screens (~480dpi).
xxxhdpi Resources for extra-extra-extra-high-density (xxxhdpi) uses (~640dpi). Use this for the launcher icon only, see note above.
nodpi   Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density.
tvdpi   Resources for screens somewhere between mdpi and hdpi; approximately 213dpi. This is not considered a "primary" density group. It is mostly intended for televisions and most apps shouldn't need it—providing mdpi and hdpi resources is sufficient for most apps and the system will scale them as appropriate. If you find it necessary to provide tvdpi resources, you should size them at a factor of 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x 133px for tvdpi.

 Orientation
land    Resources for screens in the landscape orientation (wide aspect ratio).
port    Resources for screens in the portrait orientation (tall aspect ratio).

Aspect ratio
long    Resources for screens that have a significantly taller or wider aspect ratio (when in portrait or landscape orientation, respectively) than the baseline screen configuration.
notlong Resources for use screens that have an aspect ratio that is similar to the baseline screen configuration.

They also give details for the ratio for exporting screen sizes here:

To create alternative bitmap drawables for different densities, you should follow the 3:4:6:8:12:16 scaling ratio between the six generalized densities. For example, if you have a bitmap drawable that's 48x48 pixels for medium-density screens, all the different sizes should be:

36x36 (0.75x) for low-density
48x48 (1.0x baseline) for medium-density
72x72 (1.5x) for high-density
96x96 (2.0x) for extra-high-density
144x144 (3.0x) for extra-extra-high-density
192x192 (4.0x) for extra-extra-extra-high-density (launcher icon only; see note above)

So for my case, I'm currently creating graphics that either take up full-screen or ~1/2 screen. I've created vector images In Illustrator using a Surface Pro 3 (pixel density 216.33). I believe that PNG-24 is the recommended format; please correct me if I'm wrong. How should I export to support to support each screen?

Answer 1

Each asset you need for the app will have to be saved as a bitmap image (PNG or WebP) at the various densities needed. If it’s appropriate, you can also use Android Vector Drawables, which are an SVG-like file format (they use SVG pathData).

PNGs are the only format you can directly export from Illustrator, and they can also represent anything (using Vector Drawables limits what’s possible).

Start at 1× (mdpi)

You should create all your assets at the 1× scale, or Android’s mdpi. This targets a ~160PPI screen, and it means 1 pixel equals 1 Android dp (density-independent pixel).

Designing at 1× makes exporting to the various sizes easier. It also means you can use the measurements in the Material Design documentation without needing to translate sizes.

For example, an Android floating action button (FAB) is 56×56dp. That means your artwork area should be 56×56 pixels in Illustrator. When designing at 1×, 1 dp = 1 pixel.

Export for Screens

Once your artwork is set up, you can export using File → Export → Export for Screens. The easiest way to work is probably to use an artboard for each asset you want to export. Export for Screens will take care of building all the sizes Android requires.

You may have different requirements, but as of today (March 2017), I usually build for 1× (mdpi), 2× (xhdpi), 3× (xxhdpi) and 4× (xxxhdpi).

A note about export quality

I feel compelled to also mention some caveats when exporting bitmaps from Illustrator — shape antialiasing isn’t as high quality as other tools, and gradients are not dithered. This isn’t an issue when exporting SVGs or other vector formats, but it is a problem when Illustrator is rendering bitmaps and exporting in a bitmap format, like PNG. That doesn’t mean you shouldn’t use Illustrator for this task, but keep it in mind if you aren’t happy with the results.

Answer 2

PNG 8 is fine unless you are using text that has special attributes like shadows and such. But you are in luck if you are using AI CC 2017, you can use the [export for screens option].1

I do believe you will be quite pleased once you check that out. Your task is no longer a good chunk of a 24 hour period.