[MUSIC PLAYING]



RICHARD FULCHER:
Thanks for joining us.

In the dev keynote,
we just announced

a comprehensive update
to material design.

I feel like I actually
recognize a few people

from the dev keynote.

So hopefully you enjoyed that.

We are going to talk about
material theming, which

is material designs new approach
to customizing apps powered

by open source components, new
tools, and new design guidance.

We've created all of this work
focused around two major goals.

First, we wanted to do more
to improve the designer

to developer workflow.

And it was a big focus
for us in this work.

We want to make it
faster and easier

to build custom and
improved experiences.

And, second, we wanted to make
material much more adaptable

and much more flexible so that
more varieties of products

and different styles of
brand can come to material

and take the benefits of it.

This talk today is
going to be focused

on that aspect of customization,
how you move from customizing

and design to realizing
that customization in code.

So we'll cover both
halves of that.

We launched Material
Design in 2014

as a way of creating a
unified cross-platform set

of experiences.

It was a design system
not just for Google,

not just for Android,
but for everyone.

And we wanted it to be able
to span mobile, desktop,

and other devices along the way.

And since then, we've
seen an incredible amount

of beautiful and usable
products produced

by you, built on the
foundations of Material Design.

As an example, we have these
winners of previous years

Material Design Awards.

So many of these great
experiences from the New York

Times, to Airbnb,
to Blinkist succeed

because they're able to
bring their brand to bear.

They bring the strength
of the identity

they've already established
into the forefront

of the experience.

Without compromising [INAUDIBLE]
sense of predictability,

we're introducing
confusion for the user.

With material theming, you
can create a custom theme

of material which is
personalized for your product,

expressing its brand through
color, type, and shape.

For today's talk,
we're going to walk

through three steps involved
in using material theming.

First, Rachel is going to tell
us about the design system

itself and how it's expanded
to include material theming.

We'll go into a lot
more detail than we

were able to cover
in the keynote there.

Then Rachel I are
going to walk you

through a set of different
examples of how you can create

material themes for
different types of apps

and different types of brands.

And Josh is going to show us how
to realize all of this in code.

So that's the plan for today.



RACHEL BEEN: OK, let's talk
about the design system.

So our updated
material guidelines

help you understand the
foundations of good design

and how to build an
app with material.

So materiality, if
you guys remember,

is still the
fundamental metaphor

driving the design system.

These tactile
surfaces still create

a really predictable usable
environment for the user.

Combined with things like a
clear elevation model, defining

surface relationships,
the user intuitively

understands how to
use your products.

Fundamental guidelines, which
is layout, interaction, motion,

and so much more still
provide the scaffolding

to create these beautiful
and functional products.

And components are still
the building blocks

of great product experiences.

We've expanded componentry
over the years as many of you

might have noticed,
introducing things

like the bottom
nav and this year

the bottom app bar, which
you probably saw on stage

and will see in
our presentation.

We've also strengthened
the usability

of many of our componentry
based on user research

and the material community.

For example, last year, we
released a new text field

component to increase
usability and discoverability

within this component.

Starting today,
component articles

in the material guidelines
will feature a theming section.

These section showcase
how components

can be easily customized from
the baseline material theme.

After understanding the
customization possibilities

within the guidelines, you
can use a very powerful tool,

the Material Theme
Editor to execute.

What this tool does is
it cascades customization

decisions throughout
your design components

creating a branded symbol
library within Sketch.

Let's talk about a few of these
customizations that really

make your product come alive.

In 2014, we launched a beautiful
color palette and a system

to think about how to
apply color to your UI.

But what if your brand color
wasn't in this palette?

How could you use the system?

Today, we're introducing
guidelines and tools

bringing any color into
the Material Design system.

A new tool in the
guidelines creates

beautiful material palettes
generated from any color

and gives you additional
options for harmonious colors

to add to your palettes.

You can also generate pellets
in the Material Theme Editor.

The theme editor, though,
takes this a step further,

applying colors to the
appropriate componentry

across your symbol library.

It also helps check
for accessibility,

using the full palette to
provide alternative colors that

meet accessibility standards.

So let's talk about type.

We introduce the same
customization possibilities

with typography.

In 2014, we released a
comprehensive Roboto type scale

that mapped to componentry.

Today, with the
Material Theme Editor,

we can create beautiful type
scales for any typeface, not

just Roboto.

These scales are optically
corrected to work

in material components, mapping
again across your entire symbol

library.

And for shape, today, with the
launch of the theme editor,

we are introducing the ability
to systematically customize

shape so that rounder corners
or a custom cut detail on some

of your surfaces
immediately apply

across all of the surfaces
within your design.

And, lastly,
iconography-- we've been

building our
comprehensive set of icons

since 2014, resulting in a
collection of over 1,000 icons.

Today, we're announcing four
additional sets of icons,

expanding the visual
range of the original set.

Available on material.io
and in the theme editor,

these sets allow for even
more visual expression

and even the smallest details
of your product experience.

And as you all know
design can only

go so far if you can't
realize it in code.

So, today, we're launching
Gallery, a collaborative tool,

as Rich mentioned
in the talk, that

helps bridge this
designer-developer workflow.

Components exported using
the theme editor can

use the inspect
feature in Gallery,

allowing for this easy
transfer of design decisions

into our open source components
for iOS, Android, web,

and Flutter.

So let's go deeper with theming.

We want to show you how
efficient customization can

actually be.

So just so you know,
we test material design

by creating products studies
that showcase our thinking,

making sure our system works for
a wide variety of experiences

and products and brands.

You'll see these studies
used throughout our updated

guidelines.

Today, we're going to
talk about three of them--

Crane, a travel app, here
shown on desktop, Reply,

an email app, and Shrine, a
retail app, shown on tablet.

This visual shows how
they would originally

appear pre-material theming.

When we pull away
the content, you

can see how similar the
structure and the visual design

of these screens are--

navigation on the top,
relying on color blocks

to really create
a differentiation

from each other.

But these experiences
and brands are different.

And that's not coming out
in the user experience.

Let's use material theming to
better express these brands.

I'm going to start with
an app called Crane.

Crane is a travel app
that helps users book

and find travel, lodging,
restaurant options.

It's both functional, using
components such as text fields,

lists, selection controls
to book a trip, and really

editorial, using beautiful image
lists to showcase and browse

content.

Cranes brand is refined
but not unfriendly.

The brand needs to give
the user confidence

that they can trust crane to
book travel and accept payment,

but also lively
enough for vacation

planning to still feel excited.

A lot of that personality
starts with the color decisions.

Crane's primary color is purple.

It uses variants of this color
to distinguish different UI

elements and create contrast.

And Crane's secondary
color is bright red.

This red is used for important
information and selection

within this experience.

The primary purple is the
main color of the buttons.

And the secondary
color is really used,

as I said before, for
selection controls and really

important typographic
elements and prices.

But if we use red for type
and selection controls,

what about error states?

It's very observant
if you notice that.

Material defines a
default color red,

but you can define your own.

So instead of red, Crane uses
orange as its error color.

So this way the error
color calls attention,

but isn't associated
with the brand identity.

Speaking of text fields,
Crane uses two styles

that you'll see here.

This one is the lighter
weight outline text

field that's used for
longer scrolling forms.

This other text field is used
for inputting search and user

preferences.

You can combine the two styles.

They have a custom shape
with rounded corners

and use the brand colors, the
iconography, and the typography

as defined by Crane.

And, lastly, we mentioned
Crane's emphasis

on editorial content.

Crane uses a masonry style
grid list where photos

maintain their aspect ratio.

So they show as much
content as possible.

The image list has
been customized

to display text
labels with each item.

Custom padding has been added
above and below the item.

OK, Josh, your designer is
given you a beautiful design.

Can you make it?

[LAUGHING]

JOSH ESTELLE: Well,
I'll see what I can do.

So as a developer, I
love a good challenge.

And I love making beautiful
designs come to life

and really putting them
in the hands of our users.

Our engineering team
has been hard at work

creating building
blocks for great design,

complete with the
kind of flexibility

necessary to construct
any app or any style.

We've primarily done this
through material components,

or MDC, or open source
libraries for UI development

available for Android,
iOS, the web, and Flutter.

For this particular
example, I'm going

to walk you through how we
get started building this

with MDC web.

Using material
components, I can quickly

drop in the basic structure of
an app, a top app bar, tabs,

a few text fields,
and an image list.

This is what it
looks like before I

begin customizing anything.

These baseline styles
will give your users

a great user experience
right out of the box.

But, today, we're talking
about customizing materials

for your brand specific needs.

I'm going to show
you how easy that is.

First, color.

Rachel told you about
our new color system

with tools and guidelines to
help create a dynamic color

palette using your brand colors.

From those tools,
you can easily pull

in the colors
necessary into MDC web

by defining these SAS variables.

These variables are used
throughout the MDC components

and can be used
anywhere within your app

to make it easy to
have a semantic meaning

and understanding to
how color is applied.

While all MDC components
will automatically

pick up and adapt those
colors we just defined,

you can also customize
things whenever necessary.

Tabs default to colors
that expect they're

on your default
background color.

However, in this
app, the tabs are

part of that top app bar,
which uses the primary color

as your background.

The default black the
tabs use is too dark

to put on top of
that primary color.

So here we show how we
override the ink color on tabs

with our on primary color.

That's a color chosen
to specifically

be high enough contrast
to put directly

on top of a primary color.



And this is what
that looks like.

So our colors are clearly
applied across the top app bar,

the tabs, and the text fields.

Now let's look at
the image list.

MDC gives us a simple
standard grid very easily.

But for this product, we wanted
that less regular masonry grid.

This is how the standard
grid was defined--

very easy, very simple.

And here's the only changes
necessary to turn it

into a masonry column layout.

So just a little bit, and you
get that different layout looks

like this.

And that's it.

That's about 10 to
15 lines of code

that went from our
baseline look to this.

And then a few more tweaks, and
we'll have the final design.

All right, what
else can we build?

RICHARD FULCHER: Thank you Josh.

All right, let's do another.

Let's go forward to
our email app, Reply.

Reply's promise to users
isn't especially complex.

It's an email app.

It wants to be
clearly organized.

It wants to have
legible typography.

It wants to have
straightforward navigation.

But we still have customization
opportunities within that.

Reply's brand is focused on
friendliness, its competence,

and maybe even a
hint of quirkiness.

On mobile, Reply uses
the bottom app bar.

The most obvious feature
that you see here

is that floating action button,
that golden FAB in the center.

It's even been kind of nested
into the app bar itself

with that nice little cut.

Doing that increases
its prominence,

is the key action as
our FABs often are.

And this makes it a
very obvious target.

Navigation is also
supported in the app bar.

But it's a little less
obvious, less prominent.

It uses the Reply logo to access
a traditional navigation panel.

You might also have noticed
something interesting going on

with the icons themselves.

They're using one
of those new sets

that Rachel described
earlier, in this case,

the two-tone version.

Now these icons are still
immediately recognizable.

We haven't changed kind of the
way that we draw the symbol.

The user will still recognize
it from other experiences

across the system.

But we have stylised it.

The entry chips for the
addressees in the middle

of the screen here.

Those also use custom
color and typography.

And we've also adjusted
some of the layout elements.

So instead of the avatar
being inset within the chip

as it would be for the
baseline presentation,

we've customized it to be a bit
larger, completing the rounded

shape and giving you a slightly
better chance of actually

being able to tell who that is.



A key component of
Reply's style is the way

it employs typographic scale.

It needs to cover a lot
of different use cases

or tasks related to this
very text heavy application.

So we've done
customization here as well.

We've taken the default Roboto
and replaced it with Work Sans.

We've updated the weights, using
the guidance that comes out

of the Material Theme Editor
to optimize how we want to size

them as well.

With the bold headlines and less
emphasized captions and body

text, we increase the
scanability of the content.

And you can see
that really clearly

in a view like the
messaging list here.

There's a clean
visual hierarchy.

The user's eye knows how to
jump kind of very rhythmically

down the page to catch
the different titles that

are there.

On the cards themselves,
we've customized

them to use sharp corners.

And we've decreased the
padding between the cards

so that there's just more
space to get content in.

Now even though there's
no indication of elevation

on the cards, you can still
see a clear separation

between them.

You're getting a little bit of
that background color peeking

through between the
cards, cuing that these

are different surfaces and
that the user can reasonably

expect they could perform swipe
gestures on it, in this case,

to either star or delete
one of those messages.

OK, that's a lot
of customization.

Can Josh build it?

[LAUGHING]

JOSH ESTELLE: All right, so
I already showed you MDC web.

So for reply, I'm going to
bring you through MDC Android.

One of the beauties
of material components

is that no matter what platform
you're building for, you have

a consistent set of
components available,

the same patterns, features,
theme ability, but still

very much in line with
the platform specific

paradigms that your users
are going to expect.

So here on Android,
we have the same kind

of material theming for color.

We define our theme, inheriting
from the material components

them, and define
our brand colors.

This defines all
the colors that'll

flow through the app,
styling both the MDC Android

components, but also lower
level UI elements provided

by the Android framework.

Now for Reply, we really
need to exercise our ability

to customize typography and
use the material type scales.

To do that on Android,
I want to tell you

about Android downloadable
fonts and how with Google Fonts

you have a great set of fonts
readily available to use.

Work Sans is the
typeface for Reply.

And this is all you need to
have that font downloaded

on the fly whenever
necessary for your app.



Once we have the font, we have
to apply our material type

scales that our tooling
will help you determine.

Here we redefine the
headline one text appearance

to use Work Sans with
a light text style.



We can redefine the
entire type scale

and link it up
through our theme so

that all of the text appearances
update across your app.



So with those
changes to our theme,

we see Reply's colors
and typography permeate

through the components and
the various views of the app.

But now let's look at a
couple of specific components.

First, chips.

Chips can be tremendously
versatile and useful,

but also quite
complicated to implement

well and in a consistent way.

So we've done that for you.

Pull in the MDC Android
chips like this--

very simple.

Drop it in your layout,
getting all the nuance behavior

of a chip just right,
and completely pulling

in your theme colors and type
definitions, and, of course,

the new bottom app bar with
that special little place

for the floating action button.

This is one of the
really nice patterns

that might seem like
it'd take forever

to figure out how to build.

It did take a while.

But we got that for you too.

Here's the bottom app bar
and floating action button,

where they would go in
a coordinator layout,

automatically pulling in
your theme colors and type.

It's also worth
pointing out here

we're using our new
material two-tone icons.

These icons are
available on material.io

and are ready to drop
into any Android project.

So that's Reply.

What else?



RICHARD FULCHER: OK,
we'll do just one more.

You're getting the
hang of it by now.

But I want to show off a couple
of other aspects of the system.

The final app that we're going
to look at is called Shrine.

So Shrine-- it's a retail app.

It's an online marketplace
that doesn't just

sell goods from one label.

It shows them from a
variety of fashion providers

and promoted labels.

So because of this, a lot of
the emphasis in the design

of Shrine is on imagery.

The tonal color
palette that we use

has fairly minimal
contrast in this case.

OK, those are really key
choices because think

about what a user coming to
this experience was looking for.

They want to engage
with the content.

They want to be excited
by the different wares

that you have up
for sale and keep

their attention focused there.

But you also need to be
able to convert them.

They need to be able to
find that add to cart button

and hit it when it's time for
them to make the purchase.

So you're balancing content
browsing and also this more

specific task execution.

So with that in
mind, Shrine's brand

actually recedes a little bit.

Content and key
actions go forward.

Where shrine does assert its
brand identity very strongly

is in the way that
it uses shape.

We use sharp cuts on
surfaces like the buttons

and on larger
sheets of material.

And those are all tied back to
that diamond logo, the product

logo of Shrine itself.

Those aren't just
aesthetic choices.

When we do those surface
cuts on the corner,

we're also communicating how the
different material surfaces are

arranged in the space
and how the user might

be able to interact with
them in different ways.

So from front to back, you
have the backdrop back layer,

which is where we have a custom
navigation menu for Shrine.

In the middle, we have
the backdrop front layer,

which is where the bulk of the
content the user is actually

going to engage with
is going to reside.

And then the
shopping cart sheet,

which is actually tucked
almost entirely off screen,

is foremost.

And it just gets out of the
view when it's not needed.

On tablet and desktop,
Shrine's primary navigation

is through tabs.

And in keeping with the emphasis
on storytelling through shape,

we're using a
highlight indicator

that takes a custom
shape and draws it

behind the active label.

OK, last time, Josh, once more.

JOSH ESTELLE: OK, so this
time let's talk about iOS.

Again, I'm going to show you how
colors are defined very simply

and easily get
applied throughout all

of our components.

For each platform, you
define these colors

and then trust that
we've applied them

in the appropriate places
across all the UI elements.

But for Shrine, I
really want to focus

on the shape customizations.

That's one of the areas
I'm really excited about.

It's pretty tricky to
implement these things.

But we aim at making
adjusting shape

and applying it to
your components as

simple as theming any other
aspect of your design.

Here for Shrine we use this cut
on the corners of the buttons

and on the top left corner
of that larger surface.

On iOS, you can use our shape
generators and corner APIs

to style the buttons.

Here you see an
8-pixel cut applied

to every corner of the button.

And here you see a
bigger 32-pixel cut

but only applied to that
top left corner of the card.

This takes care of
a ton of complexity

and making touch targets
behave correctly,

ripples and shadows
appear in the right place.

And with all of this, you get
a very easy interesting way

to apply custom shapes
across everything you do.

Now shape is still
a work in progress.

I showed it to you here
applied to buttons and cards.

But it'll be coming to many
more of our components soon.

With that, hopefully
I've gotten you

excited about material
components, the benefits they

provide, and the ease in
which they enable these very

sophisticated customizations.



RICHARD FULCHER: OK, so if we
revisit these three apps again

with all the customizations
we just employed,

they feel much more distinct.

They feel much more like
themselves, which is the goal.

We haven't changed any of
the essential structuring

of the information.

It's all the same content,
all the same navigation.

But we've added a lot more
of the brand's character

in through this work.

And everything that
you see is still

entirely consistent with
the fundamental principles

of material design.

We're not introducing
anything that's

going to be unfamiliar
to the user.

There's still going to be able
to work through these systems.

Crane is still making
use of bold color.

But it's flexible enough to be
able to tell a selection state

from an error state as we saw.

Reply is using a
different style of icons,

but they're still recognizable
and familiar to the user.

And Shrine is still giving the
user cleanly separated surfaces

so they know where
they can touch

and how the surfaces
might respond.

That's the power of
material theming.

That's the goal we've been
chasing over these last couple

of years.

And starting from the
foundation of material itself,

that solid material
foundation of good design

and customizing the experience
through key attributes, which

have a wide ranging impact
throughout the experience--

today, we've just
kind of concentrated

on three of our example apps.

There are actually four
more at material.io

so you can see another
range of different product

styles and different
customization options

to get the sense of the full
capabilities of material

theming.

And while you're
there, you can also

see how other real brands
are using material theming.

So you can read about how
we've applied the material

theme, the Google material
theme specifically,

to products like Gmail,
News, Pay, and Home.

And over the last
year, we've partnered

with the stellar design
teams from Genius, Lyft, NPR,

Pocket Casts, and Zappos to
help them bring material design

into their products.

You can see the studies
of how these partners are

thinking about material
on material.io as well.

This is just the start.

We will be adding more new
components and new material

theming options, new
guidance, and new examples

on a regular basis.

We're very excited to see what
you do with Material Design.

Thank you for joining us today.

[APPLAUSE]



And if you'd like to
learn a little bit more,

we have sessions coming
up, about four or five

different sessions, that cover
different aspects of material

throughout the
remaining couple of days

of I/O. There is a session
later today on stage 4 that

goes deep on how you use
material to design and build

across platforms.

I've seen that session.

It's a very good session.

You will probably
enjoy it as well.

And we also have just
outside this stage

is the Design and
Accessibility Dome.

And we will be there
throughout all of I/O. Come.

I'm sure you will
have questions.

We are happy to answer
them there at the Dome.

Meet designers from
the materials team.

You can see demos of Material
Gallery, Materials Theme

Editor.

You can also get a designer
review for your app.

So you can get a 15 minute slot
to talk through what questions

you might have about material
or design in general.

And we also are
going to be doing

a series of short 10-ish minute
talks, kind of small form,

on different topics throughout
the next couple of days

of I/O. So once
again, thank you.

And have a good rest of I/O.

[MUSIC PLAYING]