android cheatsheet by rapidvalue solutions

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


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.

© 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


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


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


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


http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsM0NfdERleXVfaTQ/animation_responsive_userInput_surfacereaction_004.mp4

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


http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsTXRrcnkwYUROalU/animation-responsiveinteraction-materialresponce_liftontouch_xhdpi_002.mp4

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsaENvS3czX1ZvaHc/animation-responsiveinteraction-materialresponse-PointOfOrigin_DO_003.mp4

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

http://www.rapidvaluesolutions.com/

http://www.rapidvaluesolutions.com/blog/

mailto:[email protected]