2011-04-10

Android Widget Design Guidelines - Widget Sizes

While the Android Widget Design Guidelines do clearly list the bounding box dimensions for widgets, they don't list recommended dimensions for the outer frame or the inner edge box. The following apparent recommendations were extracted from the standard widget frames Photo$hop files they provided for download.

Portrait Mode
4 x 13 x 32 x 2
Bounding Box:320 x 100240 x 300160 x 200
Outer Frame with Shadow:304 x 75224 x 272144 x 189
Inner Edge Box:287 x 58207 x 256129 x 174

Landscape Mode
4 x 13 x 32 x 2
Bounding Box:424 x 74318 x 222212 x 148
Outer Frame with Shadow:412 x 63305 x 200199 x 136
Inner Edge Box:395 x 46288 x 182184 x 121


Unfortunately, these dimensions don't all nest with even spacings. For example, the portrait-mode inner edge box has a width of 207, which leaves 33 pixels of padding to split between the left and right sides, but 33 is an odd number, and we cannot split a pixel in half, so one is left to decide what to do with an extra pixel. My solution is to simply shrink the inner edge box width to 206 pixels.

Of course, different screens will actually use different numbers of pixels both horizontally and vertically (depending on actual screen sizes and pixel densities). For this reason, and to have smaller graphics file sizes, as the guidelines suggest, use 9-patch graphics, but note that scaled graphics might be fuzzy in appearance, and it may be necessary to create LDPI, MDPI and HDPI versions of widget graphics.

For Paint.NET, I made simple templates for the six standard widget sizes. Download and enjoy. (I'm using the term "template" loosely. These templates simply have three layers each with outlined boxes matching the dimensions described above.)
Link To This ArticleQR Code Link To This Articlehttp://goo.gl/C13Nx

No comments:

Post a Comment