Droid CheatsheetA designer’s guide to create awesome Android UI/UX Spec Documents© RapidValue Solutions
© RapidValue Solutions 2
Contents
Layouts
Components
Gestures
Animation
3
5
11
19
Layouts
3© RapidValue Solutions
LayoutsA UI of an android application can be drilled down into a variation of either of two standard layouts;the list view or the grid view.
List View Grid View
4© RapidValue Solutions
Components
5© RapidValue Solutions
Components Basic
An Android UI has the following basic elements;
Side Nav Right Nav
App Bar / Primary Toolbar
Bottom Bar
On-Screen Nav Bar
Floating Action Button
Content Area
6© RapidValue Solutions
Components App Bar
App
Title Menu Icon
Action IconNav Icon Filter Icon
7
The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.
© RapidValue Solutions
Components Bottom Sheet
8
A bottom sheet is a sheet of material that slides up from the bottom edge of the screen. Bottom sheets are displayed only as a result of a user-initiated action, and can be swiped up to reveal additional content.
Bottom Sheet
© RapidValue Solutions
Components Chips
9
Chips represent complex entities in small blocks, such as a contact. They can contain a photo, short title string, and brief information.
Compose
John Doe Jane SmithTo
Contact Chips
© RapidValue Solutions
Components Dialogs
10
Dialogs inform users about critical information, require users to make decisions, or encapsulate multiple tasks within a discrete process.
Dialog
© RapidValue Solutions
Components Snackbars
11
Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.
SnackbarItem Deleted UNDO
© RapidValue Solutions
Gestures
12© RapidValue Solutions
Gestures Common Touch Mechanics
13
A touch mechanic is what your fingers do on the screen, it may have multiple results, depending on the context.
Touch Drag, Swipe, Fling Double Touch Long Press
1 Finger Mechanics
© RapidValue Solutions
Gestures Common Touch Mechanics
14
A touch mechanic is what your fingers do on the screen, it may have multiple results, depending on the context.
Two-Finger Touch Pinch Open Pinch Closed Rotate
2 Finger Mechanics
© RapidValue Solutions
Gestures Drag, swipe, or fling
15
Swipe gesture activities vary based on context. The speed at which a gesture is performed is the primary distinction between Drag, Swipe, and Fling.
Drag: Fine gesture, slower, more controlled, typically has an on-screen target Swipe: Gross gesture, faster, typically has no on-screen target Fling: Gross gesture, with no on-screen target
Gesture velocity impacts whether the action is immediately reversible.
A swipe becomes a fling based on ending velocity and whether the affected element has crossed a threshold (or point past which an action can be undone).
A drag maintains contact with an element, so reversing the direction of the gesture will drag the element back across the threshold.
A fling moves at a faster speed and removes contact with the element while it crosses the threshold, preventing the action from being undone.
© RapidValue Solutions
Gestures Scroll
16
A scroll is a vertical or horizontal swipe in a single direction within the content body.
Vertical Scroll Horizontal Scroll
© RapidValue Solutions
Gestures Pan
17
A pan is an multi-directional one-finger or two-finger gesture that expands the field of view. Drag is typically used with pan. Fling will maintain gesture velocity, resulting in a significant pan of the content along the direction of the fling gesture.
Pan Two Finger Pan
© RapidValue Solutions
Gestures Dismiss
18
A dismiss gesture originates on a swipeable element, such as a list item or card, orthogonal to the direction of scrolling.
Dismiss
© RapidValue Solutions
Gestures Edge Swipe
19
An edge swipe gesture originates outside of the screen to reveal off-screen content. It invokes content separate from the current view.
Edge Swipe
© RapidValue Solutions
Animation
20© RapidValue Solutions
Animation Surface Reaction
21
Upon touch, the Android UI provides an instant visual confirmation at the point of contact. The visual mechanism used to express this contact is called Touch Ripple.
Touch RippleWatch an online demo of aTouch Ripple surface reaction
© RapidValue Solutions
Animation Material Responses
22
When a user triggers the creation of new element on screen, it should grow in size, starting from the point of origin of the input.
Point of OriginWatch an online demo of apoint of origin material response
When a card or separable element is activated, the card should lift to indicate an active state.
Lift on TouchWatch an online demo of alift on touch material response
© RapidValue Solutions
Sources
1. Google’s Material Design Guidelines
2. Wikipedia
23
prepared byHari Krishnan | UI/UX Designer
www.rapidvaluesolutions.com www.rapidvaluesolutions.com/blog
+1 877-643-1850 [email protected]
RapidValue is a leading provider of end-to-end mobility, omnichannel and cloud solutions to enterprises worldwide. Armed with a large team of experts in consulting, UX design and application engineering, along with experience delivering global projects, we offer a range of services across various industry verticals. RapidValue delivers its services to the world’s top brands and Fortune 1000 companies, and has offices in the United States and India.
About RapidValue
A Cheetsheat by RapidValue Solutions - December 2015