Setting up a Material Components for Android theme

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

84ed0218b7b6eec8a5ac5af51c342c0c?s=128

Nick Rout

April 09, 2019
Tweet

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

  6. None
  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