0

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?

Improve this question

2 Answers 2

Reset to default
3

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.

Illustrator Export for Screens

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.

Improve this answer
1

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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.