Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I am attempting to create beautiful hi-res graphics for Android notifications, but am running into some issues. In Jelly Bean, there is a new place for large icons (see the notification design guidelines here) on the left side of the notification banner (see below #2 Large icon):

enter image description here

All of the stock Android icons are beautiful and hi-res, but unfortunately the icons I have been creating in illustrator/photoshop do not look as crisp on the hi-res display.

My files are 96 x 96px, but I am concerned that this isn't the right size for hi-res icons, and I haven't found any good info anywhere regarding the best sizing for these.

Any help is greatly appreciated!

share|improve this question
add comment

1 Answer

up vote 12 down vote accepted

Android icons (and other UI elements, like drag lengths) are measured in dp. A dp is a device/density-independent pixel. 1 dp is equivalent to 1 px on a 160 dpi screen. But to convert to other screen densities, you need to multiply it by a density factor. So it's generally recommended that multiple images are supplied for most icons.

For example, the notification icons used in the status bar are specified as 24x24 dp, with a 1 dp margin (so the actual icon only takes up a 22x22 dp optical square, though some of the AA can bleed into that 1 dp margin/safeframe). To convert 24 dp to actual pixel sizes, these rough calculations are used:

display density  dp units * scale = px units
ldpi   ~120 dpi   24x24 dp * .75   = 18x18 px
mdpi   ~160 dpi   24x24 dp * 1.0   = 24x24 px
hdpi   ~240 dpi   24x24 dp * 1.5   = 36x36 px
xhdpi  ~320 dpi   24x24 dp * 2.0   = 48x48 px
xxhdpi ~480 dpi   24x24 dp * 3.0   = 72x72 px

There's also an intermediate display density called tvdpi (~213 dpi) that sits between mdpi and hdpi and has a scale factor of 1.33, but this is much less common. What the Android docs recommend is that you follow a 3:4:6:8:12 scaling ratio when providing prescaled bitmap images (usually PNGs) for the most common display densities.

I don't see anywhere where they specify the dp size for the large icons used in notifications, but the height of each notification in normal inbox view is 64 dp. So that means the max size for icons/images shown there would be:

ldpi:      48x48 px
mdpi:      64x64 px
hdpi:      96x96 px
xhdpi:   128x128 px
xxhpdi:  192x192 px

If you want to know exactly what image sizes Android's stock icons are, you should be able to find out from the Android Icon Templates Pack, v4.0.

See also this SO question: Honeycomb notifications: How to set largeIcon to the right size?

share|improve this answer
1  
You should rewrite some of android's design documentation! The info is all there, but is not condensed very effectively. The docs are fantastic most of the time, but here they failed me. Many thanks for the clearest and most concise explanation yet! –  Daniel Smith Feb 8 '13 at 20:41
add comment

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.