App widget inconsistent sizing between tablet and phone

Question

I am attempting to design an app which reproduces the shortcut styles of the standard app shortcut home screen icons but as a widget. Note, this is currently just looking at the standard Android homescreen.

I have made the following observations using the "Dump View Hierarchy for UI Automator" tool in the DDMS -> Devices view of Eclipse:

The space given in the 1 x 1 square changes depending on screen density, orientation and whether the phone home screen is in "phone mode" or "tablet mode" (start a 4.x emulator and you can tell by the background amongst other things). Screen density effects the size as expected (0.75, 1, 1.5, 2.0 density factor scaling), but the orientation and 'home screen mode' are quite unpredictable. Specifically:

---

DIMENSIONS FOR A 1x1 'SQUARE' ON THE HOMESCREEN

Phone mode:

• Portrait: 80dp x 100dp = 4:5 aspect ratio
• Landscape (if available - not thoroughly tested): 106dp x 74dp = 53:37 aspect ratio

Tablet mode:

• Portrait: 96dp x 96dp = 1:1 aspect ratio
• Landscape: 96dp x 96dp = 1:1 aspect ratio

---

As you can see, there is barely any consistency whatsoever, but these are the dimensions given to a 'square' on the home screen. It gets even worse when looking at the space actually given to widgets (yes, it does differ from the square space available and used by the system shortcut widgets):

---

DIMENSIONS GIVE TO A WIDGET IN A 1x1 'SQUARE'

Phone mode:

• Portrait: 80dp x 100dp = 4:5 aspect ratio
• Landscape (if available - not thoroughly tested): 90dp x 58dp = 45:29 aspect ratio

Tablet mode:

• Portrait: 72dp x 72dp = 1:1 aspect ratio
• Landscape: 72dp x 72dp = 1:1 aspect ratio

---

So I'm stuck with:

• Inconsistent aspect ratios between phone and tablet modes
• Smaller areas given for an app widget then that of an app shortcut in some cases. Consequently, the relative and perceived size of widgets will look very different on a tablet vs phone?
• The smaller areas aren't even vertically centred, they are mostly top aligned with a 2dp top margin which means they don't even look aligned with a neighbouring application shortcut to start with, let alone when trying to produce a similar looking shortcut through a widget

To visualise, the following images show a default system shortcut (with a red box surrounding showing the 'square dimensions - which both system shortcuts and widgets always share). Next to it is my widget with the blue highlight showing the bounds of a MATCH_PARENT setup, hence where the widget can actually draw within its 'square':

Phone - Port:

Tablet - Land:

Tablet - Port:

Most important to take from here, is the blue area of the widgets on a tablet does not even include the space where the system shortcut draws its text?

Does anyone have insights into:

1. Why the home screen is so inconsistent?
2. Why app widgets are not given the same drawing space as that of a system shortcut / or should it be and I am doing something wrong?
3. Should I be doing something else, or is it just accepted that for a 1x1 widget which takes up all its given drawing space, it will look 'smaller' (compared to its surroundings) on a tablet than it would on a phone?

Answer 1

And even better, many launchers allow the user to customize the size of their grid. Per the design guidelines for App Widgets, you cannot rely on an exact size on all devices. Instead, determine a minimum width and height and let the home screen determine how many squares the layout takes up.

They do provide some guidance on what you can expect for the minimum size of a cell (and all your numbers are much larger than that it seems), but again custom launchers may reduce this minimum even lower.

I find it best to focus on what components need to be in your layout (buttons, etc) and then follow the Metrics and Grids design guidelines to determine your minimal size (noting the margins are automatically added on Android 4.0+ devices but not on <4.0 devices). Then make sure your layouts are dynamic enough to fill in the space provided to them (centering text, etc as appropriate). Remember widgets are assumed to be a framed, single entry, rather than floating text as noted on the App Widget Design guidelines.