Android Wear Toolkit 20140722

8/10/2019 Android Wear Toolkit 20140722

http://slidepdf.com/reader/full/android-wear-toolkit-20140722 1/22

Sam

Wanna do lunch?



Sam

Wanna do lunch?

632

Sam

Wanna do lunch?

632

Sam

Wanna do

632“Ok Google”

Ambient mode whcharged

Interactive mode while device isbeing charged

Interactive mode with hotword



“Ok Google” “Ok Google”

632 632 632

104 DPMAXHEIGHT

12 DP

2 DP

52 DP

14 DP14 DP

8 DP

Ambient mode whcharged

Google CustomHotword + Indicator Position

Hotword appears when enteringinteractive mode and disappearsafter 3 seconds

12 DP

8 DP BLOCK

32 DP BLOCK



“Ok Google”

“Ok Google”

“Ok Google”

Snippet text Snippet text

ROBOTO LIGHT 16 SP

Position: BOTTOMPosition: MIDDLE Positio

12 DP

86 DP

8 DP

8 DP BLOCK

24 DP BLOCK

CENTER

14 DP

14 DP

96 DP

40 DPMIN CARD

RIGHT LEFT

40 DPMIN CARD

36 DP

118 DP

64 DP

104 DPMAXHEIGHT

12 DP 12 DP8 DP

Snippet text



“Ok Google”“Ok Google”

LEFT

14 DP

14 DP 16 DP

18 DP

COLOR #000OPACITY 30%

12 DP

System indicator backgroundprotection.

8 DP BLOCK



Archive

Labels with two lines

look like this Re

ROBOTO LIGHT 16 SP ROBOTO LIGHT 20 SP

16 DP

12 DP

104 DP104 DP

16 DP16 DP 16 DP

24 DP 24 DP

12 DP

8 DP BLOCK

64 DP ICONASSET SIZE

Big action buttoscrim over the bOverlay #000 at

Big actions use big icons.ic_full_*

104

48 DPINTERIOR

Label with one lineLabels with two lines

look like this



Reply

Sam

Wanna do lunch?

632

CURRENT PAGE

NEXT PAGE

12 DP

8 DP

8 DP BLOCK



Sam Blitzstein

Sam Blitzstein

Wanna do lunch?

632632

ROBOTO LIGHT 16 SPCOLOR #434343

40 DP

Regular peek card Short peek card with customclockface

12 DP

8 DP BLOCK

12 DP 8 DP

8 DP

8 DP

8 DP

Sam Blitzstein



8 DP BLOCK

On long press, grow dotoutward from center.

Apply 50% black on top ofbackground.

Pres

RED CIRCLECOLOR #ff5151

ic_full_cancel

PRESSEDCOLOR #b83120

104 DP



100% DOMINANT COLOR

OVERLAY20% #000

100% DOMINANT COLOR

OVERLAY20% #000

100% DOMINANT CO

Blue Bird

Standard two linetext notification

Fire


Snapper

Standard ttext notific

8 DP BLOCK



Money

Money Money

(Remix)

Naomi PilgrimNaomi Pilgrim

Money Mone

(Remix)

Naomi Pilg

ROBOTO LIGHT COCOLOR #a2a2a2

ROBOTO LIGHT COCOLOR #434343

12 DP

2 DP

12 DP 12 DP

8 DP 12 DP12 DP 8 DP 12 DP

20 DP

20 DP

20 DP

Artist one line onlyTrack title on two lines max

Artist one line onlyTrack title on one line

8 DP BLOCK 32 DP ICON

12 DP

12 DP

2 DP

Artist

Track title



PreviousNext Thum

ROBOTO LIGHT 20 SP

16 DP

12 DP

104 DP104 DP

16 DP16 DP 16 DP

24 DP 24 DP

12 DP

8 DP BLOCK


Big action buttoscrim over the bOverlay #000 at

Big actions use big icons.ic_full_*

104

48 DPINTERIOR

Label with one line



+3 more

ROBOTO LIGHT 14 SP#434343

12 DP

36 DP



Airplane mode

Enabled

Don’t forget

your phone!

Battery is

20%

632 632 632

32 DP ICON24 DP INTERIOR

COLOR #434343

12 DP

12 DP

8 DP12 DP 12 DP

20 DP

20 DP

Dismissable card added tostack.ic_alert_airplanemode

When breaking connection withyour phone, vibrate and dosplaythis card. ic_alert_nophone

When battery is ic_alert_lowbatt


Roboto Condensed Light20 SP



32 DP APP ICON

12 DP16 DP

16 DP

12 DP

12 DP 12 DP

12 DP

12 DP

16 DP 16 DP12 DP

8 DP BLOCK



Card title

Card title

Large 40

Cras nec enim infelis vulputate sedmalesuada a vitae

blandit ipsum.

32 DP APP ICON

12 DP

12 DP

4 DP

4 DP

16 DP12 DP

12 DP

12 DP

16 DP12 DP

8 DP BLOCK

Card t

Card B

PRIMARY#434343

SECONDA#a2a2a2

ROBOTO SIZE 20 S

ROBOTO SIZE 20 S

Ab

Ab



30th and Mission

Navigate to30th and Mission

Navigate to

ROBOTO LIGHCOLOR #a2a2

ROBOTO LIGHCOLOR #4343

12 DP

2 DP

12 DP

8 DP 12 DP12 DP

12 DP

32 DP


32 DP ICON24 DP INTERIOR

Header

Secondary




GRCO104 DP

48 DPINTERIOR



Austin Robison


Austin Robison

Standard three line

text notification willlook just like this

Austin Rob

Standard f

text notificlook just liexample h

632 632 632

96 DP96 DP 96 DP

8 DP BLOCK

Every line of text adds 24 DP to the height of the card.

Oh man that’s so cool!

If a card is any taller than96 DP we have to push a bit

of it below the fold.



Austin Robison

Standard five line

text notification willlook just like thisexample here thatcontains five lines

Austin Robison

This is an example

of the maximumcard height beforewe truncate, fannypack umami kitschauthentic pop-upbicycle rights wolfmoon cardigan

Austin Rob

This is an

of a card ethe max htruncatingTapping thwill expancard and rmore text

632 632 632

96 DP 96 DP 96 DP

8 DP BLOCKTaller than 240

of text? We fadebottom and t

9 lines of text, or 240 DP issafe. This is the max size

before we need to truncate.



Cond Light 20

Cond Light 20gluten-free vneck

Austin Robison

Standard four line

text notification willlook just like thisexample here

Austin Rob

This is an

of a card ethe max htruncatingTapping thwill expancard and rmore text

632 632 632

28 DP

96 DP28 DP

24 DP

16 DP

12 DP

12 DP

8 DP BLOCK 32 DP APP ICON

COLOR #a2a2a2

COLOR #434343

16 DP

12 DP

28 DP

24 DP

24 DP

24 DP

16 DP

Header

Body



Austin Rob

Standard ttext notific

Cond Light 20

Cond Light 20 SP

Austin Robison

Standard one line!

632 632 632

28 DP

28 DP

16 DP

12 DP

72 DP

8 DP BLOCK

This just so happens to be thesmallest card you’ll ever see.Imagine that. It’s only 72 DP!

At 96 DP, this stallest card that on your home sc

Documents

Android Wear Toolkit 20140722