As presented in CodeMotion Tel Aviv: http://telaviv.codemotionworld.com

1. • 10 - 11 Material Design
• 11 - 12 Tools for the (mobile) web
• 12 - 13 Angular.js
• 13 - 14 Lunch!
• 14 - 16:30 Cloud Platform intro +
1:1 mentoring

2. Material Design
+Ran Nachmany

3. M AT E R I A L D E S I G N

4. A coherent cross-platform
experience

5. A coherent cross-platform
experience
A more flexible design system
for Android

6. A coherent cross-platform
experience
A more flexible design system
for Android
A rational approach to visual,
interaction, and motion design

7. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

8. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

9. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

10. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

11. Tangible
surfaces
Print-like
design
Meaningful
motion
Adaptive
design

12. Tangible surfaces1

14. Constrained depth

15. Interaction cues
(scrolling and pinning)

16. Surface
reaction

17. Z-eam me
up, Scotty
Elevation
The base Z-depth of a View
!
+
!
Translation Z
The transient deltaZ=

18. <ImageView
...
android:elevation="8dp" />
view.animate().translationZ(…).start();
Z-eam me
up, Scotty

19. <ImageView
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:elevation="8dp"
android:stateListAnimator=“@anim/my_state_list_animator”
... />
StateListAnimator
Note: the Button provides this automatically

20. anim/my_state_list_animator.xml
</selector>
<selector>
StateListAnimator

21. <item android:state_pressed="true" android:state_enabled="true">
<objectAnimator android:propertyName="translationZ"
android:valueTo="8dp"
android:valueType="floatType"/>
</item>
</selector>
<selector>
StateListAnimator
anim/my_state_list_animator.xml

22. <item>
<objectAnimator android:propertyName="translationZ"
android:valueTo="0"
android:valueType="floatType"/>
</item>
</selector>
<selector>
StateListAnimator
anim/my_state_list_animator.xml

23. Outline
A view’s outline defines the shadow it casts
By default, the outline is derived from the view’s background
<shape android:shape="oval">
<solid android:color=“@color/blue“ />
</shape>

24. Outline
But you can do much more with Outline.
Say you want an avatar clipped within a circle…
static class OvalOutlineProvider extends ViewOutlineProvider {
@Override
public void getOutline(View view, Outline outline) {
outline.setOval(0, 0, view.getWidth(), view.getHeight());
}
}
!
view.setOutlineProvider(new OvalOutlineProvider());

25. A card is a piece of paper
that contains a unique
data set of related,
heterogeneous
information.
“
”
Cards

26. A card is a piece of paper
that contains a unique
data set of related,
heterogeneous
information.
“
”
Cards
outline
elevation

27. Cards
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
!
<!-- Your card content -->
!
</android.support.v7.widget.CardView>

28. Print-like design2

32. Front View Side View

33. YES NO

34. Refined
typography

35. Refined
typography

36. Typographic
scale
Display 4
!
Display 3
!
Display 2
!
Display 1
!
Headline
!
Title
!
Subhead
!
Body 2
!
Body 1
!
Caption
!
Menu
!
Button

37. android:TextAppearance.Material.
Display 4
!
Display 3
!
Display 2
!
Display 1
!
Headline
!
Title
!
Subhead
!
Body 2
!
Body 1
!
Caption
!
Menu
!
Button

38. TextAppearance.AppCompat.
Display 4
!
Display 3
!
Display 2
!
Display 1
!
Headline
!
Title
!
Subhead
!
Body 2
!
Body 1
!
Caption
!
Menu
!
Button

39. Bold
color

40. Primary
+
Accent

41. colorPrimaryDark
colorPrimary colorAccent

42. Theme.Material
<style name=“MyAwesomeTheme"
parent=“android:Theme.Material.Light.DarkActionBar”>
!
<item name="android:colorPrimary">@color/blue</item>
<item name=“android:colorPrimaryDark">@color/darker_blue</item>
<item name=“android:colorAccent">@color/teal</item>
!
</resources>
API v21 and above

43. Theme.AppCompat
<style name=“MyAwesomeTheme"
parent=“Theme.AppCompat.Light.DarkActionBar”>
!
<item name="colorPrimary">@color/blue</item>
<item name="colorPrimaryDark">@color/darker_blue</item>
<item name="colorAccent">@color/teal</item>
!
</resources>
API v7 and above

44. Content can
provide color

45. Light Vibrant Vibrant Dark Vibrant
Light Muted Muted Dark Muted

46. Palette p = Palette.generate(bitmap);
P
Swatch
Swatch
Swatch
Swatch vibrant = p.getVibrantSwatch();
Swatch darkVibrant = p.getDarkVibrantSwatch();
Swatch lightVibrant = p.getLightVibrantSwatch();

47. What’s in a Swatch?
getRgb()
The RGB value of this Swatch (aka the colour)
getPopulation()
The relative amount of pixels this color represents
getHsl()
The HSL value of this Swatch
getTitleTextColor()
ARGB color for legible ‘title’ text over this Swatch
getBodyTextColor()
ARGB color for legible ‘body’ text over this Swatch
Title
Body

48. 3Meaningful Motion

49. Activity transitions
1. Enable the feature
<style name="MyTheme" parent=“android:Theme.Material">
<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>
</style>
requestWindowFeature(Window.FEATURE_CONTENT_TRANSITIONS);
From your theme
From your Activity

50. <ImageView
...
android:transitionName="@string/transition_album_cover" />
layout/album_details.xml
2. Specify the shared element(s)
Activity transitions

51. Intent intent = ... // setup Intent as usual
!
String transitionName = getString(R.string.transition_album_cover);
!
ActivityOptionsCompat opts = ActivityOptionsCompat
.makeSceneTransitionAnimation(
activity, // Our starting Activity
albumCoverView, // The view which starts the transition
transitionName // The transitionName of the view we’re transitioning to
);
!
// Now start the Activity, using our options bundle
ActivityCompat.startActivity(activity, intent, opts.toBundle());
3. Start the Activity (transition)
Activity transitions

52. Asymmetric
motion

53. Users
initiate
change

54. RippleDrawable
<ripple android:color=“?android:colorControlHighlight”>
<item>
<shape android:shape="rectangle">
<solid android:color=“@color/grey“ />
</shape>
</item>
</ripple>
Bound to another Drawable
New (v21+)

55. RippleDrawable
Bound to an invisible mask
<ripple android:color=“?android:colorControlHighlight”>
<item android:id=“@android:id/mask">
<shape android:shape="rectangle">
<solid android:color=“@color/white“ />
</shape>
</item>
</ripple>
New (v21+)

56. RippleDrawableNew (v21+)
<ripple android:color=“?android/colorControlHighlight” />
Unbounded

57. Ripples
android:selectableItemBackground
Bounded ripple
android:selectableItemBackgroundBorderless
Unbounded ripple New (v21+)

58. Circular Reveal

59. Circular Reveal
Animator reveal
= ViewAnimationUtils.createCircularReveal(
viewToReveal, // View to reveal
centerX, // mask centre x
centerY, // mask centre y
startRadius, // mask start radius
endRadius); // mask end radius
reveal.start();

60. Fast,
precise
motion

61. Adaptive design4

63. Keylines

64. Increments
64dp
56dp

65. Think in blocks

66. Toolbar

67. Toolbar

68. Toolbar
<Toolbar
android:id=”@+id/my_toolbar”
android:layout_height=”?android:actionBarSize”
android:layout_width=”match_parent”
android:background=”?android:colorPrimary” />
Place it within your layouts
Toolbar toolbar = findViewById(R.id.my_toolbar);
setActionBar(toolbar);
Then in your Activity/Fragment
New (v21+)

69. Toolbar (AppCompat)
<android.support.v7.widget.Toolbar
android:id=”@+id/my_toolbar”
android:layout_height=”?actionBarSize”
android:layout_width=”match_parent”
android:background=”?colorPrimary” />
Place it within your layouts
Toolbar toolbar = findViewById(R.id.my_toolbar);
setSupportActionBar(toolbar);
Then in your ActionBarActivity/Fragment
New (v7+)

70. M AT E R I A L D E S I G N

71. Q?+Ran Nachmany
@shed2k