[MUSIC PLAYING] CAMERON KETCHAM: Hey. My name is Cameron Ketchum. I work on the Material
Design Components Team, or MDC Android for short. And I work out of the
New York City office. GAUTHAM SAJITH: And my
name is Gautham Sajith. I also work on MDC Android. And I'm based in San Francisco. CAMERON KETCHAM: And we're
going to talk a little bit about Material Design Components
and how you can theme your app. So quickly, what we're
going to discuss. A brief history of Material
Design, what Material Theming is, using Material Design
Components, the Color, Type, and Shape subsystems, how to
apply these subsystems, as well as our release process, and a
little bit about contributing. So quickly, just a brief history
of Material Design Library. Material Design was
first announced in 2014. And there wasn't
a Design Library. Then at I/O in 2015, a
year later, Google finally announced the Design
Support Library, which helped bring a
lot of code for Material Design for certain
components, including Navigation Drawer,
Floating Action Button, Snack Bar, et cetera. But there still
wasn't that much. And at I/O this year, we
announced Material Theming, with the explicit goal to
have a larger engineering team behind it. So we're working on implementing
a lot of the components, based on the
Material Design spec. So Material Theming. What was the original
problem with Material Design? Well, it was a great initial
version of a design system. It worked well in
a lot of cases. But it fell short with
the expression of brand. So here's an example
of an email app. And it looks kind of
like every other app that use Material Design. And it's kind of hard to tell
that it's even an email app, in my opinion. Here's an example of
the kinds of things that you can do with
Material Theming to make your app stand out. And we're going to get into
those details in a bit. So quickly, how
does theming work? Basically, Material
Theming is a system that we've designed
to help you create you unique design for your app. You just need to decide on a few
things, such as fonts, colors, shapes, et cetera. And this is a Material Design
sketch plugin that can be used, which should help you
create design ideas that you can use to build your app. Take a look at material.io
for more info about that tool. Here's a few Material
studies that we've done, which just show examples
of Material Theming. And you can see that they
all look quite different. And there's also a lot more
of these on material.io. GAUTHAM SAJITH: Cool. So now let's get
talking about how to actually get started
using the Material Components Library. So imagine this
scenario, that we'll come back to a couple of
times throughout this talk. You've got this fairly
plain app that you built from just straight AppCompat. And your teammate asks
you to redesign this using the Material Design spec. So how do you go
about doing this? So you may be familiar with
the Support Library Design package, this v28 version, that
you can use to get our library. And you can use this. However, this is no
longer being updated. So you should try and use the
conductgoogle.android Material Library, as well as Android X. One thing to note. You can't use the Conduct
Android Support and Conduct Google Android
packages together. So if you want to switch
over to Android X, there's a nice refactor tool
on the developer.android site that'll help you
refactor your app. And then, the next
thing you'll need to do is use our Material Themes. So we provide the themes that
correspond to the existing AppCompat themes. And these themes provide you
with a range of attributes, to help you do some of the
Shape, Color, Type theming that we're going to
be talking about, as well as the default
styles that you can use across all of our components. So for example, if your theme
extends from AppCompat Light, all you need to
do is switch over to
theme.materialcomponents.light. And you should have
all of our attributes, as well as all of
our component styles. So as I mentioned, there's
a lot of new attributes that we're going
to be introducing. And if you try to
use our components without these
attributes defined, you're going to get a Theme
Enforcement Error at runtime. Pretty much the styles look for
these attributes in your theme. And if they don't exist, it's
going to crash at runtime. So the solution to this is,
of course, use our theme. It'll give you all
the attributes. If you're not quite ready to
switch over to our full theme quite yet-- you just want to
get the attributes and none of the styles-- you can use what are
called the Bridge themes. And what these Bridge themes
do is they provide you all the attributes you
need to do styling. But they don't give you
any of the default styles. So you can opt into using our
component styles one by one, as you're ready to switch over. So for example, if you're
extending from a Bridge theme, and you want to opt in to
use our BottomAppBar style, you would define the
default BottomAppBar style in your theme. And then all of
your BottomAppBars would get the Material
Component style. CAMERON KETCHAM:
So now, we're just going to talk a little bit
about some new components. With Material Theming, we
introduced a few new things, such as the BottomAppBar. BottomAppBar displays
navigation and key actions at the bottom of mobile screens. Which is great for people
who are just one-handed, using their thumb to
interact with the device. It's pretty simple. It uses a Coordinator
Layout, to coordinate the motion between
a BottomAppBar and a Floating Action Button. So here, we just have simple
XML for the BottomAppBar. A few of the things
that you can do is set the vertical
offset of the FAB. You can also set the
FAB Cradle Margin, which is the distance between
the FAB and the BottomAppBar. As well as the
Rounded Corner Radius, which is the corner where the
BottomAppBar meets the FAB. You can have the
BottomAppBar hide on scroll. And you can also set
this Alignment Mode. It will automatically
animate the FAB for you. And it's useful if
you're navigating between different
fragments or views and want to give a
visual distinction between different screens. If you're already
using a toolbar, it's super easy to start
using the BottomAppBar. If you're setting the Support
Action Bar for the toolbar, just set it for the
BottomAppBar instead. And everything else
works the same way. But you can also use an On Menu
Item Click Listener directly on the BottomAppBar. GAUTHAM SAJITH: We
also have what's a revamped version of
the Button that we're calling Material Button. It's been revamped to
make styling much simpler. So if you just put this Material
Button component in your XML, you'll get a styled Button. However, if you're
using our full theme, you can actually just use
a Button tag in your XML. And we do what's called
Custom View Inflation, where this tag will automatically
inflate into a Material Button tag. And then of course, you
can set the disabled state on this Button. And all the states
will transfer over. Colors will transfer over. You can set an icon
on this Button, just by setting the icon
attribute, as well as this icon style. And this style's optional. But what it'll do is it'll
adjust the padding slightly, to achieve a more even
visual balance on the Button when the icon is present. You can change the icon size,
just using the attribute. You can set the Outline
Button style, which is one of the default
styles that we provide for this Button, to get
this hairline outline Button. You can set the background
tint of the Button, by setting the Background
Tint attribute. And you can provide a
color state list here. So in this case, it's purple
when the Button is enabled, and gray when it's disabled. You can set some
other attributes, such as Stroke
Width, Stroke Color, Corner Radius on this
button, to get some styling. You can also create just
an icon-only Button. In this case, we're
setting the icon, as well as setting the
icon padding to zero, so that the icon is
centered in the Button. And we're also setting in
the content description on this Button. So since there's no text,
for accessibility reasons, you should set a
content description, so that people will know
what the Button's about. You can also set the
Ripple color on the Button. So for example, if you just
set purple Ripple on here, it'll be applied to the Button. You can set either a color state
list or just a hex value here. And as you can see, it's like
a purple Ripple on the button. But that's because there's
some alpha already inherent in the Ripple. So it's a purple Ripple
on top of a green Button. And these are some
of the examples of the other components that
we provide in this library. We have several different
styles of Chips. We have text fields with
the filled and outline styles, password show and hide
functionality and a character counter. And then we have some highly
customizable tab layouts as well. CAMERON KETCHAM: OK. Now a little bit about theming. MDC relies heavily on the
built-in theming of Android. So here's just a quick refresher
of how themes and styles work. Anything applied directly to
a view in XML is used first. So changing an
attribute here will only change the single view. You can also update the style. So if you set an attribute
in a style, changing this here will affect any views
that are using this style. If it's not defined in the
style, or there's no style set, it'll go back to
the default style. So here, if you want
to change the way a whole group of
components look, you can set the default style. And finally, if the attribute
isn't defined anywhere else, it'll look in the theme. And the way Material
Theming works normally is there's a set of
top-level attributes that you should override in your
theme for typography, colors, shapes, et cetera. And also the default styles
for all of the components. But if you need more
fine-grained control, you can hook in in
any of these layers and change just the
color of a single view, or just the color of all
of a certain component. So here's an example from our
library of the Chip style. It defines a few values which
reference theme attributes. And the power of this
design comes from the fact that other styles in our
library can reference these same attributes. So here's an
example of a Button. And both of these have
the same shape appearance, which is the Small
Component Shape Appearance. That means that if we
want to update the look and feel of our app
for these shape-- for these small components,
all we have to do is update this attribute
in one place in our theme. And we'll show you an example of
how to do that in a little bit. What are the effects of each
of these theme attributes? Unfortunately, it's not
totally straightforward. We try to apply theme attributes
in a way that will make sense. But it's definitely
possible for you to pick values for
different colors that may not look great together. You should probably check out
material.io for each component to see how it'll all react. But another simple possible-- another simple solution
that you could do, potentially, is to make
a debug theme, which just sets wacky values
to different attributes. And then see how things look. But for instance, here's
the BottomAppBar page on the material.io site. And you can see there that the
container itself is a surface. And the icons are
the On Surface. And we'll talk about
what attributes you can modify, as well
as things to look out for in the next section. So theming subsystems. We currently have three theming
subsystems, Type, Color, and Shape. And these are the knobs
that you, as a developer, should tweak in order
to theme your app. Hopefully, most of you are
familiar with text appearances. But we've incorporated
Material Theming, which uses theme attributes,
to reference these text appearances. So here's an
example of a toolbar which uses the Headline Six
attribute, rather than style directly. And here is some copy that
uses the Body One attribute. These are the type attributes
that we've defined. So if you override any
of these in your theme, you can set the style
and look of your app. Color's another one. And you're probably familiar
with the AppCompat Color Primary and Color Accent. For Material Theming, we
have a wider range of colors, so that you have more
control over the color of different parts of your app. These are the semantic names of
the expanded palette of colors that work with Color Theming. On the top here, we have
Primary, Primary Variant, Secondary, Secondary Variant. Those are all the brand colors. Those are the things that
you should generally theme to be the style of your app. There's also a Background,
Surface, and Error colors. You can style those, but you
don't necessarily have to. And then, the On
Primary, On Secondary-- those On variant of colors-- those need to be accessible
when they're drawn on top of the other color. So for instance,
On Primary, that will be drawn on top
of the Primary colors. So if you have text
that's shown on top of the Primary background, it
should be the On Primary color. These are the color
attributes that we've defined. You can see that there's
a lot of new ones. We tried to reuse some
that came from AppCompat. And we also have the Android
Color Background that we use, which is just the
regular Android version of that attribute. Shape is another subsystem
that you can theme. And it all happens with
MaterialShapeDrawable. So we're adding
MaterialShapeDrawable as the background for
shape themable components, such as Buttons, Cards, FAB,
BottomAppBar, BottomSheet, Chips, et cetera. And the way it works is with
edge and corner treatments. So we have edge and
corner treatments defined for rounded
and cut corner, which is pretty much every Button
or interactable component that you're going to find. But you can always
create your own as well. So here's an example
of Kotlin code, which defines a rounded
corner treatment. And sets that to the
MaterialShapeDrawable to apply just rounded
corners to everything. And here is the XML
version as well. So if you want to
do it in XML, we have a new attribute
called Shape Appearance. And it's similar to
the Text Appearance. The attributes here are the
Corner Family and the Corner Size. And this sets it to be a rounded
corner with 24 dp radius. And you can override
individual corners. So here, we're just
overriding the top left corner to be cut and the
bottom right corner to have a corner size of zero. And you can do the
same thing in XML. One thing to notice is that
we're using a Shape Appearance Overlay here, which is
basically the same thing. Except for we only
define the attributes that we want to override. So it's similar to a theme
overlay, in that the Material Button on its own already has
a shape appearance by default. And here, we're just
setting the top left corner to be cut and the bottom
right corner to be zero dp. Everything else will be
inherited from the style of the Material Button. One key idea of
Material Theming is to add consistency to your app. So we've defined these
shape mappings to help. These are different
groups of components that can help give your
app a more consistent look and feel, by connecting
surfaces through shape. So there's small, medium,
and large components. And these are the attributes
that you can set in your theme. So if you want to restyle
all the small components to have a cut right corner or
something, you can do that. Here's an example
where, just like I said, we're overriding the
small component style. So we redefined the
small appearance-- the Small Component Shape
Appearance in the theme to our style. And here, we're setting the
top right corner to be cut. And we're also setting
the parent here, so that will inherit
all of the other-- the rounded corners
for the other parts. Shadow is something that
we want to mention as well. Native elevation is
supported for convex shapes on lollipop for API 21 and up. But we're backporting shadows
to an API of 15 for both concave and convex shapes
for common cases, such as rounded or cut
corners, as well as for the BottomAppBar. Because this has the
cutout inside of it, it won't get native shadows. So we fake the shadow
with a gradient. GAUTHAM SAJITH:
So now that we've heard a bit about our
theming subsystems, let's look at how to actually
apply those to your app. So coming back to
this scenario again. Say you have this AppCompat
app that you want to apply some of these theming subsystems to. So we're going to be
building something that looks a little like this. And obviously, when you
build your own apps, it'll look much more beautiful
and cohesive than this. But we're tweaking
as many knobs as we can to show you some of the
functionality of what we built. So first thing
you'd have to do is if you're using an AppCompat
Light No Action Bar theme, you can switch over to the
Material Components theme. And in this case, you'll notice
we're using the Bridge theme, because we want to opt
into using those components one by one. But generally, we
recommend that you switch to the full
theme, the Regular theme, and see how it looks first
before trying out the Bridge theme. So let's say, first
thing you do is you set these theme
Color attributes. So some of the existing
ones that you already know are Color Primary
and Color Secondary. Those still exist. And then, some of the new theme
Color attributes, such as Color On Primary, On Secondary, Color
Surface, and Color On Surface are also set. You'll see this Color Secondary
doesn't really show up anywhere in your app yet, but it will. Next thing we want to do
is get Material Buttons. So before we had those
AppCompat Buttons. And then if you set the Material
Button style in your theme, all of your Buttons should
turn into Material Buttons when you change the XML tag. As I mentioned before, if
you're using our full theme, this inflation
happens automatically. So you don't actually have
to change this XML at all. We have a bunch of
other default styles that we've laid out here. All of our components
have a default style that you can set in the theme. It's generally just
component name plus style. For example, if you want
to set the Card style, you would set Material Card
View Style in your theme. And then, we're going
to be applying-- you should also
change the Card View to Material Card View in
this case in your XML. And then we're going to be
applying some attributes to these Cards. So for instance, you can set
Card Elevation, Stroke Color, and Stroke Width. And that'll show up
across all of your Cards, because it's setting
the default style. And all the Cards look
at this default style. And then, say you wanted
to change the base style of all the Buttons. You would define your own Button
style and set the parents of it to Outline Button, which is
one of our default styles. And then all of your Buttons
change into Outline Buttons. We can now apply some shape
theming to all of your Buttons. So we're going to define
this shape Appearance Shape to Button style. And in that Button
style, we're going to set the right corners to be
cut and the left corners to be rounded. And we're going to
set the corner size. And now, you have this
arrow-shaped Button. You can also do this using
a Shape Appearance Overlay, since Buttons have a
rounded corner by default. You don't really have
to set the rounded corner for the left side. So if you use a Shape
Appearance Overlay, you can just set
what you're changing. And it'll take effect as normal. And then, say we wanted
to have some icon Buttons, you would define this
Icon Button style. Set the paddings and
min widths as you want. And then apply this to your
Button directly in the XML, as well as setting that icon
and content description. And then you have this
Share icon Button, instead of that Share text Button. You can also switch over
to the BottomAppBar. So for this, you'd have
to set the BottomAppBar style in your theme. And then, remove the Top App
Bar from your XML layout. And add this BottomAppBar here. You can also add a
floating action button cradled into this BottomAppBar
by adding the floating action button to your layout. And then setting
the Layout Anchor attribute to point to the
ID of the BottomAppBar. You'll notice that this FAB has
that teal color from AppCompat. And that's because we haven't
set the default floating action button style yet. So once you set that,
you'll see that it's now using Color Secondary
and Color On Secondary. And it has that
Ripple effect as well. Then we can do some text styling
for the content of our Cards. Say you want all of your
text to be Color On Surface, rather than whatever
it was previously. We're going to be using
what's called a Material Theme Overlay, which I'll talk
about in just a second. But this Material Theme
Overlay pretty much sets the theme for all the
contents of that component. So in this case, we're
setting the text Color Primary and Tertiary to set the text
color of our Notes here. And so Material
Theme Overlay, you might have heard
of Android theme. It's the way you can style
a subsection of your view hierarchy. And one common usage
of this is to style say a dark-colored
toolbar in your app. The shortcoming of
Android theme is that it doesn't work in default styles. So for instance, if you wanted
to style all of your Cards, you can't really
set Android theme. So Material Theme
Overlay is an attribute that we've defined that's
supported by our components. And it does work
in default styles. So you can set this
in your default styles for your components. And have it theme the
subviews of your components. Lastly, we'll do some
TextAppearance theming. So previously the title had
this hard-coded text appearance style. Now we're going to be switching
over to our new TextAppearance attributes. And similarly, for the text--
for the Note body as well. And then, we can apply
some styling to this. So for example, if you
change Headline Six to be Comic Sans
for instance, you can change-- all
the components that use Headline Six in your app
should now look like this. So why go through the
trouble of doing this? Why go through the trouble
of using top-level attributes throughout your styles? What's the reason? And generally, we
do this because we want to be able to style
your entire app using only these top-level attributes. So say, for instance, your
teammate came up to you and said, "Hey, our brand
colors are changing now. So actually we want this maroon
color instead of these blues that we had." All you'd have to
do is switch some of these top-level
color attributes. And your whole app is rethemed. Similarly, if you want a dark
theme, or a fake dark theme of sorts, all you'd
have to do is change a couple of these
other Color attributes. And the components should all
respond appropriately to that. And you have a
different looking app. CAMERON KETCHAM: Now we're
going to talk a little bit about custom
components, and how you can use styles in some of your
components that you've created. There's really nothing
magical about the way our components use theming. It's all just basic
Android theming. So you can use it in
your components as well. You just have to
create a default style, pass that default
style attribute into your constructor, and
use Obtain Styled Attributes. So let's go through that. Here we have a definition of
a theme and some attributes. Here we're creating a
default style attribute and setting it in our theme. So we have this My
Custom View style. And we're setting it to this
widget.mycustomview style that we've defined
somewhere in our theme. So this will mean that
any components that use this My Custom View-- or any of these My Custom Views
will use this style by default. You also can create a
styleable, which holds a few different attributes. And then you would just need to
use these in the constructors. So here's an example of
a constructor for a view. Here, we pass in
the default style, which we created previously. And we pass this
in here, so that it can pick up that default
style if nothing else was set. And then raising Obtain
Styled attributes. And we pass in the styleable
that we just created, as well as the default
style attribute that was passed into the constructor. And finally, a
fallback style that can be used as a last resort
for finding attributes. And then, just read those in. And that's basically
how our components work. So you can definitely
do it yourself as well. And also extend the systems
for your use cases, right? Like if you have the need for
more attributes in some case, you can definitely add those in. It might be a little bit
more work on your part. Because you'll have
to update styles for all of the
components that you're using to reference
those attributes, since our components
that we're writing aren't going to be
referencing them. But if you need it, you
can definitely do that. Here's an example
of an attribute. Just create it, and
define it in your style. And then reference it. Define it in your
theme, and then reference it in
styles or elsewhere. And now, a little bit
about our process. We've had a few releases. The 1.0 went out in Jul--
was cut on July 20th. And it's been a little while. But now, with the Android
X Jetpack Refactor finish, we can release more frequently. Because they're not tied
to the Support Library. So we're trying to
ramp up our releases. And we finally cut 1.1
Alpha 1 October 31st. And we're definitely trying to
do this more frequently, around once a month at least. The 1.1 Alpha had the Type
theming, Color theming, and Dark theming
that we've talked about in this, plus lots of
bug fixes and performance improvements. In the upcoming
releases, we're going to have a Shape theming,
which I talked about. In 1.1 Alpha, the Shape
theming subsystem exists, but none of the components
are actually responding to those themed attributes yet. But with the next
release, it should. We also updated some styling
for dialogs, bottom sheet menus, those sorts of things
are all coming. And as far as contributing
and filing issues, GitHub is where our code is. So if you're interested
in taking a look, just go on GitHub. You can take a look
at all of our code. It's open source. And also, you can check
GitHub for instructions on how to submit bug reports. We're trying to figure
out what works best. Right now, we're
taking bug reports at this issuetracker.google
buginizer component. But we're looking
at different ways to make it more obvious
what we're working on. And trying to integrate
more with the community. And here's a few more resources. Material.io site is great,
especially the Android section. Definitely check
us out on Discord if you're interested
in chatting with us, or are interested in
helping us have a PR-- an idea for anything. Just come and chat with us. We have a tag on Stack Overflow. So if you have questions
about implementation, you can ask something there. We're watching that,
and we'll respond. And then we have a few Codelabs. You can find the link to those
Codelabs on this GitHub page. And that's pretty much it. Thanks for coming. GAUTHAM SAJITH: Thank you. [APPLAUSE] [MUSIC PLAYING]
"upcoming releases: bottom sheet"
What does that mean? Are they going to re-implement it? I would love, the current implementation is really bad, doesn't even allow customization without reflection.
This is a good video. Thanks MDC team. It's still a bit complex, but it's great to hear "how themeing with MDC should be done in 2018"