I’m attending DDD East Anglia at the end of the month. I thought I’d create an Android scheduling application, so that conference attendees can view a list of sessions and store which ones they’d like to go to. Although in my day job I develop an Android charting library, I have no experience pushing an actual application out into the world through Google Play. This gives me the perfect opportunity to remedy this!

Using the ADT version of Eclipse, I created a new Android Application Project. As part of the initial project setup wizard, you have the option of adding a custom icon. I took the image of King’s College Chapel from the DDD East Anglia logo and increased the brightness in Paint.NET until it was all white. I then imported this into the wizard, on one of the stock backgrounds. You can customise the colour of your background, too.

DDD East Anglia launcher logo

The Action Bar

Android applications from Honeycomb-onwards come with an ActionBar. This is a strip at the top of an application displaying the logo and title. I want the main application screen to have three tabs:

  • The schedule, containing the user’s selected sessions.
  • A twitter feed displaying the #dddea and #DDDEastAnglia hashtags.
  • General information about the venue, such as location and organiser contact details.

The Action Bar is perfect for this – tabs are displayed within the ActionBar if there is room, such as on a 7” or 10” device. When there is no room, the tabs move down onto the next line. This behaviour happens out of the box – no complex configuration required!

ADT also has a pre-configured template to create an Activity with three fixed Action Bar tabs. For now, I auto-generated me up a main activity. The default layout displays the tab number on each tab. That’s good enough until I actually have data to display.

I’d like to target as many devices as consistently as possible. Developers frequently complain about Android being a fragmented platform that is cumbersome to develop for. As I recently mentioned at my “Android Strokes for iOS Folks” talk, the framework actually helps you out quite a lot. But not with the Action Bar. Or at least, not yet. Google announced that the Android Support Library, which contais lots of helper classes for backporting new framework features to older platforms, will soon include a backwards-compatible Action Bar. As that’s not released publicly yet, I’ll be using an open-source version – ActionBarSherlock.

Including ActionBarSherlock is as simple as downloading the source, and importing it into Eclipse as an Android Library Project. Next, you specify in your project’s properties to use ActionBarSherlock as a library project.

ADT generates multiple different styles.xml files for you, to ensure that the base theme for your app is consistent with the underlying framework version. ActionBarSherlock can remove all of this boilerplate, as it provides a custom implementation of styling for later platforms, so you can delete all those styles and replace it with:

<style name="Theme.Dddeastanglia" parent="@style/Theme.Sherlock.Light">
    <item name="android:actionBarStyle">@style/ActionBar.Solid.Dddeastanglia</item>
    <item name="actionBarStyle">@style/ActionBar.Solid.Dddeastanglia</item>
</style>

<style name="ActionBar.Solid.Dddeastanglia" parent="@style/Widget.Sherlock.Light.ActionBar.Solid">
    …
</style>

You need to point your manifest to use this theme:

<application
    android:name="uk.co.samhogy.dddeastanglia.DDDEastAngliaApplication"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/Theme.Dddeastanglia">

Styling the Action Bar

The ActionBar is also a great branding opportunity for your app. I’d like for the background colour to match the green colour scheme of the website. I can easily do this using the Android Asset Studio – an open-source set of web tools. You can create action bar styles for the framework or ActionBarSherlock implementation. It’s as simple as specifying what colours you’d like each element to take. When you’re done, all the necessary resources are zipped into a folder structure mimicking your res project directory, so including this theme is as simple as unzipping in that location.

As I’m using a dark Action Bar colour with Holo.Light as my underlying theme, some of the default icons and text don’t look right. Black text on a dark green background is hideous, but can be fixed by manually tweaking the styles.xml:

<style name="ActionBar.Solid.Dddeastanglia" parent="@style/Widget.Sherlock.Light.ActionBar.Solid">
    ...
    <item name="android:titleTextStyle">@style/ActionBar.TitleText.Dddeastanglia</item>
</style>
<style name="ActionBar.TitleText.Dddeastanglia" parent="@android:style/TextAppearance">
    <item name="android:textColor">@android:color/white</item>
</style>
Action Bar title text, black and white.

This fixes up my Action Bar title text just fine, but I noticed that in landscape mode, when the Action Bar tabs can be fit on the Action Bar (rather than on a different row), I have the same problem. So, how can I make the tab text white in landscape mode, but black in portrait? Easy!

<style name="Theme.Dddeastanglia" parent="@style/Theme.Sherlock.Light">
    ...
    <item name="actionBarTabTextStyle">@style/ActionBar.TabTextStyle.Dddeastanglia</item>
</style>

<style name="ActionBar.TabTextStyle.Dddeastanglia" parent="@style/Widget.Sherlock.ActionBar.TabText">
    <item name="android:textColor">@color/tab_text</item>
</style>

This is referencing a @color resource. There are two variants of this:

in values: @android:color/black in values-sw320dp-land: @android:color/white

At run-time the style is resolved to use the correct resource! But wait, what’s up with the ‘sw320dp’ part in that folder name? On devices with a width smaller than 320 device-independent pixels, there is not enough room to move the action bar tabs into the action bar, so they will stay in the split mode. In this instance, I need the text to stay black. So, adding ‘sw320dp’ means that the white colour is only used on devices in landscape mode, whose width is larger than 320dp. Admittedly, it was trial and error with emulators to get that figure correct, but it is important to give each platform the best experience possible.

One more very subtle issue. The system icon set for Holo.Light uses a dark grey to contrast with the (expected) light gray backgrounds of the application. The ‘up’ icon, which is a left-facing caret displayed to the left of the application logo in the Action Bar, will be hard to see. To remedy this, I downloaded the Holo.dark icon set from the Android Design web page. I placed the new logo in the appropriate drawable folder for each variant of the ic_up png. All you need to do is tell your style to use this resource, not the standard system resource:

<style name="Theme.Dddeastanglia" parent="@style/Theme.Sherlock.Light">
    <item name="homeAsUpIndicator">@drawable/ic_up</item>
</style>
Action Bar up icon

Here’s what the application looks like in both orientations: Landscape view of app, with tabs inside action bar Portrait view of app, with tabs below action bar

That’s not too bad at all, especially seeing as most of this is auto-generated and only a bit of style-wrangling was needed. Tomorrow, I’ll talk about setting up the database.