tdc 2014 - trilha mobile - material design

Material DesignHow get started?

Jacksonfdamhttp://about.me/jacksonfdam

https://bitbucket.org/jacksonfdam

https://github.com/jacksonfdam

http://linkedin.com/in/jacksonfdam

@jacksonfdam

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

Material Design

A brief history of AndroidFrom a design perspective

Oct. 22, 2008T-Mobile G1 is launched

Sep. 15, 2009Density Independent pixels introduced in Donut

Oct. 26, 2009The Droids arrive

Dec. 6, 2010Google acquires Matias Duarte

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

Oct. 8, 2011#YOLOHOLO

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

Oct. 31, 2013Losing the fat

June 25, 2014Android L Preview

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.

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

Material Theme

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

New WidgetsThe 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.

View ShadowsIn 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.

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

AnimationsThe 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.

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.

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

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.

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

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.

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.

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.

ExamplesVisual 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

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.

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

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.

What were the goals?

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

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

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

Material Design

Material design is a comprehensive guide for visual, motion, and interaction design across

platforms and devices.

Material Design

What if we could design for materials of the future instead of

materials that we use today? - Matias Duarte”

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

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

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

Material Design

What is Android L? Android 5.0 SDK and new Lollipop preview images coming October 17

Material Design

http://www.google.com/nexus/6/

USEFUL Links

Visual language for our users that synthesizes the classic principles of good design with the innovation of technology.

This is material design.

Goals

Material is metaphor

Principles

Graphic Motion provides meaning

Motion animation

Responsive Interaction

USEFUL Links

Meaningful Transitions

USEFUL Links

Delightful Details

USEFUL Links

Style

USEFUL Links

Color Pallete

USEFUL Links

UI Color Application

Typeface Roboto

USEFUL Links

How to use font

Flat design for icons

USEFUL Links

Use more place for image

More real things in material design

Focus on main

No effects for photo

Scale layouts for all devices

USEFUL Links

Metrics

USEFUL Links

Flat and real dynamic design

Material in android

Apply the Material Theme

USEFUL Links

Customize color in theme

• The material theme is only available in the Android L Developer Preview.

Compatibility

• android.support.v7.widget.RecyclerView

• android.support.v7.widget.CardView

USEFUL Links

RecyclerView

• ViewHolder by default

• Layout manager

• ItemAnimator

RecyclerView

RecyclerView example

USEFUL LinksShadows

CardView

Rounded corners

Box for content

USEFUL Links

Pallete

Bitmap

Vibrant color (Normal, Light, Dark)

Muted color (Normal, Light, Dark)

USEFUL Links

Shadows

USEFUL Links

Shadow evaluation

• Touch feedback

Animations

• Reveal effect

• Curved motion• Activity transitions• View state changes

• RippleDrawable class

Touch feedback

• ?android:attr/selectableItemBackground

• android:colorControlHighlight

Touch feedback

Activity transitions

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/

Thank you.@jacksonfdam