2011-04-26

A Simple, Complete App Widget - Part 1

Note: This blog post is incomplete, and I discontinued posting part 2, as the Widget API and abilities were changing significantly with new releases of Android, at the time of writing. I left this post online, as it has many views, and some useful content.

While information on developing App Widgets for the Android home screen is plentiful, much of what's available - including the contents of many books on Android software development - is incomplete, often broken, and leads to improperly functioning App Widgets. One all too common outcome is App Widgets that unnecessarily run users' batteries down. Another frequent fail includes funky App Widget behavior if more than one instance exists on a user's home screen. This post is intended to provide a complete blueprint for folks to follow, to develop their own App Widgets that display dynamic content while consuming minimal device resources, provide standard user input controls, and otherwise work correctly as expected.
Link To This ArticleQR Code Link To This Articlehttp://goo.gl/RN1ga

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