[MUSIC PLAYING]
NICK BUTCHER: We recommend that you
use the Material Design Components
library to build your app's UI.
In this video, I'll give you an overview
of what the library provides and why
we recommend that you use it.
Your app exists alongside many other apps
installed on a user's plane.
We, therefore, recommend that applications
follow the Material design guidelines to ensure
the apps operate consistently.
The components or patterns learned in one app
can be used in another.
The Material Design Components library, or MDC for short,
implements the Material guidelines,
providing drop-in components to build your app with.
MDC does this by extending standard widgets
to implement material styling.
For example, it offers MaterialButton
MaterialCheckBox, MaterialToolbar, and so on.
To make it easier to use these Material
widgets throughout your app, when you use a Material
components application theme, then standard components
will automatically be substituted with their Material
counterparts.
That is, if you declare a regular button in your layout,
then this will be replaced with a Material button
when it's inflated.
This makes it easy to achieve Material styling
without having to make large updates to your layouts.
Just make sure that you use a Material components theme.
All Material widgets extend the relevant AppCompat
counterparts.
So they benefit from the same backported functionality or bug
fixes.
Material and AppCompat work together,
offering different functionality.
AppCompat backports newer platform features
and bug fixes, while MDC implements material styling.
MDC widgets offer extra styling and functionality
over their platform or AppCompat counterparts.
For example, MaterialButton offers
contained, borderless, or outlined display styles.
One of my favorite additions is text views
being replaced with Material text views, which adds support
for specifying line heights in text appearances-- super handy.
As well as adding to existing widgets,
MDC offers a number of new widgets
not available in the platform or AppCompat.
You've likely seen bottom navigation, bottom sheet,
or floating action buttons, but might not
have come across chips, date picker, or time picker.
For a complete list of components offered
by the library, see the documentation
material.io/components.
All MDC widgets support Material theming,
which is a systematic way to customize
Material design to reflect your product's brand.
Just because your app should work similarly
to other apps on a phone doesn't mean that it
should look or feel like them.
A Material theme comprises color, typography,
and shape parameters.
Customizing these will automatically
be reflected in all the components
you use to build your app.
You can think of Material theming as a design system
for creating design systems.
You configure the color type and shape inputs
and get out a complete design system of components
customized for your brand.
We'll go in depth into theming in a later episode
in this series.
MDC widgets also implement Material's dark theme guidance,
making it much easier to spot dark themes in your app.
MDC offers DayNight themes, and all widgets
adapt their colors for dark theme and offer elevation
overlays to show elevation when shadows don't read.
We'll go in depth into MDCs dark theme support
in the following episode.
Material design provides guidance
for creating seamless screen transitions.
Better than guidance alone, MDC implements
these patterns as fragment or activity transitions
ready to be dropped into your app.
Again, we'll go over these in the following episode.
Jetpack Compose is Android's next generation UI
toolkit currently in alpha.
While it is not yet stable, it will also
offer an implementation of material components
and theming.
Adopting MDC now will prepare your codebase
for later adopting Jetpack Compose.
It uses the same concepts, design vocabulary,
and components.
It even becomes possible to ease your migration with libraries
like MDC Android Compose theme adapter,
which converts an MDC XML theme into a composed material theme
object.
To make it easier to get started with MDC,
we've recently updated the Android Studio templates
to use MDC and to set up a material theme for you.
So if I create a new project and select the Empty Activity
template, we can see that it automatically
adds a dependency on the MDC library
here in the Gradle dependencies.
Switching to the app's theme, it inherits from a Material
components theme.
This will enable the automatic inflation of Material widgets
in your layouts that we saw before,
providing Material styling.
It specifies a number of theme attributes used
to set up Material theming, color primary, color
secondary, and so on.
Notice that by default, it uses the DayNight theme, which
provides dark theme support.
In fact, it actually creates two theme definitions--
one for night configuration for dark theme and the default one,
used in light theme.
Opening them up, we can see that both inherit from Material
components, but they specify different colors, here using
a lighter primary color in dark theme.
Hopefully it's clear to see why we
recommend building Android UI with Material Design
Components.
The library implements material guidelines and theming,
offers new and enhanced widgets, supports dark themes,
and provides slick transitions.
In the following episodes in this series,
we'll go into more depth to show you
how to implement material theming, dark themes,
and motion.
So make sure you subscribe to the Android Developers Channel
so you don't miss them.
[MUSIC PLAYING]