Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Setting up a Material Components for Android theme

Nick Rout
April 09, 2019

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

Nick Rout

April 09, 2019
Tweet

More Decks by Nick Rout

Other Decks in Programming

Transcript

  1. Material Components
    Setting up an Android theme
    Nick Rout | @rickout
    Android Engineer @ Over | GDG Cape Town Organizer

    View full-size 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 full-size slide

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

    View full-size slide

  4. Components
    Shape
    Color
    Typography
    Subsystems

    View full-size slide

  5. Material Theming

    View full-size slide

  6. Picking theme attributes using
    material.io

    View full-size slide

  7. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Bringing it back to

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. A simple playground screen

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. Playground screen with updated colors

    View full-size slide

  18. textAppearanceButton
    textAppearanceSubtitle1
    textAppearanceCaption
    textAppearanceBody2
    fontFamily

    View full-size slide

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

    View full-size slide

  20. Playground screen with updated type

    View full-size slide

  21. shapeAppearanceSmallComponent
    shapeAppearanceMediumComponent
    shapeAppearanceLargeComponent

    View full-size slide

  22. 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 full-size slide

  23. Playground screen with updated shape

    View full-size slide

  24. materialButtonStyle
    materialCardViewStyle
    textInputStyle
    bottomNavigationStyle

    View full-size slide

  25. 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 full-size slide

  26. Playground screen with updated widget styles

    View full-size slide

  27. More resources

    View full-size slide

  28. “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 full-size slide

  29. Shutterstock | Aphelleon
    Any questions?

    @ricknout

    View full-size slide