Portrait Mode | |||
---|---|---|---|
4 x 1 | 3 x 3 | 2 x 2 | |
Bounding Box: | 320 x 100 | 240 x 300 | 160 x 200 |
Outer Frame with Shadow: | 304 x 75 | 224 x 272 | 144 x 189 |
Inner Edge Box: | 287 x 58 | 207 x 256 | 129 x 174 |
Landscape Mode | |||
---|---|---|---|
4 x 1 | 3 x 3 | 2 x 2 | |
Bounding Box: | 424 x 74 | 318 x 222 | 212 x 148 |
Outer Frame with Shadow: | 412 x 63 | 305 x 200 | 199 x 136 |
Inner Edge Box: | 395 x 46 | 288 x 182 | 184 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 Articlehttp://goo.gl/C13Nx |
No comments:
Post a Comment