Overview of Material Design presented by Hichem Acher and Ilyas hanagria at Algiers Developer Meetup,

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