1.
Material Design
Konstantin Loginov & NorApps AS
March 22nd, 2017 1

2.
INTRODUCTION
2
Konstantin Loginov
9 years in mobile development
• Windows Mobile
• webOS
• Windows Phone
• iOS
• Android
loginov.k@gmail.com | NorApps AS
Board-member of Mobile Era Conference

3.
NorApps AS
3
Small team of 7 (soon 8!) people from
Bergen, Oslo and Guadalajara
FotMob is our main product
We love football (yes, it’s a job pre-
requirement)
Featured by Google & Apple

4.
NorApps AS
4
FotMob is our main product
We are hiring

5.
– Why should I care about UI / UX?
I’m a developer!

6.
+ 280 %
conversions rate
+ 540 %
conversions rate
* Adweek: How App Store Ratings Impact Downloads: http://www.adweek.com/digital/how-app-store-ratings-impact-downloads-infographic/

7.
- 25% downloads

8.
Featured app gets up to x100 downloads daily

9.
– But Craigslist and Reddit are on
fire despite having design from 90s?

10.
Android-devices are different
Material Design – unification of user-
experience across different surfaces

11.
What is Material design?
14
• Design language developed in 2014 by Google driven by
typography, color, scale and position
• based on paper and ink
Material design is a comprehensive guide for visual, motion, and
interaction design across platforms and devices.

12.
“
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.
15
Matías Duarte

13.
Pre-Material Android
Devices & manufactures fragmentation:
• 12000 different devices by 2013 (24000 by 2015)
• OEMs customize UI in all possible ways

14.
Pre-Material Android
FotMob 2010 Gmail 2013Example of featured app 2012

15.
2014 - …20122010
Mobile design evolution

16.
Material design core principles
19
• All material objects have x, y, and z dimensions.
• All material objects have a single z-axis position.
• Key lights create directional shadows, and ambient light
creates soft shadows.

17.
Material design core principles
20
The material environment is a 3D space,
which means all objects have x, y, and z
dimensions. The z-axis is
perpendicularly aligned to the plane of
the display, with the positive z-axis
extending towards the viewer. Every
sheet of material occupies a single
position along the z-axis

18.
Material design core principles
21
Within the material environment, virtual lights illuminate the scene. Key
lights create directional shadows, while ambient light creates soft shadows
from all angles.
Shadows in the material environment are cast by these two light sources.
Shadows occur when light sources are blocked by sheets of material at
various positions along the z-axis

19.
Shadow cast by ambient
light
Combined shadow from
key and ambient lights
Shadow cast by key light

20.
Material design core principles
23
Material has varying x & y dimensions (measured in dp) and a uniform
thickness (1dp)

21.
Material design core principles
24
Material is solid - input events only affect the foreground material

22.
Material design core principles
25
Multiple material elements cannot occupy the same point in space
simultaneously.

23.
Material design core principles
26
Material cannot pass through other material.

24.
Material design - Android
27
Introduced in Android 5.0 (API level 21)
• A new theme
• New widgets for complex views
• New APIs for custom shadows and animations
The Design Support library is compatible with Android 2.3 (API level 9):

25.
“A style is a collection of attributes that specify the
look and format for a View or window. A style can
specify attributes such as height, padding, font
color, font size, background color, and much more.
A style is defined in an XML resource that is
separate from the XML that specifies the layout.
28
https://developer.android.com/guide/topics/ui/themes.html

26.
“
A theme is a style applied to an entire Activity or
app, rather than an individual View. When a style is
applied as a theme, every view in the activity or
app applies each style attribute that it supports.
29
https://developer.android.com/guide/topics/ui/themes.html

27.
Material design - Android
30
 Applies to all app
 Applies to LightActivity
 No theme defined – use Application-
specified theme

28.
Material design - Android
31
Customizing theme
Applying customized theme

29.
Material design - Android
32

30.
Material design – Material theme
33Light material themeDark material theme

31.
Material design – Material theme
34Read more about Styles and Themes: https://developer.android.com/guide/topics/ui/themes.html
NB! You will use appcompat-v7 library all around. AppCompatActivity brings material support to older devices.
This support-lib has it’s own Theme-naming:
• @style/Theme.AppCompat
• @style/Theme.AppCompat.Light
• @ style/Theme.AppCompat.Light.DarkActionBar
The material theme is defined as:
• @android:style/Theme.Material (dark version)
• @android:style/Theme.Material.Light (light version)
• @android:style/Theme.Material.Light.DarkActionBar

32.
Material design – New widgets – RecyclerView
35
The RecyclerView widget is a more advanced and flexible version of ListView. This
widget is a container for displaying large data sets that can be scrolled very
efficiently by maintaining a limited number of views.
Simplifies the display and handling of large data sets by providing:
• Layout managers for positioning items
• Default animations for common item operations, such as removal or addition of items

33.
Material design – New widgets – RecyclerView
36

34.
Material design – New widgets – RecyclerView
37
Don’t forget about extra-dependency!
 LinearLayoutManager  StaggeredGridLayoutManager

35.
Material design – New widgets – CardView
38
CardView extends the FrameLayout class and lets you show information inside
cards that have a consistent look across the platform. CardView widgets can have
shadows and rounded corners.

36.
Material design – New widgets – CardView
39CardView is part of Cardview Support library

37.
Material design – New widgets – Floating Action Button
41
A floating action button represents the primary action in an application.
Shaped like a circled icon floating above the UI, it
changes color upon focus and lifts upon selection.
When pressed, it may contain more related actions.

38.
Material design – New widgets – Floating Action Button
42

39.
Material design – New widgets – Floating Action Button
43FloatingActionButton is part of Design Support library

40.
Material design – New widgets – Coordinator Layout
44
CoordinatorLayout is a -powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
1. As a top-level application decor or chrome layout
2. As a container for a specific interaction with one or
more child views
CoordinatorLayout is also part of Design Support library

41.
Material design – New widgets – Coordinator Layout
40
==

42.
Material design – New widgets – Coordinator Layout – Header
45
• AppBarLayout is a vertical LinearLayout under the hood
• Requires all children to provide their desired scrolling behavior
• Doesn’t work outside of CoordinatorLayout
• In most cases, works in conjunction with CollapsingToolbarLayout

43.
Material design – New widgets – Coordinator Layout – Content
46
… or any other scrollable content *
* Content-widget has to define layout behavior:
app:layout_behavior="@string/appbar_scrolling_view_behavior"

44.
Elevation & Shadows

45.
Material design – 50 shades of grey
48
Elevation is the relative depth, or
distance, between two surfaces
along the z-axis.

46.
Material design – 50 shades of grey
49

47.
Material design – 50 shades of grey
50

48.
Material design – 50 shades of grey
51

49.
Material design – 50 shades of grey
52
Before:

50.
Material design – 50 shades of grey
53
After:
It’s easy to add elevation! It works only for API Level 21+

51.
Animations

52.
Material design – Animations
55
The new animation APIs let you create custom animations for touch feedback in UI controls,
changes in view state, and activity transitions.
These APIs let you:
• Respond to touch events in your views with touch feedback animations.
• Hide and show views with circular reveal animations.
• Switch between activities with custom activity transition animations.
• Create more natural animations with curved motion.
• Animate changes in one or more view properties with view state change animations.
• Show animations in state list drawables between view state changes.
NB! Touch feedback animations are built into several standard views, such as buttons. The new APIs
let you customize these animations and add them to your custom views.

53.
Material design – Animations – Examples
56

54.
Material design – Animations – Examples
57

55.
– What else in the guidelines?

56.
Material design - Usability
59
• Accessibility guide – set of rules & practices to allows users of
all abilities to navigate, understand, and use your UI
successfully
• Bidirectionality guide – practices of displaying content for
right-to-left (RTL) languages (Arabic, etc.)

57.
Material design - Accessibility
60
https://www.google.com/accessibility/ - Google’s overview of Accessibility features
1. Clear layout
• Clearly visible elements
• Sufficient contrast and size
• A clear hierarchy of importance
• Key information discernable at a glance

58.
Material design - Accessibility
61

59.
Material design - Accessibility
62
2. Robust
• Give users confidence in knowing where they are in your app and what is important
• Reinforce important information through multiple visual and textual cues
• Make sure app works via
1. Voice Access
2. Switch Access
3. TalkBack

60.
Material design - Accessibility
63

61.
Material design - Accessibility
64
When you create a new app – by default it’s accessible. Don’t ruin it!
• Do not use small text sizes
• Do not use “dp” as a textSize, only “sp”
• Use contrast colors for text and background
NB! System themes are taking care of it

62.
Material design - Accessibility
65Read more about Android accessibility: http://developer.android.com/guide/topics/ui/accessibility/index.html
• Carefully use third-party libraries for UI work
• Give a meaningful contentDescriptions for ImageViews,
Buttons, CheckBox, etc.
• Don’t forget “state_focused” in selector

63.
Material design - Bidirectionality
66
• LTR languages display content from left to right
• RTL languages display content from right to left You need to support both!

64.
Material design - Bidirectionality
67

65.
Material design - Bidirectionality
68
When you create a new app – by default it’s bidirectional. Don’t ruin it!
• Read all warning in Layout editor
• Never use marginLeft without marginRight, paddingLeft without
paddingRight
• Use standard control-containers (LinearLayout, RelativeLayout, etc.) &
controls
NB! ViewPager doesn’t support bidirectionality. Live with that.

66.
Almost ready!

67.
Material design – Best in class
70
Asana: organize team projects

68.
Material design – Best in class
71
Kitchen Stories
Find out more: https://design.google.com/articles/material-design-awards-2016/

69.
Useful links
• Video-course:
https://www.udacity.com/course/material-design-for-android-developers--ud862
• Guidelines:
https://design.google.com
https://material.io
https://material.io/guidelines/
https://developer.android.com/design/material/index.html
• Material icons (free to use!):
https://material.io/icons/
https://github.com/google/material-design-icons
• Fonts:
https://fonts.google.com
• Accessibility:
https://www.google.com/accessibility/

70.
Some advice - General
73
Contribute to StackOverflow
• Challenge yourself
• Great exercise in practical problem-solving
• Looks nice on your CV
• Arguably, the best way of learning is to get a question and find an answer for it
Take part in OpenSource projects on GitHub (and/or your own projects)
• Read others code, do code reviews – try to notice good and bad practices from others
• Gives a great practical experience with team work, code source control, problem solving

71.
Some advice - Android
74
Read twitter, blogs, listen to podcasts:
• http://fragmentedpodcast.com
• @chethaase, @JakeWharton, @Piwai, @ianhlake, @AndroidDev, @dontmesswithjo
• https://android-developers.googleblog.com
Udacity - free video-courses about Android & all other cool technologies
• https://www.udacity.com
Most code you need is already written - use Open Source Libraries

72.
Some advice - Android
75
Square, Inc & Jake Wharton are main contributors into Android community.
Check out their GitHub-repository: http://square.github.io
If you want to be a professional, these 5 libraries are mandatory:
• Dagger 2
• Picasso
• Okhttp
• Retrofit
• RxJava

73.
Thank you
@klogi_norgehttps://no.linkedin.com/in/klogiloginov.k@gmail.com