Material Design

in practice

Marcin Korniluk

material design promo video

What is Material Design?

• design language

– Metro

– Snow White

• set of rules

• no implementation

Evolution

• skeumorphism

• icons & purposes

– save icon

– widgets

• computing power

• a device & a toy

Why?

● computing power

● ‘new’ Android

● natural interaction

● unification

Natural interaction

User interface

htt

ps://p

l.w

ikip

edia

.org

/

Don’t surprise the user

● physics

● consistency

● cleariness

● feedback

Metrics and keylines

Consistency

● icons

● colors

● navigation ● hero transitions

● animations ● point of origin

● mass, momentum & friction

Consistency 2

Consistency 3

Consistency 4

Views and layouts

Views and layouts 2

Views and layouts 3

Cards

• layouts

• rounded corners

• shadow

Will it blend?

• slow devices

• long animations

• simple apps

• custom apps

• the apps

Material Design

● set of rules for designers

● lacks implementation

● hard to implement

„Physical properties”

AppCompat

● makes things compile

● Theme

● basic views

● Toolbar, SwitchCompat, ...

3rd party libraries

● android arsenal

● awesome android

● android weekly

Mäaterial

htt

p://the

ma

nca

ve

blo

g.c

om

/

Material UI

● floating action button

● elevation & shadows

● ripples

● state animators

● custom drawing order

● hit areas

● vector graphics

● rounded corners

Floating action button

• crircle 56dp

• shadow

• ripple

• icon

• placement

Shadows

● Lollipop only

● elevation

Shadows 2

● simple, flat shapes

● ScriptIntrisincBlur

● getting rid of clipping

Ripples

● touch feedback

● RippleDrawable

● androidxref.com

● onTouchEvent

● rendering thread :(

http://code.google.com/p/androidsvg/

Custom drawing order

● getChildDrawingOrder

● ViewPager

● elevation

if (views == null || views.size() != getChildCount()) { views = new ArrayList(); for (int i = 0; i < getChildCount(); i++) views.add(getChildAt(i)); } Collections.sort(views, new ElevationComparator());

@Override protected int getChildDrawingOrder(int childCount, int child) { return views != null ? indexOfChild(views.get(child)) : child; }

Hit area

● isTransformedTouchPointInView

● getHitRect

Vector graphics

● svg parser & renderer

● render to bitmap

● ImageView

int width = getWidth() - getPaddingLeft() - getPaddingRight(); int height = getHeight() - getPaddingTop() - getPaddingBottom(); if (width

Rounded corners

• clipping

• texturing

• drawing rounded backgrounds

textureCanvas.drawColor(0, PorterDuff.Mode.CLEAR); super.draw(textureCanvas); RectF rect = new RectF(); rect.bottom = getHeight(); rect.right = getWidth(); canvas.drawRoundRect(rect, cornerRadius, cornerRadius, paint);

Other features

● state animators ● drawableStateChanged

● hero transitions

● layout animations

● icon animations

Links

• www.google.com/design/

• androidxref.com

• github.com/ZieIony/Carbon

• code.google.com/p/androidsvg

http://www.google.com/design/http://www.google.com/design/http://androidxref.com/https://github.com/ZieIony/Carbonhttps://github.com/ZieIony/Carbonhttps://github.com/ZieIony/Carbonhttps://github.com/ZieIony/Carbonhttps://github.com/ZieIony/Carbonhttps://github.com/ZieIony/Carbonhttps://github.com/ZieIony/Carbonhttp://code.google.com/p/androidsvg/http://code.google.com/p/androidsvg/http://code.google.com/p/androidsvg/