Tweet
Tweet

Slide 1

Slide 1 text

Material Components for Android Make consistent user interface Photo by Tyler Callahan on Unsplash @Linminphyoe1

Slide 2

Slide 2 text

Who am I ? Lin Min Phyo @Linminphyoe1 Senior Android Developer Product, UI/UX, Software Architectures

Slide 3

Slide 3 text

History of Material Design

Slide 4

Slide 4 text

History of Material Design Material Design Google I/O 2014

Slide 5

Slide 5 text

History of Material Design Material Design Google I/O 2014 Design Support Library Google I/O 2015

Slide 6

Slide 6 text

History of Material Design

Slide 7

Slide 7 text

History of Material Design

Slide 8

Slide 8 text

History of Material Design Problem • Apps look very similar • Lack of expressiveness for branding

Slide 9

Slide 9 text

History of Material Design Material Design Google I/O 2014 Design Support Library Google I/O 2015 Revamp Material Design Google I/O 2018

Slide 10

Slide 10 text

History of Material Design Material Design Google I/O 2014 Design Support Library Google I/O 2015 Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 11

Slide 11 text

History of Material Design Material Design Google I/O 2014 Design Support Library Google I/O 2015 Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 12

Slide 12 text

History of Material Design • New site material.io • More components • Material Theming Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 13

Slide 13 text

Material Theming Customization of your Material Design app to better reflect your product’s brand.

Slide 14

Slide 14 text

https://material.io/design/material-studies

Slide 15

Slide 15 text

Material Theming Typography Color Shape

Slide 16

Slide 16 text

History of Material Design • New site material.io • More components • Material Theming Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 17

Slide 17 text

History of Material Design • New site material.io • More components • Material Theming • Material Studies Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 18

Slide 18 text

Material Studies Case studies to showcase the flexibility of Material Theming and components

Slide 19

Slide 19 text

https://material.io/design/material-studies

Slide 20

Slide 20 text

History of Material Design • New site material.io • More components • Material Theming • Material Studies Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 21

Slide 21 text

History of Material Design • New site material.io • More components • Material Theming • Material Studies • Material Components Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 22

Slide 22 text

Material Components A set of open-sourced libraries for Material Design Components Material Design Components / MDC

Slide 23

Slide 23 text

Material Components https:/ /github.com/material-components

Slide 24

Slide 24 text

History of Material Design • New site material.io • More components • Material Theming • Material Studies • Material Components Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 25

Slide 25 text

History of Material Design • New site material.io • More components • Material Theming • Material Studies • Material Components Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018

Slide 26

Slide 26 text

History of Material Design Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018 • Dark Theme Guidelines • Material Theme Builder • A lot of improvements on 
 MDC for Android within 
 I/O 18 & I/O 19 Google I/O 2019

Slide 27

Slide 27 text

Material Components
 for Android

Slide 28

Slide 28 text

What’s inside Material Components • UI Components • Styling Components • Material Theming Support

Slide 29

Slide 29 text

Add Material Components to project dependencies { // AndroidX implementation ‘com.google.android.material:material:’ }

Slide 30

Slide 30 text

Add Material Components to project dependencies { // AndroidX implementation ‘com.google.android.material:material:’ }

Slide 31

Slide 31 text

Add Material Components to project dependencies { // AndroidX implementation 'com.google.android.material:material:' // Pre-AndroidX implementation ‘com.android.support:design:28.0.0' }

Slide 32

Slide 32 text

Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet.

Slide 33

Slide 33 text

Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. Chips MaterialButton MaterialCardView Chips

Slide 34

Slide 34 text

Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. Chips MaterialButton MaterialCardView MaterialButton

Slide 35

Slide 35 text

Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. Chips MaterialButton MaterialCardView MaterialCardView

Slide 36

Slide 36 text

Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. Chips MaterialButton MaterialCardView BottomAppBar

Slide 37

Slide 37 text

Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. com.google.android.material:material:1.1.0 Currently in alpha More components Support Material Theming MaterialButtonToggleGroup

Slide 38

Slide 38 text

Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. com.google.android.material:material:1.1.0 Currently in alpha More components Support Material Theming Badge

Slide 39

Slide 39 text

Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. com.google.android.material:material:1.1.0 Currently in alpha More components Support Material Theming Material Button Group

Slide 40

Slide 40 text

Applying Material Theme

Slide 41

Slide 41 text

Applying Material Theme

Slide 42

Slide 42 text

Applying Material Theme

Slide 43

Slide 43 text

Applying Material Theme

Slide 44

Slide 44 text

Applying Material Theme

Slide 45

Slide 45 text

Styling Components

Slide 46

Slide 46 text

Styling Components

Slide 47

Slide 47 text

Styling Components <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item>

Slide 48

Slide 48 text

Styling Components <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item>

Slide 49

Slide 49 text

Styling Components <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item>

Slide 50

Slide 50 text

Styling Components <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> <item name=“cardElevation">2dp</item> <item name=“cardUseCompatPadding">true</item>

Slide 51

Slide 51 text

Styling Components <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> <item name=“cardElevation">2dp</item> <item name=“cardUseCompatPadding">true</item>

Slide 52

Slide 52 text

Styling Components actionBarStyle actionOverflowMenuStyle appBarLayoutStyle badgeStyle borderlessButtonStyle bottomAppBarStyle bottomNavigationStyle checkboxStyle chipStyle chipGroupStyle extendedFloatingActionButtonStyle floatingActionButtonStyle materialButtonStyle materialButtonOutlinedStyle materialButtonToggleGroupStyle materialCardViewStyle navigationViewStyle radioButtonStyle snackbarStyle snackbarButtonStyle switchStyle tabStyle textInputStyle toolbarStyle

Slide 53

Slide 53 text

Typography Theming

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Typography Categories

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Typography Theming in MDC-Android textAppearanceHeadline1 textAppearanceHeadline2 textAppearanceHeadline3 textAppearanceHeadline4 textAppearanceHeadline5 textAppearanceHeadline6 textAppearanceSubtitle1 textAppearanceSubtitle2 textAppearanceBody1 textAppearanceBody2 textAppearanceButton textAppearanceCaption textAppearanceOverline

Slide 60

Slide 60 text

Color Theming

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Color Theming in MDC-Android colorPrimary colorPrimaryVariant colorSecondary colorSecondaryVariant android:colorBackground colorSurface colorError colorOnPrimary colorOnSecondary colorOnBackground colorOnSurface colorOnError

Slide 63

Slide 63 text

Shape Theming

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Rounded Corner Cut Corner

Slide 66

Slide 66 text

Shape Theming in MDC-Android Components Size Small Medium Large Button Chip FAB Extended FAB Snackbar Text Field Card Dialog Menu Bottom Sheet Navigation Drawer

Slide 67

Slide 67 text

Shape Theming in MDC-Android shapeAppearanceSmallComponent shapeAppearanceMediumComponent shapeAppearanceLargeComponent

Slide 68

Slide 68 text

Dark Theme

Slide 69

Slide 69 text

Dark Theme res/values/themes.xml Option 1

Slide 70

Slide 70 text

Dark Theme res/values/themes.xml res/values-night/themes.xml Option 1

Slide 71

Slide 71 text

Dark Theme <item name=“colorPrimary”>@color/brand_green</item> res/values/themes.xml Option 2

Slide 72

Slide 72 text

Dark Theme <item name=“colorPrimary”>@color/brand_green</item> res/values/themes.xml res/values-night/colors.xml #1DE9B6 res/values/colors.xml #30BA85 Option 2

Slide 73

Slide 73 text

https://speakerdeck.com/nickbutcher/developing-themes-with- style-7d0571e3-6008-4ec5-99c6-aa5669520124?slide=262

Slide 74

Slide 74 text

Dark Theme Widget.MaterialComponents.BottomAppBar.PrimarySurface Widget.MaterialComponents.BottomNavigationView.PrimarySurface Widget.MaterialComponents.TabLayout.PrimarySurface Widget.MaterialComponents.Toolbar.PrimarySurface

Slide 75

Slide 75 text

Material Theme Builder Project for visualizing Material Theming

Slide 76

Slide 76 text

Material Theme Builder Android • Github https://material.io/tools/build-a-material-theme/ Web • Glitch

Slide 77

Slide 77 text

Material Theme Builder Android • Github https://material.io/tools/build-a-material-theme/ • type.xml • shape.xml • color.xml • night/color.xml

Slide 78

Slide 78 text

Designer Resources • https:/ /material.io/tools/theme-editor/

Slide 79

Slide 79 text

Resources • https:/ /material.io • https:/ /material.io/collections/getting-started/#01 • https:/ /speakerdeck.com/nickbutcher/developing- themes-with-style-7d0571e3-6008-4ec5-99c6- aa5669520124 • https:/ /github.com/material-components/material- components-android/

Slide 80

Slide 80 text

Q & A Material Components for Android : Make consistent user interface @Linminphyoe1