This presentation is a designer’s guide to create awesome Android UI/UX Spec Documents. It comprises creating: 1. Layouts 2. Components 3. Gestures 4. Animation

1. Droid Cheatsheet
A designer’s guide to create awesome Android UI/UX Spec Documents
© RapidValue Solutions

2. © RapidValue Solutions 2
Contents
Layouts
Components
Gestures
Animation
3
5
11
19

3. Layouts
3© RapidValue Solutions

4. 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
4© RapidValue Solutions

5. Components
5© RapidValue Solutions

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. Gestures
12© RapidValue Solutions

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. Animation
20© RapidValue Solutions

21. 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 Ripple
Watch an online demo of a
Touch Ripple surface reaction
© RapidValue Solutions

22. 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
Watch an online demo of a
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
Watch an online demo of a
lift on touch material response
© RapidValue Solutions

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

24. 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 offices in the United States and India.
About RapidValue
A Cheetsheat by RapidValue Solutions - December 2015