Android design

1. Britt Barak
14/2/2016
Android Design
Take 3
3

2. Britt Barak
Britt Barak
Figure 8
Android Academy
Women Techmakers

3. Largest Android Community
Android Academy - TLV
TLV - Android Academy
~ 2000 members Join Us:

4. Jonathan
Yarkoni
Android Leader
Ironsource
Android Academy Staff
Yonatan Levin
Android
Google Developer
Expert
Britt Barak
Android Lead
Figure8
Yossi Segev
Android Developer
Colu
Shahar
Avigezer
Android Developer
Hello Heart

5. Community Mentors

6. 9.3 - 10.3
Register :goo.gl/forms/STkeqW9fHGI1JAb52

7. Pairing - Stickers!
Developers red Designers green

8. Let the fun begin!

9. Material Design Principles

10. Today

11. What’s on the menu?
- Bold Graphic Design
- Meaningful Motion
- Android Design Vision

12. Bold Graphic Design
●Colors
●Imagery
○ Photography
○ Iconography

13. Color

14. 90 seconds
For Product Judgement

15. 90% based on colors!

16. Brand recognition 80%
Learning 78%
Comprehension 73%

17. Material Design Palette

19. Color Palette
●Primary color - app’s personality
●Accent color - draws attention
●TIP : 2-3 hues of primary + 1 accent color

21. Material Themes
●@android:style/Theme.AppCompat (dark version)
@android:style/Theme.AppCompat.Light (light version)
@android:style/Theme.AppCompat.Light.DarkActionBar
android:theme="@style/AppTheme"

22. Customize Native Widgets Color

24. Define Resources
colors.xml
<color name="indigo_300">#7986CB</color>
<color name="indigo_500">#3F51B5</color>
<color name="indigo_700">#303F9F</color>
<color name="pink_a200">#FF4081</color>

25. Define Resources
styles.xml
<style name="AppTheme"
parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/indigo_500</item>
<item
name="colorPrimaryDark">@color/indigo_700</item>
<item name="colorAccent">@color/pink_a200</item>
</style>

26. Coloring Programmatically

27. Tinting 21+
drawable.setTint(color);

28. Tinting
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable.mutate(), color);

29. Coloring Dynamically

30. Palette Class
Extracting palette from image

31. Palette Class
Extracting palette from image
Vibrant
Vibrant Dark
Vibrant Light
Muted
Muted Dark
Muted Light

32. Palette API
// Synchronous
Palette p = Palette.from(bitmap).generate();
// Asynchronous
Palette.from(bitmap).generate(new PaletteAsyncListener() {
public void onGenerated(Palette p) {
}
});

33. Questions?

34. Imagery

35. Imagery
Pictures are faster than words.
●Explain ideas
●Clear context
●Win attention

36. Imagery
Photography Illustration Iconography

37. Hi, I’m Drawable!
And you are?

38. "something that can be drawn."
Drawable

39. Unlike a View-
does not interact with the user.

40. Important types
- Bitmap
- Nine patch
- Vector
- Shapes
- StateList

41. BitmapDrawable
wraps a bitmap
can be tiled, stretched, or aligned.

42. BitmapDrawable

43. Nine patch
PNG image in which you can define stretchable regions

46. example

47. ShapeDrawable
draws primitive shapes:
- Rectangle
- Oval
- Ring
- Line

48. <shape
android:shape="rectangle" >
<corners android:radius="4dp" />
<stroke android:width="4dp" android:color="@color/stroke" />
<solid android:color="@color/fill"/>
<padding android:left="20dp" android:top="20dp"
android:right="20dp" android:bottom="20dp" />
</shape>

49. Questions?

50. Photography

51. Imagery
Photography Illustration Iconography

52. Photos
●Specific to content
●Personal
●Inspiring

53. Remember
●Good quality
●Not too heavy
○ Out Of Memory Exceptions
●Scale types

54. Avatars and Thumbnails
Generally- are tap targets
Round - softer, people face shape
Personalization

55. RoundedBitmapDrawable drawable =
RoundedBitmapDrawableFactory
.create(getResources(), bitmap);
drawable.setCircular(true);

56. ...and there’s a secret

59. Canvas canvas = new Canvas(destination);
canvas.drawBitmap(destination, 0, 0, null);
maskPaint.setXfermode(new PorterDuffXfermode(mode));
canvas.drawBitmap(source, 0 , 0 , maskPaint);
imageView.setImageBitmap(destination);
https://developer.android.com/reference/android/graphics/PorterDuffXfermode.html

60. Hero Image
Anchored in a prominent position
●Draw in a user
●Context about the content
●Reinforce the brand.

61. Text & Icon Protection
●Shadow to icons / text
●Overlay / scrim:
○ Dark scrims : 20%-40% opacity
○ Light scrims : 40%-60% opacity
●Blur image

62. Text & Icon Protection

63. Gradient Colored Shapes
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<stroke android:width="1dp" android:color="#0078a5" />
<gradient
android:startColor="#0078a5" android:endColor="#00adee"
android:angle="90"/>
<padding android:left="8dp" android:top="2dp"
android:right="8dp" android:bottom="2dp" />
</shape>

64. Gradient Colored Shapes
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<stroke android:width="1dp" android:color="#0078a5" />
<gradient
android:startColor="#0078a5" android:endColor="#00adee"
android:gradientRadius="250"
android:type="radial"/>
<padding android:left="8dp" android:top="2dp"
android:right="8dp" android:bottom="2dp" />
</shape>

65. Iconography

66. Next Session….

67. Option1: PNGs

68. Option2: Vector Graphics
1.Size - Single file
2.Quality - Drawing instructions
3.Animation

69. Do you mean SVG???
Not Exactly...

70. Vector Graphic
M - move to
H- Horizontal line
V- Vertical line
L- Line to
Z - Close path
●Uppercase - absolute, Lowercase - relative

71. Example
M 1,1

72. Example
M 1,1
H 9

73. Example
M 1,1
H 9
V 9

74. Example
M 1,1
H 9
V 9
H 1

75. Example
M 1,1
H 9
V 9
H 1
Z

76. SVG

77. VectorDrawable

78. A Word About Performance
- Size - max 200 x 200 dp
- Different size / color → separate file.
- FillType and conversion
- http://a-student.github.io/SvgToVectorDrawableConverter.Web/

79. Questions?

80. Meaningful Motion

82. “I choose a lazy person to do a hard job.
Because a lazy person will find
an easy wayto do it.”
- Bill Gates

83. Animations Are Important
●Draws the eye
●Instruct user
●Continuous experience
●User feedback
●Delightful details

84. Today we’ll be cost - effective.

85. Meaningful Motion
- Responsive
- The user controls the situation
- Instructive
- The user know what’s happening

86. Responsive - the user as the prime mover
Why?
- Perceived latency
- Better ux (understanding how to interact)
- Sense of user control

87. Touch Feedback
●Targets size : 48dp (7-9mm)
●Feedback for ALL touchable elements
○ Standard button
○ Ripples
○ Selectors

88. Standard Button
Ripple & Elevation by default.

89. Ripple
Set background:
?android:attr/selectableItemBackground
?android:attr/selectableItemBackgroundBorderless
Recolor
● on android theme : colorControlHighlight
●(custom RippleDrwawble)

90. But that’s for L+
What can we do?

91. StateListDrawable (aka Selector)
Different images to represent the same graphic,
depending on the state of the object.

92. <selector >
<item android:state_pressed="false"
android:drawable="@color/bg_default" />
<item android:state_pressed="true"
android:drawable="@color/bg_pressed" />
</selector>

93. States
● android:state_pressed
● android:state_focused
● android:state_hovered
● android:state_selected
● android:state_checkable
● android:state_checked
● android:state_enabled

94. By the way...
Schedule
M T W T F S S

95. StateListAnimator
Animate View State Changes
android:stateListAnimator
https://developer.android.com/reference/android/animation/StateListAnimator.html

96. StateListAnimator
<selector>
</selector>

97. StateListAnimator
<selector>
<item android:state_pressed="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="2dp"
android:valueType="floatType"/>
</set>
</item>
//……….

98. animate translationZ when pressed
<selector>
<item android:state_pressed="true">
<!--...-->
</item>
<item android:state_pressed="false">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="100"
android:valueTo="0"
android:valueType="floatType"/>
</set>
</item>
</selector>

99. animate translationZ when pressed
<selector>
<item android:state_pressed="true">
<!--...-->
</item>
<item android:state_pressed="false">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="100"
android:valueTo="0"
android:valueType="floatType"/>
</set>
</item>
</selector>

100. ObjectAnimator
animating properties on target objects.
<objectAnimator
android:propertyName="y"
android:valueTo="200"
android:valueType="floatType"
android:duration="1000"
android:repeatCount="1"
android:repeatMode="reverse"/>

101. By Java Code:
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

102. Motion Best Practices:
- Keep it fast
- Duration per distance (and screen size)
- Natural curve
- Natural movement (interpolator)
- Don’t do it.

103. Duration
●Tablet 130% 390 ms
●Normal 100% 300 ms
●Wearable 70% 210 ms

104. Use Curved Motion
PathInterpolator based on a Bézier curve or a Path object.
<pathInterpolator
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>

105. Interpolator
Object are quicker close to final position
@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
Samples: github.com/googlesamples/android-Interpolator
https://material.io/guidelines/motion/material-motion.html

106. Questions?

107. Delightful Details

108. API 21+ . Their attributes are can be animated.
Animated Vector Drawable

109. Vector Drawable
API 21+
Drawables defined in XML
Their attributes are can be animated.
http://developer.android.com/training/material/animations.html#AnimVector
https://github.com/udacity/ud862-samples/tree/master/TickCross
https://github.com/udacity/ud862-samples/tree/master/HeartFill

110. Reveal Effect
Reveal animations provide users visual continuity when you show or
hide a group of UI elements.
ViewAnimationUtils.createCircularReveal()

111. Questions?

112. Continuous Experience
Relations between screens
Shared elements
Activity transitions

113. Activity Transitions
A
source
B
destination
1. Exit A 2. Enter B
3. Return B4. Re-enter A

114. Transition Types
API 19+ :
●AutoTransition
○ Fade in, change bounds, fade out
●Fade
○ visibility
●ChangeBounds
○ size&position
●TransitionSet
API 21+ :
● Explode
○ visibility
●Slide
○ enter/exit from an edge
●ChangeClipBounds
○ Bounds & transforms
●ChangeImageTransform
○ Bounds & transforms(scale types)
●ChangeTransform
○ Bounds & transforms

115. ●Content transition
○ Run anim on the content coming in / going out
●Shared element transition
Window transitions (between activities)

116. Create
In xml file:
<autoTransition/>
<fade />
<changeBounds/>
…..

117. Specify Multiple Transitions
(For example, this is AutoTransition)
<transitionSet android:transitionOrdering="sequential">
<fade android:fadingMode="fade_out" />
<changeBounds />
<fade android:fadingMode="fade_in" />
</transitionSet>

118. Apply
Content transition:
- Style
- Calling activity
- Called activity

119. Style
<style name="BaseAppTheme" parent="android:Theme.Material">
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">@transition/explode</item>
<item name="android:windowExitTransition">@transition/explode</item>
</style>

120. Calling Activity
startActivity(intent);
overridePendingTransition
(R.anim.slide_from_right, R.anim.slide_to_left);
finish();
overridePendingTransition
(R.anim.slide_from_left, R.anim.slide_to_right);

121. Called Activity
Activity.java:
getWindow().setEnterTransition(transition);
getWindow().setExitTransition(transition);

122. Between View Hierarchies
TransitionManager.
beginDelayedTransition(rootView, transition);
https://developer.android.com/training/transitions/index.html

123. Shared element

124. Shared Element
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(this, view, "transitionName");
startActivity(intent, options.toBundle());

125. Shared Element
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(this,
Pair.create(view1, "transName1"),
Pair.create(view2, "transName2"));
startActivity(intent, options.toBundle());

126. What Does It Do?
(For example, this is the default)
<transitionSet android:transitionOrdering="sequential">
<changeBounds />
<changeTransform />
<changeClipBounds />
<changeImageTransform />
</transitionSet>

127. Define Custom Transition
<style name="BaseAppTheme" parent="android:Theme.Material">
<item name="android:windowSharedElementEnterTransition">
@transition/custom</item>
<item name="android:windowSharedElementExitTransition">
@transition/custom</item>
</style>

128. Called Activity
Activity.java:
getWindow().setSharedElementEnterTransition(transition);
getWindow().setSharedElementExitTransition(transition);

129. Instructive Motion
Demonstrate Navigation:
scroll up a list
viewpager slide
show drawer

130. Questions?

131. But,
How Do We Know
If The UX Is Good Enough?

132. Android Design Vision

133. Research: Predict Marriage Lasting
By watching couples for 15min. after wedding
Prof. John Gottman at the University of Washington

134. Research: Predict Marriage Lasting
By watching couples for 15min. after wedding - 94% accuracy

135. How??

136. How??
Success
Prof. John Gottman, Washington Uni.
15

137. How??
Failure
Prof. John Gottman, Washington Uni.
11

138. Workgroup Productiveness
Productive
Marcials Loanda
13

139. Positive to Negative Emotions
Barbara Fredrickson
13

140. Fill The Jars

141. Fill The Jars

142. HOW?

143. Android Creative Vision
Enchant me.
Simplify my life.
Make me amazing.

144. Android Creative Vision
Dear Android,
Enchant me.
Simplify my life.
Make me amazing.
10x!!!
Users.

145. Let’s Fill The Jars!

146. ● Delight me in surprising ways
● Real objects are more fun that
button and menus
● Let me make it mine
● Get to know me
Enchant Me
Simplify My Life
Make me Amazing
Enchant Me

147. Delight me in surprising ways
Surface, animation, sound effect…
Subtle effects contribute to a feeling of effortlessness

148. Real objects are more fun than buttons and menus
Reduces the cognitive effort
More emotionally satisfying

149. Let me make it mine
Customization that lets users
‘own’ the experience.

150. Get to know me
Learn users’ preferences
Previous choices within easy reach

151. Get to know me

152. ● Keep it brief
● Pictures are faster than words
● Decide for me but let me have the final
say
● Only show what I need when I need it
● I should always know where I am
● Never lose my stuff
● If it looks the same, it should act the
same
● Only interrupt me if it’s important
Enchant Me
Simplify My Life
Make me Amazing
Simplify My Life

153. Keep it brief
Short phrases with simple words.
People skip long sentences.

154. Keep it brief
Yossi Segev, Jonathan Yarkoni, Yonatan V. Levin and 74 others like this.

155. Pictures are faster than words
●Eye-catching
●Faster to understand than text
●Words are longer
SET TIME
AAJUSTAR HORÁRIO
REGLAGES DE L'HEURE
ZEITSPANNE AUSWÄHLEN

156. Decide for me but let me have the final say
Take your best guess and act
rather than asking first.
Allow for 'undo'.

157. Decide for me but let me have the final say

158. Decide for me but let me have the final say

159. Decide for me but let me have the final say
“Are you sure” implies that the user didn't think through

160. Only show what I need when I need it
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.

161. Navigation Drawers
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.

162. Runtime Permissions
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.

163. Contextual Tips Instead of Onboarding
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.

164. Contextual Tips Instead of Onboarding
They are not a substitute for good UX design!
Only for priority or difficult tasks
If you MUST use onboarding :
It’s essential for first use
Allow users to skip it

165. I should always know where I am
Give users confidence.
Make places in your app look distinct
Transitions show relationships among screens.
Progress feedback

166. Never lose my stuff
Save given data and let access it from anywhere.
settings, personal touches, and creations across phones, tablets, and computers.

167. If it looks the same, it should act the same
Discern functional differences by making them visually distinct

168. Only interrupt me if it's important
●Shield people from unimportant minutiae.
●Interruption can be dispersing, taxing and frustrating.

169. Only interrupt me if it's important
●Notifications
●Un-interrupting progressbar

170. ● Give me tricks that work
everywhere
● It’s not my fault
● Sprinkle encouragement
● Do the heavy lifting for me
● Make important things fast
Enchant Me
Simplify My Life
Make me Amazing
Make Me Amazing

171. Give me tricks that work everywhere
Make an easy to learn app
●Use ui patterns.
●People love figuring out for themselves.

172. Gestures
●Touch
○ → example: select.
●Double touch
○ → example: zoom in
●Drag, Swipe, or Fling
○ → Example: Dismiss, scroll, tilt, etc.

173. Gestures
●Long press
○ → Example: Select an elemen
● Long press is not used to display a contextual menu.
●Pinch open / close: zoom in / out

174. It's not my fault
When things go wrong - be nice
Users should feel smart
Clear instructions
verbs, short words, not technical,spare the unneeded details.
Fix behind the scenes if possible

175. It's not my fault
Insert your SIM card now. You did not insert SIM card!

176. It's not my fault

177. It's not my fault - No Content

178. Avoiding completely empty states

179. Best match
Tto handle a misspelled query without explicitly blaming on the user.

181. Sprinkle encouragement
Smaller easier steps instead of one complex task
Feedback on actions, even just a subtle glow.
Use 2nd person, human approachable tone
Humor - not always appropriate

182. Sprinkle encouragement
Just a sprinkle...

183. Do the heavy lifting for me
Make novices feel like experts

184. Do the heavy lifting for me
Predict what would the user want to do next

185. Make important things fast
Make the most important thing
easy to find and fast to use

186. Make important things fast
Make the most important thing
easy to find and fast to use

187. Words Are Powerful
Pay attention to:
- Keep it brief
- It’s not my fault
- Sprinkle encouragement

188. Let’s View Some general Examples

189. Example-
How to inform users?

190. Blocking Alert Dialog
Negative:
●Keep it brief
●It’s not my fault
●Only interrupt me if it’s important

191. Toast
Negative:
●Only interrupt me if it’s important
●It’s not my fault

192. Snackbar
Positive:
●Only interrupt me if it’s important
●Do the heavy lifting for me
●Decide for me but let me have the final say

193. Example-
Rich Notifications

194. Rich Notifications
Positive:
●Only interrupt me if it’s important
●Make important things fast

195. Example-
Phone (Dialer)

196. Phone -
Positive:
●Get to know me
●Let me make it mine
●Pictures are faster than words
●Make important things fast

197. Example-
Expanding FAB

198. Expanding FAB
Positive:
●Get to know me
●Pictures are faster than words
●Make important things fast
●Only show what I need
when I need it

199. Any Questions?

200. So What Did We Have Today?
●Bold Graphic Design
○ Themes and colors
○ Tinting
○ Palette api
○ Drawables
●Meaningful Motion
○ Touch feedback