Android Design Guidelines - TechGeekD/android_guides GitHub Wiki

Overview

When learning Android app development, one of the most important topics to understand is how to create delightful mobile interfaces and interactions. This means understanding the conventions within the Android universe, common style guidelines, patterns, etc.

Guidelines

The official Android docs has an excellent set of design resources. This section will highlight a few key design guidelines and link to the appropriate guides. You can also check out these Android design tips for a quick overview.

Design Principles

Check out these design principles which were developed by and for the Android User Experience Team to keep users' best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate with purpose.

Material Design

With the release of Android 5.0, there are updated guidelines for modern Android UI design. These guidelines are called "material design". This new framework encompasses several changes to the interface of Android apps and Google strongly encourages the adoption of these new principles. Check the following resources below for details:

Using these materials, you can understand and begin adhering to these guidelines for your own applications.

Pure Android

As you plan your app for Android, keep in mind that different platforms play by different rules and conventions. Design decisions that make perfect sense on one platform will look and feel misplaced in the context of a different platform. If you have built web and/or mobile apps in the past, review this Pure Android Guide for look at how to avoid making Android design faux pas. Check this article from jackrabbit for a more detailed breakdown.

User Interface Overview

Check out the UI Overview page which provides a high-level tour of key UI element. In particular, check out the Common App UI which outlines the key UI elements including the Action Bar, Navigation Drawer and Content Area.

Color Schemes

Check out the color scheme guide and the android colors which includes common color palettes for Android apps. For nice color schemes check out:

For material design, check out the Material Palette for color selection.

Typography

Check out the typography guide to understand the common font types for Android apps and default type colors and sizes. See the calligraphy library for each custom fonts.

Iconography

An icon is any graphic that takes up a small portion of screen real estate and provides a quick, intuitive representation of an action, a status, or an app. Icons must be created to work across a wide array of devices. There are also many different types of icons such as the "Launcher" icon on the home screen, ActionBar icons, and notification icons. Check out the iconography guide for a detailed look. In particular, work to understand the design tips and follow the correct naming conventions for different icons.

Flexible Design

Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and form factors. By taking advantage of Android's flexible layout system, you can create apps that gracefully scale from large tablets to smaller phones. Check out the following resources for more information:

Designing for Android Articles

Common Patterns

There are about a dozen common UI patterns that are integrated into almost every app. When you are building Android screens, it's essential you adhere to these common pattern guides. The most important ones are listed below:

  • Overall App Structure - High-level guidelines for the elements of an app.
  • Gestures UX - Gestures allow users to interact with your app by manipulating the screen objects you provide.
  • Navigation UX - Consistent navigation is an essential component of the overall user experience
  • ActionBar UI - The action bar is one of the most important design elements you can implement
  • Swiping Views - Efficient navigation is one of the cornerstones of a well-designed app.
  • Navigation Drawer - The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options.
  • Notifications UI - Allows your app to keep the user informed about events, such as new chat messages or a calendar event.
  • Settings - Place in your app where users indicate their preferences for how your app should behave

Following these and related guides explains in detail how to create consistent and delightful mobile apps.

Benchmarking

One of the best ways to understand the best practices and patterns for app design is benchmarking other popular applications on the platform. One of the best ways to do this is to buy an Android device and use a variety of popular applications. In addition to that, we can benchmark by checking websites dedicated to giving us a wide sampling of apps and how they achieve certain common UI patterns. For this, we can check out the following sites:

  • android app patterns - Groups of sample screenshots from apps, showing their overall look and feel.
  • inspired-ui - Endless list of beautiful UI design
  • mobilepatterns - Common screen patterns neatly organized
  • pttrns - List of android screens in categories
  • androidniceties - Blog of beautiful interfaces
  • androidux - Explores common patterns for UX
  • androidpatterns - UI patterns organized by questions, such as "How can I let users manage their accounts?"

Using these sites above to build up an intuitive understanding of how to build different UIs in your apps.

Wireframing

When developing a mobile application, there are a few stages you will probably go through during an agile development method. First, you decide on the core value of the app and determine the key user scenarios. From there, it is helpful to begin identifying and sketching the different distinct user interfaces and user interactions for the app.

The simplest way you can wireframe is by creating low-fidelity sketches on paper by hand. You can print a scaled Android frame to make this easier. You can also leverage many excellent digital tools as well:

  • Pencil Project - Excellent free cross-platform wireframing tool with Android stencils
  • FluidUI - Online wireframing tool, free for limited use with comprehensive android stencils
  • MockingBird - Online wireframing tool, free for limited use, no android stencils
  • Balsamiq - Extremely powerful wireframing tool used by many industry professionals

See the android docs on wireframing for additional perspective and examples.

References