[android-developers] Widget alignment - Small, Medium, High density

[Zachary Burke]

I have followed the tutorials on developers.android.com and designed my
widget using the provided widget frame assets for a 2x2 horizontal and
portrait layout.  This frame asset was modified to create a 1x1 frame by
following the recommendation of grabbing a screenshot and aligning to the
search widget.  Layouts are defined using only dp and everything aligns
properly on medium density screens.  I have read over the documentation on
supporting multiple screen-sizes many times and I understand how to create
layouts specific to each screen density and/or size.

I know that I need to create new layouts for small and high density screens,
but from looking at the improper layouts, I do not understand *what* I need
to change in my existing layouts.  My general question is, based on the
screenshots below, what do I need to modify to make alternate layouts with
proper alignment?

To illustrate my confusion and thought process, here is the layout on a
medium density screen.  I'm unsure whether image tags are allowed so I will
include both an image and a direct link.
<img src="http://img268.imageshack.us/img268/7443/16shot.png";>
http://img268.imageshack.us/img268/7443/16shot.png

Here is what things look like on a small density screen.
<img src="http://img16.imageshack.us/img16/9789/smalldv.png";>
http://img16.imageshack.us/img16/9789/smalldv.png

The alignment disparity is easy to see in the above image, the Widget's may
be the proper overall length and height, but the padding on the borders is
wrong.

So I thought "self, perhaps the background image dimensions are causing an
alignment issue due to scaling on different densities".  The obvious
solution would be to create a custom layout asset like I did for the 1x1
frame.  In response, I filled in the transparent areas of the image to see
where my borders were.  On a low density screen, the borders were snuggly
aligned to the edges of the search widget, great, an easy fix in familiar
territory .  But on a high-density screen this isn't the case.
<img src="http://img297.imageshack.us/img297/310/highd.png";>
http://img297.imageshack.us/img297/310/highd.png

>From the above screenshot you can see that the far left of the widget isn't
even aligned with the left edge of the search widget, even with transparent
areas filled.  I do not understand where this extra padding is coming from.
 It seems that regardless of DPI, the origin of the image (top left) should
always be in the same location, is this not true?  Why is this not true?

Still, the most confusing layout is on Android 2.2 at Medium density, (which
works fine on all other platform versions) where the Widget's align like so,
a site so embarrassing I almost didn't post it.  Again I am unsure what
would be causing this ugly overlap:
<img src="http://img375.imageshack.us/img375/5091/22shot.png";>
http://img375.imageshack.us/img375/5091/22shot.png

For reference, I am compiling against 1.6 with a minSdkVersion of 3.  My
supports-screens tag has anyDensity=true (because I am using
density-independent units for all of my layouts):
<supports-screens
        android:anyDensity="true"
       android:largeScreens="true"
       android:normalScreens="true"
       android:smallScreens="true" />

In my appwidget-provider, I am using the recommended formula of ( (74 *
number of cells) - 2) to specify the minWidth/minHeight.  For my 2x2 widget
this is 146dp x 146dp and the 1x1 widget is 72dp x 72dp.  The actual widget
layouts are using RelativeLayout where I specify the layout_width/height in
dp based on the dimensions/orientation given in the Widget Design
Guidelines.

Thank you for your consideration.

-- 
You received this message because you are subscribed to the Google
Groups "Android Developers" group.
To post to this group, send email to android-developers@googlegroups.com
To unsubscribe from this group, send email to
android-developers+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/android-developers?hl=en