Material DesignKonstantin Loginov & NorApps AS

March 22nd, 2017 1

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

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

NorApps AS

4

FotMob is our main product

We are hiring

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

+ 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/

- 25% downloads

Featured app gets up to x100 downloads daily

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

Android-devices are different

Material Design – unification of user-experience across different surfaces

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.

“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

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

Pre-Material Android

FotMob 2010 Gmail 2013Example of featured app 2012

2014 - …20122010

Mobile design evolution

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.

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

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

Shadow cast by ambient light

Combined shadow from key and ambient lights

Shadow cast by key light

Material design core principles

23

Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp)

Material design core principles

24

Material is solid - input events only affect the foreground material

Material design core principles

25

Multiple material elements cannot occupy the same point in space simultaneously.

Material design core principles

26

Material cannot pass through other material.

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):

“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

“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

Material design - Android

30

Applies to all app

Applies to LightActivity

No theme defined – use Application-specified theme

Material design - Android

31

Customizing theme

Applying customized theme

Material design - Android

32

Material design – Material theme

33Light material themeDark material theme

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

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

Material design – New widgets – RecyclerView

36

Material design – New widgets – RecyclerView

37Don’t forget about extra-dependency!

LinearLayoutManager StaggeredGridLayoutManager

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.

Material design – New widgets – CardView

39CardView is part of Cardview Support library

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.

Material design – New widgets – Floating Action Button

42

Material design – New widgets – Floating Action Button

43FloatingActionButton is part of Design Support library

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 layout2. As a container for a specific interaction with one or

more child views

CoordinatorLayout is also part of Design Support library

Material design – New widgets – Coordinator Layout

40

==

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

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"

Elevation & Shadows

Material design – 50 shades of grey

48

Elevation is the relative depth, or distance, between two surfaces along the z-axis.

Material design – 50 shades of grey

49

Material design – 50 shades of grey

50

Material design – 50 shades of grey

51

Material design – 50 shades of grey

52

Before:

Material design – 50 shades of grey

53

After:

It’s easy to add elevation! It works only for API Level 21+

Animations

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.

Material design – Animations – Examples

56

Material design – Animations – Examples

57

– What else in the guidelines?

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

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

Material design - Accessibility

61

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 Access2. Switch Access3. TalkBack

Material design - Accessibility

63

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

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

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!

Material design - Bidirectionality

67

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.) &

controlsNB! ViewPager doesn’t support bidirectionality. Live with that.

Almost ready!

Material design – Best in class

70

Asana: organize team projects

Material design – Best in class

71

Kitchen Stories

Find out more: https://design.google.com/articles/material-design-awards-2016/

Useful links• Video-course:

https://www.udacity.com/course/material-design-for-android-developers--ud862• Guidelines:

https://design.google.comhttps://material.iohttps://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/

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

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

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

Thank you

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