Most new Android apps seem to fall in two categories: apps that use Holo.Dark or Holo.Light with no customization, and apps that completely or mostly ignore Holo and the new design guidelines. What we need is for apps to fall into a new category: apps that use Holo as a starting point, and look both like an Android 4.0 app and a unique, branded app. Let's take a look at how a few of the Play Store's popular apps could accomplish this, and what they could look like.

Disclaimer: These mockups are simply examples of how Android apps can look both branded and Holo-themed. They are not meant to be an insult towards any of these apps' original designers; these apps were designed before the new Android design guidelines came in to play.

Netflix

In this example, Netflix could use their iconic red header, with their logo, in a standard action bar. What makes this looks like a Netflix app is obvious; what makes it look like an Android app is in the details. Standard heights, font sizes, and icons are used for all elements. The action bar maintains its subtle shadows and lighting. Notice, as well, how the elements like the tab bar and activity background are changed to match the color palette of Netflix.com.

Twitter

Twitter's app could feel at home on Android while still keeping common elements from its website and iOS app. We preserve the indented bird logo, the black tabs, and the blue gradient header, using the action bar and swipe-able tabs out of Android's UI pattern toolbox. We use a conversation list style similar to the one used in Android's Messaging and Talk apps.

Pandora

Pandora, often floating in and out of its position as the most popular music app on Google Play, has not received any major design updates since its launch a few years ago. However, their website recently received a major reboot - and here's how it could look if their Android app followed suit. We take some major cues from the Play Music app and Pandora's current app, using the new colors of Pandora's website to maintain a familiar UI. Notice how the colors of the song's seek bar reflect Pandora's color scheme rather than the widget's default colors.

The bottom line: Holo is a starting point.

For most apps, Holo is meant to be more of a template than it is meant to be used without any customization. Customizing the default widgets to fit your brand is a must, but mutating them to the point where they are unrecognizable is not optimal. The standard Holo icon set should be used, unless your custom icons are more recognizable by users. In the end, it's not only possible, but quite simple for your app to look both like Android app and your app.

Futher reading: Jake Wharton wrote a relevant Google+ post on the subject of Holo and the need to customize it.

Today I'm releasing a free PSD including comprehensive recreations of Android 4.0 UI elements. Everything is made with vectors and layer styles, so you can resize and alter as much as you'd like.

This PSD includes:

• Holo.Dark UI elements
• Holo.Light UI elements
• Homescreen widgets
• Lock screen
• Notification bar
• Keyboard
• Map UI elements
• Alert Dialogs

Download the PSD

This is free, and is a tool for designers and developers. You can do whatever you'd like with it as long as you aren't repackaging and selling it.

The latest iteration of Android ‐ codenamed "Ice Cream Sandwich" ‐ introduces not just UI changes and polish, but a near entire redesign of the Android OS. To better prepare your apps for ICS, or to create a great-looking ICS app, here’s a guide on the new UI patterns and elements to work with.

Content & Activity Navigation: Tabs and Dropdowns

When your app has multiple prominent activities or ways of viewing content, giving your users an easy way to navigate through them is important. Ice Cream Sandwich brings a couple common ways to do this, the first being slideable tabs.


Above: Tabs in Ice Cream Sandwich

Tabs have always existed in Android, but in Ice Cream Sandwich, they’re stylish and easier to use. Two examples are shown above - the "People" app (the new Contacts app), and the YouTube app.

New usage: Users can now navigate between tabs by swiping horizontally across the screen - a common gesture in Ice Cream Sandwich.

New look: The selected tab indicated by a thick solid line on the bottom. Tabs, just icons or just labels.

Another way to let users navigate similar content is a dropdown:

Above: A dropdown in Android 4.0’s Calendar app

Dropdowns are best for navigating through similar content and ways to view that content - for example, in the Calendar app, the dropdown is used to switch between a day, week, month, or agenda view of the user’s calendar. Dropdowns could also be used to navigate between different groups of content - for example, groups of contacts.

Dropdowns are indicated using a small right triangle in the bottom-right of the tappable area.

Action Bar: Not just for the top anymore.

The Action Bar has long been a great way to give users easy access to your app’s most important actions. In Ice Cream Sandwich, not only are action bars included in the API, but they’re on the bottom of the screen as well.


Above: The bottom-aligned aciton bar in the Maps & Email apps

This action bar is where the most prominent actions of your app go. For example, in email, the action bar includes “compose”, “search”, and “refresh”. The action bar will also change to context - look at the action bar when you tap to read a full email:

Above: The action icons change with context

The action bar has changed to allow the user to delete the email, change a label, or navigate between emails. Action bar icons are simple, solid with a single color or very subtle lighting. They can also be text:

Above: A text action in the “Maps” app

The app header: activity navigation and other actions

When the top bar of your ICS app isn’t being used by tabs, it will house the app’s icon, used for easy navigation through the app.

Above: The app header for Maps, in a few different scenarios

In Maps, the default app header includes the app icon and the app name or logo. Once you navigate to a different activity in the app (for example, when I open up the information “Pinkberry”), the “up”/back arrow appears to the left of the app icon.

The app header can also change to include current app details - for example, the directions I just searched for, the subject of the email I’m looking at, etc.

The app header can also still include action icons or text - consider Messaging or YouTube:


Above: Action items in the app header

Context-adapting: Search and list editing

In ICS, two very common, but often underplayed actions for apps have been given new UI conventions: searching and list-editing.

Check out how the app header changes when a user presses the “search” icon:


Above: Search in “People” and Calendar.

The back arrow appears, and the header is replaced with a search box, optionally including a button for voice input.

Another example of context adaption is in a list with checkboxes. For example, in the Email app, see how the app’s header adjusts when emails are checked by the user:

At this point, the bottom action bar also adapts to allow the user to perform actions on those emails.

The Style and Design Philosophy of Ice Cream Sandwich

With the new release of Android, the Android team has shown a new effort in design. Not only in easy of use, but in polish and consistency. They’re not only making Android look better, they’re making it unique and recognizable. It’s a clean, simple, modern interface.

We removed dividing elements, bevels, unnecessary UI junk...We started using more white space and a variety of visual elements to create clear structures...We expanded our palette, so there’s quite a range of light and dark.

- Matias Duarte, Android UI/UX Lead

You can see this all over Ice Cream Sandwich’s new UI - button decorations are simple or nearly inexistent. Text boxes are comprised of just a few lines. Content and pictures have been given priority over decorations. Colors are soft, but prominent.

Above: Adding an event in the Calendar app, showing off some ICS elements.

The Android 4.0 SDK is available for anyone to download and test out on the Android Developers web site. If you’re eager to check out some full screenshots of Ice Cream Sandwich, Engadget has posted a gallery of screenshots from the Galaxy Nexus. For designers or solo developers, try out the new OS and get a feel for how it works and looks. You can make your apps beautiful, consistent, and easy to use, just like the Android team has done with Ice Cream Sandwich.