Android Cheatsheet by RapidValue Solutions

Droid Cheatsheet
A 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

Layouts
A 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

Components

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

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.

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

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

Components Dialogs
10
Dialogs inform users about critical information, require users to make decisions, or encapsulate multiple
tasks within a discrete process.
Dialog

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

Gestures

Gestures Common Touch Mechanics
13
A touch mechanic is what your ﬁngers do on the screen, it may have multiple results, depending on the
context.
Touch Drag, Swipe, Fling Double Touch Long Press
1 Finger Mechanics

Gestures Common Touch Mechanics
14
A touch mechanic is what your ﬁngers do on the screen, it may have multiple results, depending on the
context.
Two-Finger Touch Pinch Open Pinch Closed Rotate
2 Finger Mechanics

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.

Gestures Scroll
16
A scroll is a vertical or horizontal swipe in a single direction within the content body.
Vertical Scroll Horizontal Scroll

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

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

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

Animation

Animation Surface Reaction
21
Upon touch, the Android UI provides an instant visual conﬁrmation at the point of contact. The visual
mechanism used to express this contact is called Touch Ripple.
Touch Ripple
Watch an online demo of a
Touch Ripple surface reaction

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 Origin
point of origin material response
When a card or separable element is activated, the card should lift to indicate an active state.
Lift on Touch
lift on touch material response

Sources
1. Google’s Material Design Guidelines
2. Wikipedia
23
prepared by
Hari Krishnan | UI/UX Designer

www.rapidvaluesolutions.com www.rapidvaluesolutions.com/blog
+1 877-643-1850 contactus@rapidvaluesolutions.com
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 ofﬁces in the United States and India.
About RapidValue
A Cheetsheat by RapidValue Solutions - December 2015

Android Cheatsheet by RapidValue Solutions

More Related Content

Viewers also liked

Similar to Android Cheatsheet by RapidValue Solutions

More from RapidValue

Recently uploaded

Android Cheatsheet by RapidValue Solutions