Supporting Honeycomb pt2: Updating the Ultimate Stopwatch

For most developers, taking advantage of the features of Honeycomb is also going to involve ensuring their app runs on tablets. It is one thing to do this right from the inception of an app or game, but often a much harder task to upgrade an already complete project to look great on larger screens.

If your app has multiple views then you can utilise fragments to show more than one of them at the same time. If not then you can think about any other data or views that may be able to augment it, or possibly increase the size of some elements.

In the case of the Ultimate Stopwatch the counting digits clearly need to be larger, then the remaining screen space can be used to include an easier to access list of lap times and split times. I mocked up some wire frames and settled on the following design.


So how do you make this magic happen? Well, as the Ultimate Stopwatch uses a SurfaceView and I spent so long getting the small screen UI right, I didn't really want to mess with it, so I'm going to leave it alone and just add new layouts for x-large devices. For many apps, especially those using standard layouts, it is less of an issue and the Android Compatibility package is the best option for a consistent application. I am however going to use fragments for the new layouts, to give me the best control over the larger screen whilst keeping my class files smaller. I'll have a fragment for the animated stopwatch view, one for the counter digits and one for the lap times.

1. In your project properties set the Android Build Target to 11

2. Tell Android that your app is optimised for Honeycomb by updating the androidmanifest.xml by adding <uses-sdk android:targetSdkVersion="11" /> as per my last post, which also shows how to enable hardware acceleration for good measure.

3. To totally segment my previous code I created a new Activity which decides which version of the app to launch based on OS version and screen size, not forgetting to update the AndroidManifest.xml.

4. I've done custom layouts for both landscape and portrait to give optimal experiences. As I'd used fragments it made the portrait view much easier, it only took a couple of minutes.

5. Another thing to remember is that your menu items will now appear in the Action Bar. It is good practice to let Android know which items it can hide under the overflow button if necessary by appending android:showAsAction="ifRoom" in to the item in your Menu.xml.

6. When building the layouts and activities, be mindful of the fragment lifecycle, making sure to inflate your views in the onCreateView() method.

7. To add a little more Honeycomb goodness I also used ObjectAnimator to do a 180 degree animation on the lap times fragment when switching to Countdown Mode and back again, this hides the times and informs the user of the mode the app is in. I also freshened up the Countdown time select dialog with the new NumberPicker.


Launching this update was also a great opportunity to refresh the Android Market listing, adding new screenshots, featured image and descriptions.

The full source of the Ultimate Stopwatch & Timer is available at http://code.google.com/p/android-ultimatestopwatch/

For those of you who want to know how USW looked in landscape on a tablet before this overhaul, prepare yourselves:


Follow me on twitter for further Android related updates.