30

I'm creating a splash screen that will display while my Android application loads. I'd like to create it at the correct size so Android won't auto-scale it up or down to fit the screen. (It's a bitmap image, a photograph of an oil painting, so I can't just turn it into a nine-patch.)

But there are at least three important screen sizes I care about: 320x480, 480x854 (Droid), and 480x800 (Nexus One).

I've read the documentation on supporting multiple screen sizes, but I still don't see how I'm supposed to configure different splash screens for Droid/Nexus one (they're both "hdpi" resources as far as Android is concerned), and I don't know exactly how large my splash screen should be in any case. (How tall is the OS title bar/menu in Droid? N1?)

What size should I make these images, and how do I tell Android to use the correct size on a given screen?

Dan Fabulich
  • 37,506
  • 41
  • 139
  • 175

3 Answers3

32

You don't need to worry about the absolute screen size or status bars or anything — that's why we have nine-patch images.

What I did was have an image that looked good for each resolution — essentially a logo on a transparent background, with some text at the bottom.

Then I chopped off quite a lot of space at the top and side edges, made a nine-patch border round the image, with a single pixel near the left, right and top edges. This allows the image to expand evenly at the sides and top to fill the screen.

Edit, in response to Dan's comment below:

Yes, there is a way to determine which graphics should be used for which explicit screen sizes, but it's deprecated.

Just as there are drawable-hdpi and -ldpi resource qualifiers, it's also possible to use drawable-HHHxWWW — the larger pixel dimension coming first.

e.g. drawable-800x480 and drawable-854x480

Christopher Orr
  • 110,418
  • 27
  • 198
  • 193
  • In my case, my image isn't a logo; it's a bitmap portrait (it's a photograph of an oil painting). Converting this painting into a nine-patch image is not an option. – Dan Fabulich Aug 23 '10 at 22:43
  • If it's an image like that, I guess you'd wouldn't want to stretch it. So I'd scale it to the most common resolution for each density, and allow it to have a transparent (or other) border where there's more screen space available. – Christopher Orr Aug 23 '10 at 23:38
  • Adding a border looks weird. Instead, I'd like to define two resources: one for 480x800, and another for 480x854. Is that possible? – Dan Fabulich Aug 26 '10 at 20:16
6

Okay, firstly: you can find the device model via android.os.Build and use that to determine which image to show.

Secondly, I personally wouldn't bother. Layouts should be done in dip since every android screen is 320x480 dip I believe, and android maintains aspect ratio among devices very well through this in my experience. A 480x800 splash set to fill parent has been pretty reliable on both N1 and the droid as far as I have encountered.

jqpubliq
  • 11,874
  • 2
  • 34
  • 26
  • You don't need to look at `Build` to find out the screen resolution or density. The aspect ratios can also vary quite wildly between devices; this is why there are the `long` and `notlong` resource attributes. Anyway, none of this matters as we have the `drawable-xdpi` folders and nine-patch images :) – Christopher Orr Apr 01 '10 at 18:09
  • Went back through the supporting multiple screens document and you have a really good point. `long` and `notlong` were issues I completely missed. Could you post some screens of your nine-patch solution in the extreme cases so I can get a feel of how this method will fare for splashes that are pictures ect? – jqpubliq Apr 01 '10 at 18:39
  • 1
    You say "pretty reliable," but when you're working with bitmap images like mine (a photograph of an oil painting) there's noticeable distortion at 480x800 vs. 480x854. I'd like to define two resources, one for 480x800 and another for 480x854. Is that possible? – Dan Fabulich Aug 26 '10 at 20:18
  • 2
    There are so many Android models these days that using android.os.Build is not a reasonable way to determine screen resolution. – Dan Fabulich Aug 26 '10 at 20:19
  • 2
    couldn't resist not to comment, cause this answer is so funny after two years ;)) – Ewoks Aug 01 '12 at 14:32
1

Another solution that I implemented is to put an ImageView that fills the screen (width and height both "MATCH_PARENT") with scale type "centerCrop". This way, the image is not stretched but cropped along the edges. Try not to put important content (logos and stuff like that) close to the edges. If it is a photograph, I hope that the edges are "expendable" and can be cropped out.

Yoel Gluschnaider
  • 1,785
  • 1
  • 16
  • 20