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
  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. 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>
  4. 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>
  5. 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" />
  6. “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