that’s whacked

Android UI… fragmentation?

Tuesday, Aug 3. 2010  –  Category: Android, Code, Musings, Rdio

Perhaps fragmentation isn’t the right word… but this issue certainly confuses me.  It seems trendy to throw about the term ‘platform fragmentation’ as it pertains to Android, so I’ll capitalise on that buzzword and go with that for now.  (To be fair, I’d love to be proven wrong and will happily eat my words if someone can point out a better way I should be addressing this).  While developing the Rdio Android app, I’ve been testing on a bunch of different devices and frankly, with generally stock widgets in use, I’m running into the problem where widgets look different on each device.  This wouldn’t be so much an issue, except often times the differences are visual/stylistic tweaks in things like background images or colours which cause our design assets (icons, text colour, etc.) to look bad on one or more devices.

Case in point: TabWidget.  Using a completely stock TabWidget on our app which has minSdkVersion 4 and targetSdkVersion 6, I get the following:

Android 2.2 on Nexus One

Android 2.1 + Sense UI on HTC Droid Incredible

Android 2.1 + Sense UI on HTC Hero

Android 2.1 + Motoblur on Motorola Droid X

In each above screenshot, the leftmost tab is selected (i.e. active/current), the centre tab is focused/pressed (i.e. my finger is currently holding it down but I haven’t released it, while the rightmost tab is unselected.

As you can see from the above images, things like the selected and unselected tab icons look fine on the Motoblur and Hero with Sense UI, but look like crap on the Droid Incredible with Sense UI and stock Android on the Nexus One.  Meanwhile text colour looks fine on Motoblur, looks passable on the stock Android, looks mostly awful on the Droid Incredible with Sense UI, and is completely unusable on the Hero with Sense UI.

One option we have available to us is to hardcode all our own widget styles, which means completely skipping the system look and feel.  This is great for the Rdio brand (i.e. we can use our own highlight colours, etc.).. but this is like going back to the days of the 1337 90s when we were all cool kids in college running Litestep, XFCE, GNOME, etc. and only apps with custom themes and skins.  At some point it gets old, we grow up, and we want apps that match the system styles.  I don’t mind mobile apps having their unique personality, but I don’t want widgets having their own custom look and feel.  I want a ListView in one Android app to look and behave like ListViews in other Android apps.  Ditto that for TabWidgets, Buttons, etc.

But how are we supposed to do that if there isn’t a standard widget style we can rely on?  Am I just missing something painfully obvious about system-wide styles I should be using?  And what about custom widgets?  For example, in the above screenshots, each album art is clickable and relies on a “button” like look and feel to it… but buttons on stock Android use orange focus/select/press states, while on Sense UI they use green, and on Motoblur they use red.  We need to make custom graphics (in this case a 9patch drawable) for this, so are we expected to make one version for every vendor?

What are other Android developers doing to get around these annoying vendor-specific extensions and styles to the Android UI?