The document discusses the origin and evolution of Material Design in Android, first introduced at the 2014 Google I/O conference. It outlines its inspiration, style, key components, and coding guidelines, emphasizing the idea of digital material that intelligently reformats and enhances user interaction. Various UI elements and design principles are also presented to illustrate the cohesive design language established by Material Design.

1. Material Design for
Android
By :
ACHER
Hichem
HANAGRIA
Ilyas
November 2015

2. The Origin of Material Design

3. The Origin of Material
Design > 33
First appearance
The 2014 Google I/O conference on June 25, 2014

4. The Origin of Material
Design > 44
Why a new design language
?

5. The Origin of Material
Design > 55
Evolution of Android OS
design
Before and after Material Design

6. The Origin of Material
Design > 66
Evolution Gmail app design
Before and after Material Design

7. The Origin of Material
Design > 77
Inspiration
What is the inspiration behind Material Design ?

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

9. The Style of Material Design

10. The Style of Material
Design >
Animations
1
0
1
0
Focus attention & maintain continuity

11. The Style of Material
Design >
Responsive interaction
1
1
1
1
Ripple effect everywhere

12. The Style of Material
Design >
Colors
1
2
1
2
Color pallette Example

13. The Style of Material
Design >
Metrics
1
3
1
3
Metrics & keylines measured in
DP (Density-independent Pixels)
[ 1 dp = 0.159 mm ]
ldpi : 1 dp = 0.75 px
mdpi : 1 dp = 1 px
hdpi : 1 dp = 1.5 px
xhdpi : 1 dp = 2 px
xxhdpi : 1 dp = 3 px
xxxhdpi : 1 dp = 4 px

14. The Style of Material
Design >
Typographie
1
4
1
4
Font size measured in
SP (Scale-independent
Pixels)

15. The Style of Material
Design >
Icons
1
5
1
5
Flat, bold, symmetrical (when possible) action
icons
App icon

16. The Style of Material
Design >
Lignt, Shadow & Elevation
1
6
1
6

17. The Style of Material
Design >
Lignt, Shadow & Elevation
1
7
1
7

18. The Style of Material
Design >
Writing
1
8
1
8
• 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

19. The UI Components of MD

20. The UI Components
of MD >
Buttons
2
0
2
0

21. The UI Components
of MD >
Dialogs
2
1
2
1

22. The UI Components
of MD >
Tabs
2
2
2
2

23. The UI Components
of MD >
Lists
2
3
2
3

24. The UI Components
of MD >
Cards
2
4
2
4

25. The UI Components
of MD >
Others
2
6
2
6
Menu
Sliders
Checkbox
SnackbarSwitch
Radio button

26. Coding Material Design

27. Code >RecyclerView
2
7
2
7

28. Code >RecyclerView
2
8
2
8

29. Code >Ripple effect
2
9
2
9

30. Code >Backwards
Compatibility 3
0
3
0

31. Code >Dependences
(google.support) 3
1
3
1

32. Code >Third party
libraries 3
2
3
2

33. Code >Best MD apps on Google
Play 3
3
3
3

34. • http://www.google.com/design/spec/material-design/introduction.html
• https://play.google.com/store/apps/details?id=org.telegram.messenger
References
3
5
3
5