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
   

   View Slide

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!
   

   View Slide

3. Shutterstock | Aphelleon
   It’s far more than just
   a namespace update.
   - Me
   “
   

   View Slide

4. Components
   Shape
   Color
   Typography
   Subsystems
   

   View Slide

5. Material Theming
   

   View Slide

6. View Slide

7. Picking theme attributes using
   material.io
   

   View Slide

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
   

   View Slide

9. Material type system:
   https://material.io/design/typography/the-ty
   pe-system.html
   Google Fonts:
   https://fonts.google.com
   

   View Slide

10. Shape customization tool:
    https://material.io/design/shape/about-
    shape.html#shape-customization-tool
    

    View Slide

11. Material Theme Editor (Sketch
    plugin):
    https://material.io/tools/theme-editor/
    

    View Slide

12. Bringing it back to
    

    View Slide

13. Adding the dependency
    implementation "com.google.android.material:material:$material_version"
    ext.material_version = '1.1.0-alpha05'
    

    View Slide

14. Choose a base theme
    <br/><!-- Add attributes here --><br/>
    

    View Slide

15. A simple playground screen
    

    View Slide

16. Color
    

    View Slide

17. colorPrimary colorPrimaryVariant colorOnPrimary
    colorSurface colorOnSurface
    colorSecondary colorOnSecondary
    android:colorBackground
    

    View Slide

18. Adding color attributes
    <br/><item name="colorPrimary">#212121</item><br/><item name="colorPrimaryVariant">#000000</item><br/><item name="colorOnPrimary">#FFFFFF</item><br/><item name="colorSecondary">#2962FF</item><br/><item name="colorSecondaryVariant">#0039CB</item><br/><item name="colorOnSecondary">#FFFFFF</item><br/><item name="colorError">#F44336</item><br/><item name="colorOnError">#FFFFFF</item><br/><item name="colorSurface">#FFFFFF</item><br/><item name="colorOnSurface">#212121</item><br/><item name="android:colorBackground">@color/background</item><br/><item name="colorOnBackground">#212121</item><br/>
    #FAFAFA
    

    View Slide

19. Playground screen with updated colors
    

    View Slide

20. Typography
    

    View Slide

21. textAppearanceButton
    textAppearanceSubtitle1
    textAppearanceCaption
    textAppearanceBody2
    fontFamily
    

    View Slide

22. Adding type attributes
    <br/>...<br/><item name="fontFamily">@font/roboto_mono</item><br/><item name="android:fontFamily">@font/roboto_mono</item><br/>
    

    View Slide

23. Playground screen with updated type
    

    View Slide

24. Shape
    

    View Slide

25. shapeAppearanceSmallComponent
    shapeAppearanceMediumComponent
    shapeAppearanceLargeComponent
    

    View Slide

26. Adding shape attributes
    <br/>...<br/><item name="shapeAppearanceSmallComponent">@style/AppShapeAppearance.SmallComponent</item><br/><item name="shapeAppearanceMediumComponent">@style/AppShapeAppearance.MediumComponent</item><br/><item name="shapeAppearanceLargeComponent">@style/AppShapeAppearance.LargeComponent</item><br/>
    <br/><item name="cornerFamily">cut</item><br/><item name="cornerSize">8dp</item><br/>
    <br/><item name="cornerFamily">cut</item><br/><item name="cornerSize">8dp</item><br/>
    <br/><item name="cornerFamily">cut</item><br/><item name="cornerSize">8dp</item><br/>
    

    View Slide

27. Playground screen with updated shape
    

    View Slide

28. Widgets
    

    View Slide

29. materialButtonStyle
    materialCardViewStyle
    textInputStyle
    bottomNavigationStyle
    

    View Slide

30. Adding widget style attributes
    <br/>...<br/><item name="materialButtonStyle">@style/AppButton</item><br/><item name="textInputStyle">@style/AppTextField</item><br/><item name="materialCardViewStyle">@style/AppCard</item><br/><item name="bottomNavigationStyle">@style/AppBottomNavigation</item><br/>
    <br/><item name="backgroundTint">?attr/colorSecondary</item><br/>
    <br/><item name="boxBackgroundColor">@color/text_field_background</item><br/>
    <br/><item name="cardElevation">8dp</item><br/>
    
    

    View Slide

31. Playground screen with updated widget styles
    

    View Slide

32. More resources
    

    View Slide

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
    

    View Slide

34. Shutterstock | Aphelleon
    Any questions?
    “
    @ricknout
    

    View Slide