Setting up a Material Components for Android theme

Migrating to Material Components for Android from the Design Support Library is a necessary part of the broader move to AndroidX. The core widgets that form part of an Android app now mostly fall under the com.google.android.material package and bring with them a variety of new theme/style attributes.

This presentation covers setting up a Material Components theme for Android with the help of a “playground” visual aid. This will include new global theme attributes to customize the three Material Theming subsystems – color, typography and shape – as well as per-widget styles. It will also demonstrate how you can use Material Design tools – Color, Icons, Gallery and the Theme Editor Sketch Plugin – to choose a Material Theme that will make your new/existing app really stand out.

This was presented at Droidcon Boston 2019:
https://www.droidcon-boston.com/agenda/unconference/#Nick-Rout

Transcript

1. Material Components Setting up an Android theme Nick Rout | @rickout Android Engineer @ Over | GDG Cape Town Organizer
2. 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!
3. Shutterstock | Aphelleon It’s far more than just a namespace update. - Me “
4. Components Shape Color Typography Subsystems
5. Material Theming
7. Picking theme attributes using material.io
8. Color tool: https://material.io/tools/color Color palette generator: https://material.io/design/color/the-color-s ystem.html#tools-for-picking-colors
9. Material type system: https://material.io/design/typography/the-ty pe-system.html Google Fonts: https://fonts.google.com
10. Shape customization tool: https://material.io/design/shape/about- shape.html#shape-customization-tool
11. Material Theme Editor (Sketch plugin): https://material.io/tools/theme-editor/
12. Bringing it back to
13. Adding the dependency implementation "com.google.android.material:material:$material_version" ext.material_version = '1.1.0-alpha05'
14. Choose a base theme <style name="AppTheme" parent="Theme.MaterialComponents.*"> <!-- Add attributes here --> </style>
15. A simple playground screen
16. Color
17. colorPrimary colorPrimaryVariant colorOnPrimary colorSurface colorOnSurface colorSecondary colorOnSecondary android:colorBackground
18. 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>
19. Playground screen with updated colors
20. Typography
21. textAppearanceButton textAppearanceSubtitle1 textAppearanceCaption textAppearanceBody2 fontFamily
22. 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>
23. Playground screen with updated type
24. Shape
25. shapeAppearanceSmallComponent shapeAppearanceMediumComponent shapeAppearanceLargeComponent
26. 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>
27. Playground screen with updated shape
28. Widgets
29. materialButtonStyle materialCardViewStyle textInputStyle bottomNavigationStyle
30. 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" />
31. Playground screen with updated widget styles
32. More resources
33. “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
34. Shutterstock | Aphelleon Any questions? “ @ricknout