Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Android Design Guidelines
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.
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.
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.
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.
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.
- 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.
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.
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
- 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
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.
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.
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