[MUSIC PLAYING]
NICK ROUT: Hi.
I'm Nick, a developer advocate on the Material Design team
at Google.
Material Components for Android is the official library
from the Material Design team, helping you build
beautiful products faster.
With built-in material theming support, customizing your app
has never been easier.
In this video, I'm going to show you
how to migrate from the Android Design Support Library
to Material Components.
You'll learn about the new namespace, attributes,
and widgets, and how you can leverage the power of material
theming in your app.
Let's dive in.
As you may know, the Design Support Library
was a package within the old Android Support Library.
It provided us with the material design components and patents
that were not part of the standard AppCompat offering,
such as navigation drawers, floating action buttons, snack
bars, and tabs.
Development on the support library
stopped at version 28.0.0 and moved to Jetpack.
Jetpack makes use of a new AndroidX namespace.
It splits the previous support library packages
into separately maintained, semantically versioned
libraries, providing feature parity as well
as new libraries.
At the same time, the Design Support Library
was migrated to Material Components for Android.
MDC Android has its own namespace
and offers new widgets, features, and bug fixes.
We highly recommend migrating your codebase to MDC Android
to get access to the latest features and bug fixes.
Let's see how we can migrate your existing
codebase from the Design Support Library to MDC Android.
First, you need to be using AndroidX.
If you've done so already, great.
If not, you can get started with the AndroidX developer
documentation and the steps outlined in our video,
"Migrating to AndroidX--
The Time is Right."
Both are linked in the description.
Keep in mind that Jetpack and MDC Android
artifacts with version 1.0.0 are binary
equivalents to the support library 28.0.0 artifacts.
If you're not on version 28, then we
recommend migrating to this first,
and then switching to MDC Android.
Now we have successfully migrated to MDC Android 1.0.0.
We've done a lot of work to improve
MDC Android since version 1.
Now that version 1.1.0 is stable,
you've got a host of great new features including
full material theming support for color, typography,
and shape, dark theme supports, Android 10 gesture
navigation inserts and widgets, and new widgets
like the Extended FAB badges, toggle buttons, and more.
We recommend changing your MDC Android dependency
version to 1.1.0 or later.
At this stage, you may however notice some unexpected changes
to certain widget colors and other attributes.
Let's look at how we can fix this
by migrating our app theme.
The first thing you need to do is
ensure that your theme is inheriting from a Material
Components theme.
If you are previously inheriting from an AppCompat theme,
the MDC Android themes map one-to-one with these.
At this stage, your theme is likely
missing some of the important MDC Android attributes,
while also having some AppCompat or platform
attributes you no longer need.
MDC Android has a smaller set of easier-to-understand theme
attributes.
They are derived from the concept of material theming
and can be split into four categories-- color, typography,
shape, and per-widget styles.
Let's go through these categories one by one
to see what attributes you should add, change, or remove
and how to use them.
The main MDC Android color palette
consists of a primary color with a light or dark variance.
This is your main brand color.
A secondary color with a light or dark variance.
This is your complementary accent brand color.
An error color for warnings and errors,
a surface color for containers, like cards and bottom sheets,
and a background color for the window background of your app.
In addition to this, On colors exists
for text and icons displayed on top of these colors.
In your app theme, you can override some of the colors
to express your brand.
For colors you don't want to override,
you can rely on sensible defaults provided
by the MDC Android themes.
Attributes from the Design Support Library,
such as Color Accent and Color Control Normal,
cannot fit within this new color system and should be phased
out.
Some non-MDC Android widgets still use these attributes.
Thankfully, the MDC Android themes
take care of supporting this for you
by internally mapping the new color
attributes to these under the hood.
Here's how the new color attributes map
to the old AppCompat attributes and which
ones you can keep, replace, or remove.
The MDC Android type scales map directly
to those in the Material Design Type System.
They take the form of Android text appearance styles.
They can be used in a variety of scenarios for titles, buttons,
captions, and more.
In your app's theme, you can override the type scales
to express your brand.
You can also add a custom font family with XML or downloadable
fonts via Android Studio.
Your font is then applied to individual text appearance
styles, which represent your type scales.
And here's how these new type attributes map
to the old AppCompat attributes and which
ones you can keep, replace, or remove.
The shape system is a way to apply treatments
to the corners of MDC Android widgets.
More specifically, anything backed by a new class--
material, shape, drawable.
This takes the form of Android shape appearance styles, which
include a corner family, rounded or cut, and the corner size.
Shapable widgets can be split into three categories--
small components, such as buttons and text fields,
medium components, like cards and dialogs,
and large components such as bottom sheets.
In your app theme, you can override the shape appearances
to add personality to the various widgets that
make up your app screens.
This is a new concept that didn't previously
exist in AppCompat.
You may want to check for places where
you view shaped drawables and other custom backgrounds
for widgets, as these will not respond to shape theming.
If the widget is part of MDC Android,
the backing material shaped drawable and corresponding
attributes should cover most cases.
MDC Android also offers default styles for the new widgets
that it offers.
Here's how these new widget attributes map
to the old AppCompat attributes and which
ones you can keep, replace, or remove.
That was a quick look at how to migrate from the Design Support
Library to Material Components.
With the new and updated material theming and widget
attributes, your app theme should now
look something like this.
You can learn more about material theming and MDc
Android at material.io.
If you enjoyed this video, give it a Like
and subscribe to our channel for more designed tutorials
and other videos.
Thanks for watching.
[MUSIC PLAYING]