Material Components

Setting up an Android theme

Nick Rout | @rickout

Android Engineer @ Over | GDG Cape Town Organizer
Support Library -> AndroidX

Design Support Library -> Material Components

(Material Design team, GitHub)

1.0.0 = Namespace migration of 28.0.0 (mostly)

1.1.0 (currently alpha 5) = New features!
 “
It’s far more than just
a namespace update.
- Me

Shutterstock | Aphelleon
Subsystems

Color
Typography

Shape Components
Material Theming
Picking theme attributes using
material.io
Color tool:

https://material.io/tools/color

Color palette generator:

https://material.io/design/color/the-color-s
ystem.html#tools-for-picking-colors
Material type system:
https://material.io/design/typography/the-ty
pe-system.html

Google Fonts:
https://fonts.google.com
Shape customization tool:
https://material.io/design/shape/about-
shape.html#shape-customization-tool
Material Theme Editor (Sketch
plugin):
https://material.io/tools/theme-editor/
Bringing it back to
Adding the dependency

implementation "com.google.android.material:material:$material_version"

ext.material_version = '1.1.0-alpha05'
Choose a base theme

<style name="AppTheme" parent="Theme.MaterialComponents.*">

<!-- Add attributes here -->
</style>
A simple playground screen
Color
colorPrimary colorPrimaryVariant colorOnPrimary colorSecondary colorOnSecondary

colorSurface colorOnSurface android:colorBackground

Adding color attributes

<style name="AppTheme" parent="Theme.MaterialComponents.*">

<item name="colorPrimary">#212121</item>
<item name="colorPrimaryVariant">#000000</item>
<item name="colorOnPrimary">#FFFFFF</item>
<item name="colorSecondary">#2962FF</item>
<item name="colorSecondaryVariant">#0039CB</item>
<item name="colorOnSecondary">#FFFFFF</item>
<item name="colorError">#F44336</item>
<item name="colorOnError">#FFFFFF</item>
<item name="colorSurface">#FFFFFF</item>
<item name="colorOnSurface">#212121</item>
<item name="android:colorBackground">@color/background</item>
<item name="colorOnBackground">#212121</item>
</style>
<color name="background">#FAFAFA</color>
Playground screen with updated colors
Typography
textAppearanceButton fontFamily textAppearanceBody2

textAppearanceCaption textAppearanceSubtitle1
Adding type attributes

<style name="AppTheme" parent="Theme.MaterialComponents.*">

...
<item name="fontFamily">@font/roboto_mono</item>
<item name="android:fontFamily">@font/roboto_mono</item>
</style>
Playground screen with updated type
Shape
 shapeAppearanceSmallComponent

shapeAppearanceLargeComponent shapeAppearanceMediumComponent
Adding shape attributes

<style name="AppTheme" parent="Theme.MaterialComponents.*">

...
<item name="shapeAppearanceSmallComponent">@style/AppShapeAppearance.SmallComponent</item>
<item name="shapeAppearanceMediumComponent">@style/AppShapeAppearance.MediumComponent</item>
<item name="shapeAppearanceLargeComponent">@style/AppShapeAppearance.LargeComponent</item>
</style>
<style name="AppShapeAppearance.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">8dp</item>
</style>
<style name="AppShapeAppearance.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">8dp</item>
</style>
<style name="AppShapeAppearance.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">8dp</item>
</style>
Playground screen with updated shape
Widgets
 materialButtonStyle textInputStyle

bottomNavigationStyle materialCardViewStyle
Adding widget style attributes

<style name="AppTheme" parent="Theme.MaterialComponents.*">

...
<item name="materialButtonStyle">@style/AppButton</item>
<item name="textInputStyle">@style/AppTextField</item>
<item name="materialCardViewStyle">@style/AppCard</item>
<item name="bottomNavigationStyle">@style/AppBottomNavigation</item>
</style>
<style name="AppButton" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">?attr/colorSecondary</item>
</style>
<style name="AppTextField" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="boxBackgroundColor">@color/text_field_background</item>
</style>
<style name="AppCard" parent="Widget.MaterialComponents.CardView">
<item name="cardElevation">8dp</item>
</style>
<style name="AppBottomNavigation" parent="Widget.MaterialComponents.BottomNavigation.Colored" />
Playground screen with updated widget styles
More resources
“Setting up a Material Components theme for Android” (Medium)

https://medium.com/over-engineering/setting-up-a-material-components-theme-
for-android-fbf7774da739

“The Components of Material Design” (Android Dev Summit 2018)

https://www.youtube.com/watch?v=DPH3F0v1jB0

“Designing and building a real app using Material tools & components” (Droidcon
Kenya 2018)

https://www.youtube.com/watch?v=hjATvyrA0CQ
 Any questions?
“
Shutterstock | Aphelleon @ricknout