Material Design for Android

By : ACHER HichemHANAGRIA Ilyas

November 2015

The Origin of Material Design

The Origin of Material Design > 33

First appearance

The 2014 Google I/O conference on June 25, 2014

The Origin of Material Design > 44

Why a new design language ?

The Origin of Material Design > 55

Evolution of Android OS design

Before and after Material Design

The Origin of Material Design > 66

Evolution Gmail app design

Before and after Material Design

The Origin of Material Design > 77

Inspiration

What is the inspiration behind Material Design ?

The Origin of Material Design > 88

Idea

« Unlike real paper, our digital material can expand and reform intelligently. Material has

physical surfaces and edges. Seams and shadows provide meaning about what you can

touch. »

[Matias Durate, Google's director of Android user experience]

The material is a smart paper that can split,

combine and reshape. It also casts shadows

Answer : Material Design was

inspired by Paper and Ink but

with additional rules

The Style of Material Design

The Style of Material Design >

Animations 1010

Focus attention & maintain continuity

The Style of Material Design >

Responsive interaction1111

Ripple effect everywhere

The Style of Material Design >

Colors1212

Color pallette Example

The Style of Material Design >

Metrics1313

Metrics & keylines measured in DP (Density-independent Pixels)

[ 1 dp = 0.159 mm ]

ldpi : 1 dp = 0.75 pxmdpi : 1 dp = 1 px hdpi : 1 dp = 1.5 pxxhdpi : 1 dp = 2 pxxxhdpi : 1 dp = 3 px

xxxhdpi : 1 dp = 4 px

The Style of Material Design >

Typographie1414

Font size measured in SP (Scale-independent

Pixels) [ 1 dp = 0.159 mm ]

The Style of Material Design >

Icons1515

Flat, bold, symmetrical (when possible) action icons

App icon

The Style of Material Design >

Lignt, Shadow & Elevation1616

The Style of Material Design >

Lignt, Shadow & Elevation1717

The Style of Material Design >

Writing1818

• Be concise• Use simple word forms• Try to write in the present• Write simply and directly• Omit unnecessary phrases : [Are you sure you want to] delete this photo?• Use consistent verbs across the arc of an action : remove / delete

The UI Components of MD

The UI Components of MD >

Buttons2020

The UI Components of MD >

Dialogs2121

The UI Components of MD >

Tabs2222

The UI Components of MD >

Lists2323

The UI Components of MD >

Cards2424

The UI Components of MD >

Others2626

Menu

SlidersCheckbox

SnackbarSwitch

Radio button

Coding Material Design

Code > RecyclerView2727

Code > RecyclerView2828

Code > Ripple effect2929

Code > Backwards Compatibility 3

030

Code > Dependences (google.support) 3

131

Code > Third party libraries 3

232

Code > Best MD apps on Google Play 3

333

• http://www.google.com/design/spec/material-design/introduction.html

• https://play.google.com/store/apps/details?id=org.telegram.messenger

References3535