Sam Wanna do lunch?commondatastorage.googleapis.com/androiddevelopers/design/Andr… · 22-07-2014 · Labels with two lines Archive look like this Reply ROBOTO LIGHT 16 SP ROBOTO
Post on 27-Jul-2020
1 Views
Preview:
Transcript
SamWanna do lunch?
SamWanna do lunch?
SamWanna do lunch?
SamWanna do lunch?
SamWanna do lunch?
632
SamWanna do lunch?
632
SamWanna do lunch?
632“Ok Google”
Ambient mode while device is being charged
Interactive mode while device is being charged
Interactive mode with hotword
“Ok Google” “Ok Google”632 632 632
104 DPMAXHEIGHT
12 DP
2 DP
52 DP14 DP14 DP
8 DP
Ambient mode while device is being charged
Google CustomHotword + Indicator Position
Hotword appears when entering interactive mode and disappears after 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 Position: TOP
12 DP
86 DP
8 DP
8 DP BLOCK
24 DP BLOCK
CENTER RIGHT
14 DP
14 DP96 DP
40 DPMIN CARD
14 DP14 DP
12 DP
LEFT CENTER RIGHTLEFT CENTER RIGHTLEFT
40 DPMIN CARD
36 DP
118 DP
64 DP
104 DPMAX HEIGHT
12 DP 12 DP8 DP 8 DP
Snippet text
“Ok Google”“Ok Google”
LEFT
14 DP
14 DP 16 DP
18 DP
COLOR #000OPACITY 30%
12 DP
System indicator background protection.
8 DP BLOCK
ArchiveLabels with two lineslook like this Reply
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 buttons cast a dark scrim over the background. Overlay #000 at 50% opacity.
Big actions use big icons.ic_full_*
BLUE CIRCLECOLOR #2878ff
PRESSEDCOLOR #2955C5
104 DP
48 DPINTERIOR
Label with one lineLabels with two lines
look like this
Reply
SamWanna do lunch?
632
CURRENT PAGE
NEXT PAGE
12 DP
8 DP
8 DP BLOCK
Sam Blitzstein
Sam BlitzsteinWanna do lunch?
632632
ROBOTO LIGHT 16 SPCOLOR #434343
40 DP
Regular peek card Short peek card with custom clockface
12 DP
8 DP BLOCK
12 DP 8 DP
8 DP
8 DP
8 DP
Sam Blitzstein
8 DP BLOCK
On long press, grow dot outward from center.
Apply 50% black on top of background.
Press state for quit button.
RED CIRCLECOLOR #ff5151ic_full_cancelPRESSEDCOLOR #b83120
104 DP
100% DOMINANT COLOR
OVERLAY20% #000
100% DOMINANT COLOR
OVERLAY20% #000
100% DOMINANT COLOR
OVERLAY20% #000
Blue BirdStandard two line text notification
FireStandard two line text notification
SnapperStandard two line text notification
8 DP BLOCK
MoneyMoney Money (Remix)
Naomi PilgrimNaomi Pilgrim
Money Money (Remix)
Naomi Pilgrim
ROBOTO LIGHT CONDENSED 20 SPCOLOR #a2a2a2
ROBOTO LIGHT CONDENSED 16 SPCOLOR #434343
12 DP
2 DP
12 DP 12 DP
8 DP 12 DP12 DP 8 DP 12 DP
20 DP
20 DP20 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 Thumbs up
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 buttons cast a dark scrim over the background. Overlay #000 at 50% opacity.
Big actions use big icons.ic_full_*
BLUE CIRCLECOLOR #2878ff
PRESSEDCOLOR #2955C5
104 DP
48 DPINTERIOR
Label with one line
+3 more
ROBOTO LIGHT 14 SP#434343
12 DP
36 DP
Airplane modeEnabled
Don’t forgetyour phone!
Battery is at20%
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 to stack.ic_alert_airplanemode
When breaking connection with your phone, vibrate and dosplay this card. ic_alert_nophone
When battery is at 20%ic_alert_lowbattery
8 DP BLOCK 32 DP ICON
Roboto Condensed Light20 SP
32 DP APP ICON
12 DP16 DP16 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 in felis vulputate sed malesuada 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 title
Card Body
PRIMARY TEXT COLOR#434343
SECONDARY TEXT COLOR#a2a2a2
ROBOTO CONDENSED LIGHTSIZE 20 SP
ROBOTO CONDENSED LIGHTSIZE 20 SP
Abc
Abc
30th and MissionNavigate to
30th and MissionNavigate to
ROBOTO LIGHT CONDENSED 20 SPCOLOR #a2a2a2
ROBOTO LIGHT CONDENSED 16 SPCOLOR #434343
12 DP
2 DP
12 DP
8 DP 12 DP12 DP
12 DP
32 DP
8 DP BLOCK 32 DP ICON
32 DP ICON24 DP INTERIOR
Header
Secondary
64 DP ICONASSET SIZE
GREEN CIRCLECOLOR #1ce8b5104 DP
48 DPINTERIOR
Austin RobisonStandard two line text notification
Austin RobisonStandard three line text notification will look just like this
Austin RobisonStandard four line text notification will look just like this example here
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 than 96 DP we have to push a bit
of it below the fold.
Austin RobisonStandard five line text notification will look just like this example here that contains five lines
Austin RobisonThis is an example of the maximum card height before we truncate, fanny pack umami kitsch authentic pop-up bicycle rights wolf moon cardigan
Austin RobisonThis is an example of a card exceeding the max height and truncating the card. Tapping this card will expand the card and reveal more text
632 632 632
96 DP 96 DP 96 DP
8 DP BLOCK Taller than 240 DP or 9 lines of text? We fade you out at the
bottom and truncate you.
9 lines of text, or 240 DP is safe. This is the max size
before we need to truncate.
Cond Light 20Cond Light 20gluten-free vneck
Austin RobisonStandard four line text notification will look just like this example here
Austin RobisonThis is an example of a card exceeding the max height and truncating the card. Tapping this card will expand the card and reveal more text
632 632 63228 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 28 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
24 DP
16 DP
16 DP
HeaderBody
Austin RobisonStandard two line text notification
Cond Light 20Cond Light 20 SP
Austin RobisonStandard one line!
632 632 632
28 DP
28 DP
16 DP
12 DP72 DP
8 DP BLOCK
This just so happens to be the smallest card you’ll ever see. Imagine that. It’s only 72 DP!
At 96 DP, this sucker is the tallest card that will ever float on your home screen.
top related