The explosion of Android-powered devices has been a boon and a burden to Android app makers. An application’s potential reach has never been so vast, yet the diversity of hardware can throw designers/developers for a loop. Today, we’ll talk about how to design an application that takes advantage of all the slick new Honeycomb tablets (present and future) so your app can shine in all sizes!

 

1. Modular components make full use of screen real estate

Compared to phones, the amount of space available on tablets can be confounding – how on earth can you fill up all those pixels?! One thing you absolutely should not do is blindly scale up a design meant for a phone. It’s hard to envision something looking sillier than a 10” list view.

Luckily there are several ways to tackle this issue, one of them is the concept of Fragments introduced in Honeycomb. Fragments are UI components that are meant to be modular and dynamic. The clearest example of this is in the official GMail app. On the phone, the user can view a list of all emails, which takes up the entire screen. Selecting an email will proceed to another screen showing the email conversation itself.

With the fragments, these list and email can appear side-by-side, allowing a user can view an email while gaining the additional context of their entire inbox.

2. Use dialogs

Sometimes it simply doesn’t make sense for a view to take up an entire screen. For situations like these, dialogs are quite handy. In Pulse, we enable users to connect with social networks when they wish to share stories – all of which require a login screen. On the phones, login utilizes the full window, but on a tablet such a view would be visually offensive. Dialogs provide an easy way to show these smaller components in a more natural manner.

 

3. Utilize 9 patches creatively

Unpredictable screen dimensions create some interesting challenges for the visual designer. Being pixel-perfect is possible, but not without some ingenuity. 9-patch image files allow you to determine how images get stretched when resized, which happens quite often when using relative layouts.

In the tutorial for saving stories with Pulse.Me, we use an arrow that points from the star button to the “.me” button. With the magic of 9-patches this arrow behaves correctly on all screen sizes and orientations.

 

4. Design for both landscape and portrait

Never assume a user will only use the app in one orientation. People have wildly different (and very strong) opinions on proper tablet usage and your app must accommodate both. In landscape mode, the wide screen makes horizontal layouts more natural. Avoid stretching things out to span the entire width unless absolutely necessary, otherwise you’ll most likely end up with a lot of blank space.

 

5. Remember the Honeycomb UI conventions

There are several UI patterns for Android tablet apps that users have come to expect from all applications. The first is the lack of a menu button. While users may have overlooked menu buttons on phones, they’re completely MIA in Honeycomb. In their place, the concept of an Action Bar governs what the user expects to be possible on a particular screen.

Even if you don’t explicitly use the Action Bar classes in the Android SDK, rolling your own is a good idea to fit the expectations of Honeycomb users. In general, the top left is reserved for going back to a previous screen, with the rest of the bar containing other actions. By following this pattern, a user will never feel lost or confused when using your application.

Now that you’re newly equipped with these tips, start creating compelling, beautiful apps!