Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm working on an Android project, and we have a splash screen where the user logs in that has a background image that takes up the entire screen. What is the minimum set of assets needed for this? The documentation suggests to provide different bitmap drawables for different screen densities, and to use size and density-specific resources. We also allow portrait and landscape orientation, so my designer gave me 18 bitmaps to cover large, normal, and xlarge screens each with portrait and landscape bitmaps in each (mdpi, hdpi, and xhdpi) density. This seems a bit excessive to me. Any suggestions?

share|improve this question
    
I remember giving a developer just one set of images (only for mobile, not tablet) long enough to fit in every screen possible (the app would show it all or cut it automatically). But you might have better luck asking in stackoverflow.com –  Yisela Sep 12 '12 at 4:17
    
This seems more like a design question than a programming question. It's a responsive design issue. –  Christopher Perry Sep 12 '12 at 17:42

3 Answers 3

up vote 3 down vote accepted

From your documentation:

You only need to provide density-specific drawables for bitmap files (.png, .jpg, or .gif) and Nine-Path files (.9.png). If you use XML files to define shapes, colors, or other drawable resources, you should put one copy in the default drawable directory (drawable/).

This implies that other types of non-bitmap "drawables" (XML, Vector) are supported. So for the case of a splash screen, perhaps one might design it simply with large color block(s), some text and a single vector image (logo). This way, the color is a "flood fill" or gradient (two or three gradients from color to transparent at differnt angles overlaid can be quite nice) which is handled dynamically by software, the text is handled by the type services of the device (and localizable), and the drawable's resolution (and/or scale) is set at the time of display. You will wind up with a single set of assets and the best-case scenario regarding resolution. This also has the benefit of far less storage and drawables may be reusable in other contexts.

This is device- and program-capability specific.

Alternatively, one might design for the largest size being mindful of small-screen crop (like pan'n'scan for movies), set the drawable to "center without zoom".

share|improve this answer
    
There's not exactly any Vector support in Android: stackoverflow.com/questions/4015680/vector-graphics-in-android. Every designer I've worked with has given me bitmap drawables (.png). However, the approach you describe is what we ended up doing. We just broke down the image into separate images, nine patched the stuff that could stretch, and applied a gradient defined in XML for the background. –  Christopher Perry Oct 6 '12 at 22:53

The thing is, if all you're going to do to your bitmap to make different versions for different resolutions is to rescale it using an ordinary resampling algorithm, then you may as well only provide it at a single resolution anyway.

The point of including different versions of the bitmap for different resolutions is for when you want to have different artwork shown when at different resolutions.

Here's a demo of plain scaling vs actually modifying your artwork by hand for different resolutions. It's not from Android but the same idea applies.

enter image description here

And here's an article that explains it very well.

Android itself will do plain scaling for you; you only need to provide different artwork when you actually have different artwork targetting different resolutions.

So if all your images are just resized versions of the same thing, you only need to include one (1): the highest resolution of that thing. If you have different artwork tailored specifically to lower resolutions, then include them.

As for actually designing this artwork, whether or not it scales well to lower resolutions or you need to provide alternative artwork for those resolutions really depends on the subject matter. If it's fine details and sharp fine lines then you probably want to provide alternative graphics.

A splash screen probably isn't like that though.

With icons and the like which may not rescale well, 4 different versions for ldpi, mdpi, hdpi and xhdpi is the most you are likely to need, and you may get away with less.

share|improve this answer
    
Minor critique: your image example is not comparing "plain scaling" to vector: it is comparing "individually hand-rendered to target sizes" to vector scaling. This is obvious if one considers that the "lines" in the PNG example are all the same thickness, regardless of scale. –  horatio Oct 5 '12 at 19:50
    
Yeah that was actually my point. Maybe I didn't communicate it well enough. –  thomasrutter Oct 8 '12 at 6:07
    
I think you communicated it, but the image chosen doesn't. Again, a very minor critique. –  horatio Oct 9 '12 at 14:29

It all depends on how well you want to support each device.

If your background is a photo, you can get away with a surprising amount of scaling (and compression) before it starts to look bad.

If it's something that needs to be more precisely rendered (like line art) you may need to go with a couple different densities.

In either case you should have a small set of assets that can be pulled as appropriate and scaled or cropped to fit the viewport. I would think 2 or 3 would do.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.