Into the Holo – An Introduction to Holo-Themed Apps

Welcome to Into the Holo, a regular column in which we delve into reviewing a quality application that follows the Android app design guidelines by using a variation of the Holo theme.

For the first edition of the column, instead of reviewing such an app, let us examine themes in the context of Android app design as a whole and provide you with an introduction to the Holo theme.

The style of Android app design encompasses a very large number of different elements, and the theme of an app represents just one of those elements. What are themes? From the Themes section on the Android Design page:

“Themes are Android’s mechanism for applying a consistent style to an app or activity. The style specifies the visual properties of the elements that make up your user interface, such as color, height, padding and font size.”

And more specifically, what is the Holo theme? Have a look at the images below:

See? Still not clear? No problem. If you have a device running Android 4.0 (Ice Cream Sandwich) or later and you use apps like Gmail and Talk pictured above, you may recognize the look and feel of the app: the Holo theme contributes largely to that look and feel. Google refers to the overall appearance as the common app user interface (UI), and you may have noticed the UI from other apps as well, particularly those developed by Google. Let us examine the 4 main structural design elements present in the theme to see the purpose of the layout and its components using an image from the Common App UI section of the Android developer website.

1. Main Action Bar

From the User Interface Overview section on the Android design page:

“The command and control center for your app. The main action bar includes elements for navigating your app’s hierarchy and views, and also surfaces the most important actions.”

Using Gmail as our example app, the Main Action Bar contains the app’s representative icon and the “View Control,” another aspect of Holo design we will examine next. As an aside, if an app does not have the “Split Action Bar”, which we will discuss in greater detail in a moment, the Main Action Bar may contain elements such as a “more options” menu, indicated by three vertical dots.

2. View Control

“Allows users to switch between the different views that your app provides. Views typically consist of different arrangements of your data or different functional aspects of your app.”

Again using Gmail as an example, the View Control displays your account name, and when touched, reveals a drop-down menu that allows you to choose which emails you want to look at based on their labels. Depending on the app, the menu changes, of course.

3. Content Area

“The space where the content of your app is displayed.”

Fairly self-explanatory.

4. Split Action Bar

“Split action bars provide a way to distribute actions across additional bars located below the main action bar or at the bottom of the screen. In this example, a split action bar moves important actions that won’t fit in the main bar to the bottom.”

Now we come to the Split Action bar, the portion of the app that includes all of the other actions users can perform. Some apps have enough space in the Main Action Bar to house all of the necessary action buttons, eliminating the need for the Split Action Bar altogether.

The main idea behind both of the action bars is creating areas where users can initiate actions based on context. In other words, the bars do not display static buttons; instead, they change, for example, in the Gmail app, when you open an email or compose a new one.

See? And you will notice too the three vertical dots in the bottom-right corner of the first image, indicative of another menu with even more options.

Before the introduction of software keys (the onscreen back, home, and recent apps keys always present at the bottom of the screen) in Ice Cream Sandwich, many Android phones featured some sort of hardware menu button (and quite a few still do as Google attempts to steer phone manufacturers in the direction of adopting software keys into their designs). Sometimes app developers used the menu button, and many times they did not, leaving users pressing the button furiously in the hopes that a menu listing more options would appear. If the dots were absent and the user did not know to press the menu button to reveal the other options, then functionality could be lost on the user, all stemming from poor design. In ICS and later, Google encourages developers to use contextual, onscreen menus that allow the user to determine more easily whether further options exist.

While the structural elements and philosophies represent an important aspect of app design, many other elements factor into the style of Android: touch feedback, metrics and grids, typography, color, iconography, writing style, and others. As we start to review apps that fall into the Holo category, we will touch upon these elements in greater detail.

For now, you should have a better understanding of what we mean when we talk about Holo apps and how the theme of apps figures prominently into the new look and feel of Android. To learn more, check out the Design section of the Android developers’ website.

Next time, we will review the Twitter client Tweedle, demonstrating how the design of the app coincides with the Holo theme while also examining aspects of Android style we mentioned in brief today. If you have any other categories you would like us to tackle, any apps you would like us to review, or any lessons about Android you would like to learn, please let us know in the comments. Thank you for reading!