Recently we made the jump to the latest Android sdk (15). We did this to take advantage of the new features and give HD Widgets a long runway. Unfortunately, the “creative” folk behind Android decided to throw a new curve-ball that started with sdk 14: forced widget margins:

Note: As of Android 4.0, app widgets are automatically given margins between the widget frame and the app widget’s bounding box to provide better alignment with other widgets and icons on the user’s home screen. To take advantage of this strongly recommended behavior, set your application’s targetSdkVersion to 14 or greater.

While they say “strongly recommended”, it’s actually a forced feature. This is a setting you have no control over – it’s automatically added and you can’t change it.

What does this mean? It may seem like a small change but it will have a dramatic effect on your layouts. Essentially if you build using the ICS APIs, widgets are reduced in size by ~15% on ICS devices and *only ICS devices* ! While this was implemented solely to make Google’s Launcher look better, it affects all launchers on the device.

Here’s what you’ll see if you use the new sdk and use the built-in margins:

Backwards-Compatible Padding

The best solution for backwards size-compatibility is to use @dimen to assign dynamic padding depending on OS version. So each of our widgets has this as our base layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/widget"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:padding="@dimen/widget_padding">

From here we create two dimens.xml files, one for your values folder, and the other for values-v14:

values/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<dimen name="widget_padding">6dp</dimen>
</resources>

values-14/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<dimen name="widget_padding">0dp</dimen>
</resources>

The key here is that all devices get an extra 6dp of padding, but we revert that to 0dp for v14 devices so they only get the native padding.

Final Tip: remember that the xml value is singular: dimen but the file name is plural: dimens.

New Issues

While this solution works great for backwards-compatibility there’s a couple of new issues that you’ll need to be aware of, both of which are unique to ICS devices.

The most obvious issue will be the grid size difference between the Galaxy Nexus launcher and third-party launchers like ADWLauncher EX:

Similar to Honeycomb, the new ICS launcher’s grid isn’t actually full screen. The native ICS launcher features a non-removable Google Search Bar on the top. To keep the grid layout proportional, they reduce the total grid size by 20%. That causes another dramatic size difference between layouts of launchers on the same device.

The other new issue introduced by ICS’s new widget margins is that sometimes the native launcher hiccups and forgets to auto-apply the margins, resulting in unsightly bloated widgets:

I’ve seen this pop up a few times. I don’t know why & I haven’t found a pattern. Needless to say, you may get feedback from your users about this so it’s useful to know it happens.

[Update 4/24/12: changed the code from using multiple RemoteViews to using @dimen padding. The RemoteViews method seemed to work fine and offered more flexibility, but @dimen is part of the Developer Documentation so it is less likely to break in the future.]

The “All Icons” pack (also part of “download all”) features two Halo themes with icons for mdpi, hdpi, & xhdpi. Unfortunately, most of the icon files were improperly named so they can’t be used for production: resource file names can’t use hyphens nor start with numbers.

So I  did a quick fix and renamed them. You can download them here

So instead of:

• 1-navigation-accept.png

it’s now:

• ic_navigation_accept.png

Hope this helps =)

download Android ICS All Icons pack

The first four tracks work really well. I have many Jacques Renault tracks but Norman’s Fire had me hooked right from the start. The T-Ski Valley track is from Carl Cox’s Beatport Top Ten list back in July, but not a lot of DJs have mixed it well (it’s a solid “here we go!” starter). Before I found those, track #3,Ilija Rudman’s See, was going to be my starter. 15 to 20 (Anthony Manfield Disco Remix) by The Phenomenal Handclap Band was a big score I picked up on vinyl from Mark E Quark’s excellent Discogs shop, so I was stoked to find a digital version I could mix with.

The middle section is a bit rougher. Those track were the inspiration for the mix due to their retro 80s house sound, but they don’t play well together. If fact, they’re a big reason I sat on this mix for so long (and even considered not releasing it). In the end I took editorial liberties to avoid some of the tedious bridges and just gritted my teeth for some of the transitions. In a few months I’ll probably not even notice

The last bit is more modern semi-retro house with a couple of organic tracks. I re-used You’ll Disappear (was also in Pastiche) to tee-up Sandwich Love, a sweet funky disco ditty. Crazy P’s house acts as bookends while International Track does it’s job as a feel good finale a la Daft Punk.

Artist mentions: I’m loving The Phenomenal Handclap Band (I have another mix pending with an even more awesome track by them). They’re playing here in Oakland in October with Bryan Ferry (i.e. Roxy  Music). I’ve been picking up as many good Idjut Boys & Ashley Beedle tracks as I can get my hands on, which in turn introduced me to Flash Atkins & Frank Booker. Finally there’s the guys I’ve been playing everywhere Prins Thomas & Rune Lindbaek.

download mix (320k)

HD Widgets follows our Mixwit formula: take something simple, make it attractive and fun, and make it easy for users to be able to customize and personalize it. The app includes a dozen widgets with a variety of clocks, backgrounds, layouts, and options. The UI of the app itself has a lot of slide-based navigation – the pages can be swiped, the menu, and all of the options – so it’s fun and really intuitive to use.

There were a few challenges. First off was the design challenge of dealing with portrait/landscape layouts for both widgets and apps on a 10:9 screen. Another was figuring out how to build a platform to allow hundreds of widget designs and styles without flooding the OS widget menu. As such we needed dynamic widgets even though they require static layouts. We also had to deal with matching our look and feel to the new Honeycomb theme while still making the app intuitive

The next challenge for us is making it work on smaller screens: scaling down the app while still providing the same fun, swiping experience. We also have to deal with differences in the different OS versions. We avoided stuff like fragments, but there may be other differences we’re yet to uncover.

Anyways, that’s my intro. I’ll try to put something together on Honeycomb UI/UX shortly. I’m crammed for time so it will either happen immediately or not until much later.

In the meantime, please download HD Widgets for your Honeycomb tablet and have fun with it.

Last and least, here’s the logo/icon I made for the app using Illustrator and Swift3D: