Setting up a Material Components for Android theme

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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!

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Components Shape Color Typography Subsystems

Slide 5

Slide 5 text

Material Theming

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Picking theme attributes using material.io

Slide 8

Slide 8 text

Color tool: https://material.io/tools/color Color palette generator: https://material.io/design/color/the-color-s ystem.html#tools-for-picking-colors

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Bringing it back to

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Choose a base theme

Slide 15

Slide 15 text

A simple playground screen

Slide 16

Slide 16 text

Color

Slide 17

Slide 17 text

colorPrimary colorPrimaryVariant colorOnPrimary colorSurface colorOnSurface colorSecondary colorOnSecondary android:colorBackground

Slide 18

Slide 18 text

Adding color attributes <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> #FAFAFA

Slide 19

Slide 19 text

Playground screen with updated colors

Slide 20

Slide 20 text

Typography

Slide 21

Slide 21 text

textAppearanceButton textAppearanceSubtitle1 textAppearanceCaption textAppearanceBody2 fontFamily

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Playground screen with updated type

Slide 24

Slide 24 text

Shape

Slide 25

Slide 25 text

shapeAppearanceSmallComponent shapeAppearanceMediumComponent shapeAppearanceLargeComponent

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Playground screen with updated shape

Slide 28

Slide 28 text

Widgets

Slide 29

Slide 29 text

materialButtonStyle materialCardViewStyle textInputStyle bottomNavigationStyle

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Playground screen with updated widget styles

Slide 32

Slide 32 text

More resources

Slide 33

Slide 33 text

“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

Slide 34

Slide 34 text

Shutterstock | Aphelleon Any questions? “ @ricknout