Revo Logo

Project Revo

  • Quick, flexible app-based framework theming.
  • Supports autonomy of application theme development.
  • Easy to maintain and share amongst apps.

Introduction

Project Revo was the development of an application-based framework UI theme (a family of styles) for Android apps developed by Motorola targeted for the Google Play market.

Problem

Custom Android framework UI styles involve a combination of media and XML resources that usually reside in the framework build and come delivered as part of a manufacturer's device build as a default theme. The challenge was to design and develop a theme that could be applied from within the application structure and delivered with the app independent of the framework. Beyond the challenge of overriding base framework styles from within the application, we also needed to address the issue of inconsistent styles between applications - especially in defining a brand experience.

Further, with the release of Ice Cream Sandwich (Android 4.0.x), Google imposed a set of restrictions on changes made to framework-based files. Known as the Compatibility Test Suite (CTS), this automated testing harness strictly limits changes made to framework-based media assets. These newly introduced limitations in conjunction with the desire to make customized UI for market-ready apps led us to the development of the Revo theme.

Analysis

All of the media and XML resources that are used within a theme would need to be identified and re-designed as per the new Motorola style (Revo). The style would not follow the typical dark or light theme structure of an Android theme, but contain elements of both. This family of styles that comprise the theme would need to support displays on a wide variety of devices: from phones to tablets to large-screen TVs.

Solution

I worked closely with the designers explaining technical issues that their designs would need to avoid. Limitations of the theme/style structure were identified and rules established including:

  • Theme and associated styles consist only of media and XML resources.
  • Theme structure needs to be an exact one-to-one match with existing Android themes.
  • No custom Java classes.
  • Use only framework-supported fonts; custom fonts were desired, but required a custom Java class to support them.

Media and XML resources were developed guided by these rules and based on mockups made by the framework design team. The theme was developed as an Android library project as so that it could be easily integrated into any app as a discrete set of independently managed files. We created a test application to apply the theme to. This test app included a set of common views that we had defined as design patterns to be used by UI designers. This structure also helped us to determine which resource files belonged within the application structure and which ones should reside in the theme library.

To aid in development of the Revo theme and future themes, I created a set of Syntactical Guidelines.

Revo mockup screen

Figure 1: Sample mockup screen including ActionBar with TabView.

Revo build screen

Figure 2: Screen capture from a test build of the Revo-themed ActionBar with TabView. Note the use of a light-themed ActionBar combined with a dark-themed ListView. This combination is a signature look of Revo.

Summary

Starting in March 2012, I led a team of 4 (2 designers, 2 developers) that created the Revo theme within 2 months. In mid-July, the Revo theme library was updated from Ice Cream Sandwich (Android 4.0.x) to Jelly Bean (Android 4.1.x) in 2 weeks time including thorough testing. When I left Motorola in August, plans were that the theme would be used for Motorola Mobility applications distributed via Google Play.