Thank you very, very much for coming, everyone.

My name is Nick Butcher.

I'm an Android designer and developer.

And I'm here today to talk to you about the Material Design

principles, about understanding and building them.

We've got a lot to cover.

I'm going to teach you a lot of stuff today.

So let's get started.

So Material Design.

Who's heard of it?

Hopefully everyone.

So introduced at Google I/O a couple of years ago.

Right?

An amazing design system for helping you

build incredible, consistent, usable apps.

One of the things that I personally really,

really like about Material Design, and that I think

sets it apart from other design systems out there, is this.

It has these principles.

It has these kind of-- it strives

to go beyond what a lot of design systems do out there.

It tries to answer the question, what

is the material that your UI is actually built out of?

It provides these guidelines which describe the world

that your UI lives in.

It's kind of like how we have the laws of physics

in the real world, which, once you understand

the laws of physics, they can be applied to other situations.

It's the same in the UI world.

If you have this level of consistency underneath things,

it means that patterns learned in one place

can be applied elsewhere.

While Material Design is very wide

ranging-- it kind of gives you a lot of patterns and components

to work with to build your UIs with-- no design system

can be comprehensive.

It can't think of every single situation, every use case

that your app is trying to solve for.

But by having some underlying principles,

some kind of consistency underneath,

if you try and stick to these, when

you solve your particular use case

it will feel consistent with the other components and patterns

out there, making for a better experience for everyone.

But the problem with the principles

is that it's somewhat abstract, I feel.

Sometimes it can be hard to understand exactly how they

apply to your application.

So I'd like today to talk to you about this.

This is an application I built called

Plaid, which attempts to embody these principles.

So by discussing some concrete examples

of applying the principles, I hope

to help you to develop a better understanding of what they are,

to understand how they can actually help improve

your application, as well as teach you

how to build them on Android.

So a couple things.

This app is completely open source.

So you can grab the source code on GitHub

or you can join-- it's in beta at the moment

on the Play Store, which you can join at that top link.

This app-- also, I want to call out-- uses a minimum SDK of 21.

It's a Lollipop and beyond app.

I did that mostly to unburden myself

from backwards compatibility, to see what we could build.

But there are efforts going on-- actually, mostly driven

by amazing third party contributions.

So there's a back port branch, which actually brings it

all the way back to API 17.

So yeah.

Let's crack on with the application.

So let's go through the Material principles one at a time,

and let's see how we can actually

make the application better, and how to build those things.

So the first Material principle is the idea

of Material tangible surfaces.

This is the idea that everything in your UI

lives within a surface.

And these surfaces can have different sizes, shapes,

and elevations, and so on.

Now surfaces really, really help you to-- they

tap into a part of your brain which recognizes that one

thing is separate to another.

We call that tangible objects.

That means you can see that a button is going

to be a tap target, or that one surface is

going to move past each other.

It's also really helpful for providing hierarchy

in your application.

We're really good at knowing that things

which are closer to you are larger or more important.

We just know this from the real world.

And you can use that in your UI to direct attention to the most

important information.

Here's an example.

So in the application, I showed some images

from the awesome show and tell site called Dribbble.

And the image is the primary focus of this application--

of this screen.

Sorry.

So it gives this big old prominent area at the top.

But once you've seen the image, you perhaps

might want to take some other action.

So there's comments or descriptions and so on, then.

I kind of want to get it out of the way,

but still have it accessible.

So here's how I do it in Plaid.

Hopefully you can see it collapses with some parallax

to keep it centered.

Then at a certain point, the image

pins-- I like to think of it-- and lifts up to let the content

pass below it.

If we were to take a 3D view of what's going on here,

it's kind of like-- it collapses to a certain point,

and then the surface itself lifts up

into a separate surface.

And there's another surface going on here.

The floating action button.

We're saying that this is the most prominent thing.

I think that liking a shot is one

of the most prominent actions I want to call out.

So having that on its own surface

which moves with certain physics and then snaps

when it reaches the bottom of that lie there,

again, helps to direct attention.

So how would we build this?

Well, I decided to use a stateless animator,

because you could imagine doing this yourself.

Listen to the scroll position of the list,

and when you reach a certain minimum height for the image,

then just elevating it.

But that would put on you the burden

of having to run an animation, work out

if the user has quickly scrolled and quickly scrolled back,

then you have to cancel it and reverse it.

Instead, using a stateless animator helps you to-- it

does it automatically for you.

So all I do is I basically set this state of pinned

to true or false, depending on how far these are scrolled.

And then just run an animation over the translation

z property, and it will produce this

lifting up and pinning effect.

I use surfaces again in the same screen

when looking at comments on a shot.

So for each of the comments in the list below,

there are certain actions you can take, replying,

liking the comment, and so on and so forth.

Rather than an alternative presentation--

it might have been to have these comments visible or overflow

items and so on and so forth.

But that would have led to a more cluttered look and feel.

I wanted this thing a bit cleaner.

So using the idea of surfaces here, I think helped.

Because, as you tap on a surface,

we have this idea that it raises up and gets

an elevation and a little drop shadow underneath.

And the comment actions reveal themselves.

So again, I feel surfaces help to make

it a cleaner presentation.

And building it was pretty easy.

There's three steps to it, which I'll walk you through.

So firstly, it's a comment-- it's an adapter at the base,

so in the list use adapter, we work out

whether we can hold onto the position

of the current expanded item.

And based on if it's the expanded one,

we just set the visibility of those little actions there.

Then in the onClick handler, we store the position

of the one you are trying to expand.

And then we use one of my favorite APIs

in Android, which is TransitionManage

r.beginDelayedTransition.

This is deceptively simple, because it's

doing lots and lots of work for us here.

So by saying beginDelayedTransition

and, crucially, we parse the whole of the list view,

rather than the individual view you clicked on.

That will then watch for any changes

to any views underneath the list view.

So that's going to handle collapsing one item

and expanding another item smoothly for us.

We then call notifyDataSetChanged,

which will then rebind both of the items

and set the right visibilities.

You notice we also set the activated state

based on whether the currently selected item's expanded.

We then just pretty simply is use a stateless drawable

for the background.

And two of my favorite attributes,

which most people don't tend to set,

is you can set this enter and exit fade duration.

So this will automatically handle

the color change for you.

So when you select an item, it fades in

nicely from the background color to a pure white,

to show it in the selected state,

or fade out the one that is getting deselected.

All, again, automatically for you.

And similarly, we use a stateless animator

again to do some translations z to lift up and out.

So hopefully you can see just-- some pretty simple stuff.

There's no major custom work going on here.

It achieves this quite smooth, nice effect,

and makes for a cleaner layout.

So I think surfaces really helped with this here.

Next up is this section of the Material spec, which I

really, really like, which is talking

about navigational transitions.

And it talks specifically about navigating from a parent

to a child screen.

And it shows this video here.

I love this idea that when you click on an item,

it lifts up out of the parent screen

and expands out to fill the screen.

I'll come back to the motion part of doing that a little bit

later on.

But part of the thing I like about this

is the idea-- this permanence idea

that the previous content is still there,

and that the new screen is lifted up

and it's sitting on top of it.

I use this idea in Plaid.

So for example, here is a grid of images we're looking at.

When you tap on one item, it lifts up.

But crucially, what I've done here,

is that when you overscroll down,

I start to translate and scale the content downwards.

But peek, and you can see the screen behind.

Again this is reinforcing this idea

that this new screen of content is sitting on top.

I feel like it gives it more of a sense of place.

You understand where you've come from.

It's hard to get lost, because it's

so continuous an experience.

So to build this-- notice also that when you try and collapse

it, it's a single gesture.

So in the content here, I'm scrolling down,

keep on scrolling from the same gesture,

leads to this backwards behavior.

It's not like you have to scroll and then

scroll again or anything like that.

It's one single experience.

And that's all built on the awesomeness

of nested scrolling.

So if you haven't checked out nested scrolling,

it's really, really cool.