Palestra Android - TDC 2014 - Mobile

1. Material Design
How get started?

2. Jacksonfdam
http://about.me/jacksonfdam
https://bitbucket.org/jacksonfdam
https://github.com/jacksonfdam
http://linkedin.com/in/jacksonfdam
@jacksonfdam

3. Agenda
● Material Design
● Material theme
● Styles
● Layouts
● Elevation
● Widgets
● Animations

4. Material Design

5. A brief history of Android
From a design perspective

6. Oct. 22, 2008
T-Mobile G1 is launched

7. Sep. 15, 2009
Density Independent pixels introduced in Donut

8. Oct. 26, 2009
The Droids arrive

9. Dec. 6, 2010
Google acquires Matias Duarte

10. Feb. 22, 2011
Honeycomb showed us a glimpse of what
Android would soon look like

11. Oct. 8, 2011
#YOLOHOLO

12. July 9, 2012
Jelly Bean brings actions to notifications, Google
Now

13. Oct. 31, 2013
Losing the fat

14. June 25, 2014
Android L Preview

15. Material Theme
The material theme provides a new style for our
app, system widgets that let us set their color
palette, and default animations for touch
feedback and activity transitions.

16. Material Design
● Universal platform design that functions across Android
Wear, Android TV, Android Auto, and all of Google’s
apps and services
● Making the whole device feel unified
● Its all about everything animation, but flat at the same
time
● Elevation value to any UI surface to get 3D effects by
virtual light sources and real time shadows

17. Material Theme
● Material Design
● Android RunTime (ART)
● Battery life (Project Volta)
● Security
● Multitasking and Recent App
● Notifications
● Many more...

18. New Widgets
The Android L Developer Preview includes two
new widgets for displaying complex views:
● The new RecyclerView widget is a More
advanced version of ListView.
● The new CardView widget lets us Important
pieces of information inside Cards that have
a consistent look and Feel.

19. View Shadows
In addition to the X and Y properties, views in the
Android L Developer have a Z property. This new
property represents the elevation of a view, which
determines:
● The size of the shadow - Views with higher Z
values cast bigger shadows.
● The drawing order - Views with higher Z values
appear on top of other views.

20. Animations
● The Android L Developer provides new APIs
that let us to create custom animations for touch
feedback in UI controls, view state changes,
and activity transitions.
● Touch feedback animations are built into
several standard views such as buttons.
● The new APIs let us customize these
animations and add animations to our custom
views

21. Animations
The new animation APIs let us:
● Respond to touch events in our views with touch
feedback animations.
● Hide and show views with reveal effect animations.
● Switch between activities with custom activity transition
animations.
● Create more natural animations with curved motion.
● Show animations in state list drawables between view
state changes.

22. Principles of Material
● Design Material is the metaphor : A material
metaphor is the unifying theory of a rationalized space
and a system of motion.
● Bold, graphic, intentional : These elements do far
more than please the eye; they create hierarchy,
meaning, and focus.
● Motion provides meaning : Motion is meaningful and
appropriate, serving to focus attention and maintain
continuity.

23. Animation has four contents
● Authentic Motion
● Responsive Interaction
● Meaningful Transitions
● Delightful Details

24. Animation
● Authentic Motion
Perceiving an object's tangible form helps us
understand how to manipulate it. Observing an object's
motion tells us whether it is light or heavy, flexible or
rigid, small or large.
● Contents
Mass and Weight: Physical objects have mass and
move only when forces are applied to them.Objects
can’t start or stop instantaneously.

25. Animation
● Responsive Interaction
Responsive interaction builds trust with the user and engages them. It
is thoughtful and purposeful, not random, and can be gently whimsical
but never distracting.
In material design, apps are responsive to and eager for user input:
● Touch, voice, mouse and keyboard are all first-class input methods
● Although UI elements appear tangible, they are locked behind a layer
of glass

26. Animation(Responsive Interaction)
Surface Reaction One way to express this acknowledgment is
through the ink metaphor, the dynamic display surface that coats
every sheet of paper.

27. Animation(Responsive Interaction)
● Material Response
● In addition to ink-like actions on the surface, the material itself
can also respond to interaction.
● The material can lift up when touched or clicked, indicating an
active state.
● Material appears from touch point.
● Paper appears from center of screen, breaking relationship with
input.

28. Animation(Responsive Interaction)
Meaningful Transitions
● It can sometimes be difficult for a user to know where to focus
their attention in an app or how an app element got from point A
to point B.
● Motion design should not only be beautiful, but serve a functional
purpose.

29. Examples
Visual Continuity
● Transitioning between two visual states should be smooth,
appear effortless, and above all, provide clarity to the user, not
confusion.
A transition has three categories of elements:
● Incoming elements
● Outgoing elements
● Shared elements

30. Animation(Meaningful Transitions)
Hierarchical Timing
● When building a transition, consider both the order in which
elements move and the timing of their movement.
● It Ensure that motion supports the information hierarchy.

31. Animation(Meaningful Transitions)
Consistent Choreography
● As transitioning elements move around the screen.
● They should behave in a coordinated manner.

32. Animation(Meaningful Transitions)
Delightful Details
● Animation can exist within all components of an app and at all
scales, from finely detailed icons to key transitions and actions.
● All elements work together to construct a seamless experience
and a beautiful, functional app.

33. What were the goals?

34. …synthesize the classic
principles of good design
with the innovation and
possibility of technology and
science…

35. …single underlying
system that allows for a
unified experience
across all platforms…

36. …touch, voice, mouse
and keyboard are all
first-class input
methods…

37. Material Design
Material design is a comprehensive guide for
visual, motion, and interaction design across
platforms and devices.

38. Material Design
What if we could design for
materials of the future instead of
materials that we use today?
- Matias Duarte”

39. Material Design
The Android L Developer Preview
provided the following elements for you to build material design apps
● A new theme
● New Widgets for complex views
● New APIs for custom shadows and animations

40. Material Design
What is Android L?
- Unnamed version of Android with code named L
- Comes packed with over 5000 new developer APIs
- New universal design and functionality language
- User friendly and attractive navigation concepts
- Improved Battery life and Processing

41. Material Design
What is Android L?
- Unnamed version of Android with code named L
- Comes packed with over 5000 new developer APIs
- New universal design and functionality language
- User friendly and attractive navigation concepts
- Improved Battery life and Processing

42. Material Design
What is Android L?
Android 5.0 SDK and new Lollipop preview images
coming October 17

43. Material Design
http://www.google.com/nexus/6/

44. USEFUL Links
Visual language for our users that synthesizes the classic
principles of good design with the innovation of technology.
This is material design.

45. Goals

46. Material is metaphor
Principles
Graphic Motion provides meaning

47. Motion animation

48. Responsive Interaction

49. USEFUL Links
Meaningful Transitions

50. USEFUL Links
Delightful Details

51. USEFUL Links
Style

52. USEFUL Links
Color Pallete

53. USEFUL Links
UI Color Application

54. Typeface Roboto

55. USEFUL Links
How to use font

56. Flat design for icons

57. USEFUL Links
Use more place for image

58. More real things in material design

59. Focus on main

60. No effects for photo

61. Scale layouts for all devices

62. USEFUL Links
Metrics

63. USEFUL Links
Flat and real dynamic design

64. Material in android

65. Apply the Material Theme

66. USEFUL Links
Customize color in theme

67. • The material theme is only available in the Android L
Developer Preview.
Compatibility
• android.support.v7.widget.RecyclerView
• android.support.v7.widget.CardView

68. USEFUL Links
RecyclerView

69. • ViewHolder by default
• Layout manager
• ItemAnimator
RecyclerView

70. RecyclerView example

71. USEFUL Links
Shadows
CardView
Rounded corners
Box for content

72. USEFUL Links
Pallete
Bitmap
Vibrant color (Normal, Light,
Dark)
Muted color (Normal, Light, Dark)

73. USEFUL Links
Shadows

74. USEFUL Links
Shadow evaluation

75. • Touch feedback
Animations
• Reveal effect
• Curved motion
• Activity transitions
• View state changes

76. • RippleDrawable class
Touch feedback
• ?android:attr/selectableItemBackground
• android:colorControlHighlight

77. Touch feedback

78. Activity transitions

79. Material design from Google
http://www.google.com/design/spec/material-design
Useful links
Material design for android
http://developer.android.com/preview/material/index.html
Angular material design
https://material.angularjs.org/#/
Apps with material design
http://www.androidauthority.com/best-material-design-apps-for-android-523420/

80. Thank you.
@jacksonfdam