tdc 2014 - trilha mobile - material design
DESCRIPTION
Apresentação sobre material design no Android, conceitos, e aplicações.TRANSCRIPT
![Page 1: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/1.jpg)
Material DesignHow get started?
![Page 2: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/2.jpg)
Jacksonfdam
http://about.me/jacksonfdam
https://bitbucket.org/jacksonfdam
https://github.com/jacksonfdam
http://linkedin.com/in/jacksonfdam
@jacksonfdam
![Page 3: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/3.jpg)
Agenda
● Material Design● Material theme● Styles● Layouts● Elevation● Widgets● Animations
![Page 4: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/4.jpg)
Material Design
![Page 5: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/5.jpg)
A brief history of AndroidFrom a design perspective
![Page 6: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/6.jpg)
Oct. 22, 2008T-Mobile G1 is launched
![Page 7: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/7.jpg)
Sep. 15, 2009Density Independent pixels introduced in Donut
![Page 8: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/8.jpg)
Oct. 26, 2009The Droids arrive
![Page 9: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/9.jpg)
Dec. 6, 2010Google acquires Matias Duarte
![Page 10: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/10.jpg)
Feb. 22, 2011Honeycomb showed us a glimpse of what Android would soon look like
![Page 11: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/11.jpg)
Oct. 8, 2011#YOLOHOLO
![Page 12: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/12.jpg)
July 9, 2012Jelly Bean brings actions to notifications, Google Now
![Page 13: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/13.jpg)
Oct. 31, 2013Losing the fat
![Page 14: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/14.jpg)
June 25, 2014Android L Preview
![Page 15: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/15.jpg)
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.
![Page 16: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/16.jpg)
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
![Page 17: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/17.jpg)
Material Theme
● Material Design ● Android RunTime (ART) ● Battery life (Project Volta) ● Security ● Multitasking and Recent App ● Notifications ● Many more...
![Page 18: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/18.jpg)
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.
![Page 19: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/19.jpg)
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.
![Page 20: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/20.jpg)
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
![Page 21: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/21.jpg)
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.
![Page 22: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/22.jpg)
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.
![Page 23: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/23.jpg)
Animation has four contents
● Authentic Motion● Responsive Interaction● Meaningful Transitions● Delightful Details
![Page 24: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/24.jpg)
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.
![Page 25: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/25.jpg)
Animation
● Responsive InteractionResponsive 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
![Page 26: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/26.jpg)
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.
![Page 27: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/27.jpg)
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.
![Page 28: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/28.jpg)
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.
![Page 29: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/29.jpg)
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
![Page 30: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/30.jpg)
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.
![Page 31: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/31.jpg)
Animation(Meaningful Transitions)
Consistent Choreography ● As transitioning elements move around the screen. ● They should behave in a coordinated manner.
![Page 32: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/32.jpg)
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.
![Page 33: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/33.jpg)
What were the goals?
![Page 34: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/34.jpg)
…synthesize the classic principles of good design with the innovation and possibility of technology and science…
![Page 35: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/35.jpg)
…single underlying system that allows for a unified experience across all platforms…
![Page 36: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/36.jpg)
…touch, voice, mouse and keyboard are all first-class input methods…
![Page 37: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/37.jpg)
Material Design
Material design is a comprehensive guide for visual, motion, and interaction design across
platforms and devices.
![Page 38: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/38.jpg)
Material Design
What if we could design for materials of the future instead of
materials that we use today? - Matias Duarte”
![Page 39: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/39.jpg)
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
![Page 40: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/40.jpg)
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
![Page 41: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/41.jpg)
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
![Page 42: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/42.jpg)
Material Design
What is Android L? Android 5.0 SDK and new Lollipop preview images coming October 17
![Page 43: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/43.jpg)
Material Design
http://www.google.com/nexus/6/
![Page 44: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/44.jpg)
USEFUL Links
Visual language for our users that synthesizes the classic principles of good design with the innovation of technology.
This is material design.
![Page 45: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/45.jpg)
Goals
![Page 46: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/46.jpg)
Material is metaphor
Principles
Graphic Motion provides meaning
![Page 47: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/47.jpg)
Motion animation
![Page 48: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/48.jpg)
Responsive Interaction
![Page 49: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/49.jpg)
USEFUL Links
Meaningful Transitions
![Page 50: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/50.jpg)
USEFUL Links
Delightful Details
![Page 51: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/51.jpg)
USEFUL Links
Style
![Page 52: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/52.jpg)
USEFUL Links
Color Pallete
![Page 53: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/53.jpg)
USEFUL Links
UI Color Application
![Page 54: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/54.jpg)
Typeface Roboto
![Page 55: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/55.jpg)
USEFUL Links
How to use font
![Page 56: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/56.jpg)
Flat design for icons
![Page 57: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/57.jpg)
USEFUL Links
Use more place for image
![Page 58: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/58.jpg)
More real things in material design
![Page 59: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/59.jpg)
Focus on main
![Page 60: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/60.jpg)
No effects for photo
![Page 61: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/61.jpg)
Scale layouts for all devices
![Page 62: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/62.jpg)
USEFUL Links
Metrics
![Page 63: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/63.jpg)
USEFUL Links
Flat and real dynamic design
![Page 64: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/64.jpg)
Material in android
![Page 65: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/65.jpg)
Apply the Material Theme
![Page 66: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/66.jpg)
USEFUL Links
Customize color in theme
![Page 67: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/67.jpg)
• The material theme is only available in the Android L Developer Preview.
Compatibility
• android.support.v7.widget.RecyclerView
• android.support.v7.widget.CardView
![Page 68: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/68.jpg)
USEFUL Links
RecyclerView
![Page 69: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/69.jpg)
• ViewHolder by default
• Layout manager
• ItemAnimator
RecyclerView
![Page 70: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/70.jpg)
RecyclerView example
![Page 71: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/71.jpg)
USEFUL Links
Shadows
CardView
Rounded corners
Box for content
![Page 72: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/72.jpg)
USEFUL Links
Pallete
Bitmap
Vibrant color (Normal, Light, Dark)
Muted color (Normal, Light, Dark)
![Page 73: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/73.jpg)
USEFUL Links
Shadows
![Page 74: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/74.jpg)
USEFUL Links
Shadow evaluation
![Page 75: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/75.jpg)
• Touch feedback
Animations
• Reveal effect
• Curved motion
• Activity transitions
• View state changes
![Page 76: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/76.jpg)
• RippleDrawable class
Touch feedback
• ?android:attr/selectableItemBackground
• android:colorControlHighlight
![Page 77: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/77.jpg)
Touch feedback
![Page 78: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/78.jpg)
Activity transitions
![Page 79: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/79.jpg)
Material design from Google http://www.google.com/design/spec/material-design
Useful links
Material design for androidhttp://developer.android.com/preview/material/index.html
Angular material designhttps://material.angularjs.org/#/
Apps with material designhttp://www.androidauthority.com/best-material-design-apps-for-android-523420/
![Page 80: TDC 2014 - Trilha Mobile - Material design](https://reader035.vdocuments.us/reader035/viewer/2022062614/54705472af795946438b4636/html5/thumbnails/80.jpg)
Thank you.@jacksonfdam