android app design for dummies

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.

Design

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:

Material Design Docs - Overview of material design
Material Design for Developers - Developer guides for material
Material Design Examples - Blog posting beautiful material designs
Material Palette - Easy material color selection
Material Design Guidelines - Principles that guide material design

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:

Material Palette and Material Colors
Coolors generator - Handy color scheme generator
ColourLovers for color scheme
adobe kuler color wheel for color selection
Colors library - Android library with pre-defined colors

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. To get started with icons, check out the material icons style guide. If you are looking for actual icons to use, check out materialdesignicons.com and material.io icons.

Check out the iconography guide and icon design guidelines 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:

Device Displays
Multi-pane Layouts
Designing for Multiple Screens
Metrics and Grids

Designing for Android Articles

How to Get Started in Android App Design
Designing For A Maturing Android
How To Design For Android Devices
Design Tips for Building Android Apps
30 Beautiful Android Apps

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:

UI-Oh-My - Great resource for seeing screenshots of apps.
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

Material Design - Material design in the 2014 Google I/O app
From Holo to Material - Google I/O 2014 Talk
Devices and Displays
Pure Android
Action Bar
Multi Pane Layouts
Iconography
Android Design Tips