[MUSIC PLAYING]
NICK ROUT: Hi, welcome to another episode
in our Material Design Components series.
Following on from our overview and why we recommend MDC,
today, we're going to be giving you a demonstration of Material
Theming.
All of the widgets offered by MDC such as Buttons, Text
Fields, FABS, and App Bars use what's
known as the Baseline Theme by default,
that is, they'll mostly have a purple and teal color palette,
use the Roboto typeface, and have four dp rounded corners.
Material Theming is the ability to customize
these widgets to purposefully deviate from the baseline
and align with your brand by adjusting color, type,
and shape attributes all while maintaining their core
anatomy and usability.
We'll start out by exploring some useful tools
on material.io for picking color, type, and shape values.
We'll then go through the process
of applying these values in your app using themes and styles
and see how MDC widgets automatically react to changes.
Lastly, we'll take a look at Handy Utility Classes, which
can help you deal with Material Theming
in some common scenarios.
For this episode, we're going to be using an existing project
called Build a Material Theme, a.k.a.
Material Theme Builder.
This is an interactive project that
lets you create your own material
theme by customizing values for color, typography, and shape.
Visit material.io/resc ources/buildermaterialtheme
and then click here to get the code on GitHub.
We're now in the Material Components Android Examples
Repository.
It includes Material Theme Builder as well as
other sample apps that demonstrate
MDC like Owl and Reply.
We'll need to clone this repro to our machine.
We can then open an existing project
in Android Studio using the Material Theme Builder
directory.
We're now set up with the Material Theme Builder project
and have the app running on an emulator.
The UI is a visual representation
of the Material Theme in terms of color, typography,
and shape.
It also showcases most of the widgets available in MDC.
Notice that everything is using the baseline theme--
purple and teal colors, the Roboto typeface, and rounded
corners.
There's also a switch to see what your theme looks
like in Dark theme.
We'll see how changing the values
of the attributes in our App theme will alter the UI.
But first, let's take a look at some tools
to help us pick these values.
First up, we have a couple tools for picking color values.
The Material Color tool allows us
to select primary and secondary colors
from the Material palette or using custom hex codes--
get light and dark variants as well as
appropriate on-colors and then preview
how these look in sample screens.
The Material Palette Generator can
generate a full tonal palette shade 50 to 900 for a color.
In our case, we've picked navy for our primary color
and green for our secondary color.
Next, the Type-scale Generator is
useful for previewing type-skills, integrating
with Google Fonts, and exporting code.
In our case, we've picked Roboto and Mono as our font.
Lastly, the Shape Customization tool
is for previewing shape categories
and how changes apply to the corners of various components.
In our case, we've picked Cut Corners
with varying sizes for small, medium, and large component
categories.
We are now back in Android Studio
having picked Theming Values using Material Tools.
Let's incorporate these into our Android Projects.
First, let's add our color values as color resources
to our existing rez/color.xml file.
We'll name them literally as opposed to semantically
as a Themes and Styles best practice.
Next, let's add our top values.
I've gone ahead and added Roboto and Mono as a downloadable font
to our projects.
You can see more about how to do that
in the link in the description.
We now need to use this font to update existing text-appearance
styles in our rez/type.xml file.
Note that we're using different font weights per style.
We could override other attributes
like Text Size or Letter Spacing.
But in our case, we're only interested in the font family.
Lastly, shape values-- we need to update existing Shape
Appearance Styles in our rez/shape.xml file.
For each category, we'll change the Corner Family to Cut
and then apply the Corner Size that we picked using the Shape
Customization tool.
We now have our Material Theming Values
in our project as Resources.
And the last thing we need to do is
make sure our App Theme is up-to-date.
You'll notice that we have two themes.xml files--
now rez/values and rez/values-nightfolders with
a base Material Components theme and then an App theme in each.
This structure allows us to vary our colors
based on whether the app is in Light or Dark theme, which
will be explored in an upcoming episode.
For now, we need to change our Color, Type,
and Shape attributes.
We'll replace our Color values with the ones
we added to rez/colors/xml.
For Type and Shape, we don't need
to actually do anything more as the Text Appearance and Shape
Appearance styles we edited are already
referenced in our theme.
So let's rerun our app.
We can now clearly see that the UI of our app
has changed and has a very different feel
all while retaining the fundamental layouts
and anatomy of each widget.
Exploring the tabs of Material Theme Builder allows us
to preview Color, Type, and Shape values
and also see how MDC Widgets have responded to our changes.
Flipping the Dark Theme switch shows our different color
palette while maintaining Type and Shape theming.
I'd like to take us through a couple more things using
Handy MDC Utility Classes in some common scenarios.
Firstly, let's look at how we can resolve Theme Color
Attributes programmatically.
We'll use the Material Colors Class
to get Color Primary Variance--
simply passing a view for context as well as the color
attributes.
We can then, for example, apply the Star UI
as the Hint Color of our theme name,
which we can then see when we rerun our app.
The other thing I'd like to show you
is a class called Shapable Image View.
As the name suggests, this is an image view
that understands Shape Theming.
Applying circular clips to images for avatars
is a common use case.
And this class can do just that.
In fact, it can apply cut corners and corners
of varying sizes too.
I've gone ahead and added an additional image item
to our Component List.
Notice, we're using a standard Image View here
with a test image and related attributes like Scale Type.
Let's change this to a Shapable Image View.
At this moment, nothing will change.
However, Shapable Image View understands
Shape Theming attributes.
So let's add in Shape Appearance, Reference Shape
Appearance Medium Components, and Rerun our app.
We now have Cut Corners that match other components
in the Medium Shape Category.
But let's go further.
We can define a Shape Appearance Overlay,
which is somewhat similar to a Theme Overlay
in our rez/shape.xml file.
We won't override the Corner Family.
But we'll set Corner Size to 0 dp and then Corner Size
top-left to 50%.
Percentages are useful when you want
to adapt to the layout, width, and height.
Back in our Layouts, we apply this
to the Shapable Image View using Shape Appearance Overlay
Lastly, let's add in a Stroke Width and Stroke
Color both of which are supported by Shapable Image
View as well.
When we rerun our app, we can see the changes.
That's it for today's episode.
We saw how adjusting Material Theming attributes
in the Material Components theme of our Material Theme Builder
app altered the appearance of MDC Widgets
in terms of color, type, and shape.
We also explored some Handy MDC Utility Classes
that help you implement Material Theming
in some common scenarios such as resolving Theme Color
attributes and applying Shape Theming to images.
In future episodes, we'll explore topics
like Material Dark Theme and Material Motion.
So be sure to check those out.
If you like the video, go ahead and like, share,
and subscribe to the Android Developer's YouTube channel,
thanks.
[MUSIC PLAYING]