Material Components for Android : Make consistent user interface

Material Components for Android : Make consistent user interface

Material components for Android is an open-sourced library that make developers to work easily with material design specification and make ui components consistent. Collaboration between designers and developers have never been easier.

C4db14b923561bc57fc10725abbecbcf?s=128

Lin Min Phyo

July 28, 2019
Tweet

Transcript

  1. Material Components for Android Make consistent user interface Photo by

    Tyler Callahan on Unsplash @Linminphyoe1
  2. Who am I ? Lin Min Phyo @Linminphyoe1 Senior Android

    Developer Product, UI/UX, Software Architectures
  3. History of Material Design

  4. History of Material Design Material Design Google I/O 2014

  5. History of Material Design Material Design Google I/O 2014 Design

    Support Library Google I/O 2015
  6. History of Material Design

  7. History of Material Design

  8. History of Material Design Problem • Apps look very similar

    • Lack of expressiveness for branding
  9. History of Material Design Material Design Google I/O 2014 Design

    Support Library Google I/O 2015 Revamp Material Design Google I/O 2018
  10. 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
  11. 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
  12. 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
  13. Material Theming Customization of your Material Design app to better

    reflect your product’s brand.
  14. https://material.io/design/material-studies

  15. Material Theming Typography Color Shape

  16. 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
  17. 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
  18. Material Studies Case studies to showcase the flexibility of Material

    Theming and components
  19. https://material.io/design/material-studies

  20. 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
  21. 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
  22. Material Components A set of open-sourced libraries for Material Design

    Components Material Design Components / MDC
  23. Material Components https:/ /github.com/material-components

  24. 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
  25. 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
  26. 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
  27. Material Components
 for Android

  28. What’s inside Material Components • UI Components • Styling Components

    • Material Theming Support
  29. Add Material Components to project dependencies { // AndroidX implementation

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

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

    'com.google.android.material:material:<version>' // Pre-AndroidX implementation ‘com.android.support:design:28.0.0' }
  32. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is

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

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

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

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

    not ready, yet. Chips MaterialButton MaterialCardView BottomAppBar
  37. 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
  38. 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
  39. 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
  40. Applying Material Theme

  41. Applying Material Theme <style name=“Base.AppTheme" parent=“Theme.AppCompact.Light”> </style>

  42. Applying Material Theme <style name=“Base.AppTheme" parent=“Theme. .Light”> </style>

  43. Applying Material Theme <!-— Full Mode —-> <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”>

    </style>
  44. Applying Material Theme <!-— Full Mode —-> <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”>

    </style> <!-— Bridge Mode —-> <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light.Bridge”> </style>
  45. Styling Components

  46. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> </style>

  47. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style>

  48. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style>

  49. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style>

    <style name=“Widget.AppTheme.CardView" parent=“@style/Widget.MaterialComponents.CardView"> </style>
  50. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style>

    <style name=“Widget.AppTheme.CardView" parent=“@style/Widget.MaterialComponents.CardView"> <item name=“cardElevation">2dp</item> <item name=“cardUseCompatPadding">true</item> </style>
  51. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style>

    <style name=“Widget.AppTheme.CardView" parent=“@style/Widget.MaterialComponents.CardView"> <item name=“cardElevation">2dp</item> <item name=“cardUseCompatPadding">true</item> </style>
  52. 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
  53. Typography Theming

  54. None
  55. Typography Categories

  56. None
  57. None
  58. None
  59. Typography Theming in MDC-Android textAppearanceHeadline1 textAppearanceHeadline2 textAppearanceHeadline3 textAppearanceHeadline4 textAppearanceHeadline5 textAppearanceHeadline6

    textAppearanceSubtitle1 textAppearanceSubtitle2 textAppearanceBody1 textAppearanceBody2 textAppearanceButton textAppearanceCaption textAppearanceOverline
  60. Color Theming

  61. None
  62. Color Theming in MDC-Android colorPrimary colorPrimaryVariant colorSecondary colorSecondaryVariant android:colorBackground colorSurface

    colorError colorOnPrimary colorOnSecondary colorOnBackground colorOnSurface colorOnError
  63. Shape Theming

  64. None
  65. Rounded Corner Cut Corner

  66. 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
  67. Shape Theming in MDC-Android shapeAppearanceSmallComponent shapeAppearanceMediumComponent shapeAppearanceLargeComponent

  68. Dark Theme

  69. Dark Theme <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> </style> res/values/themes.xml Option 1

  70. Dark Theme <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> </style> <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Dark”> </style>

    res/values/themes.xml res/values-night/themes.xml Option 1
  71. Dark Theme <style name=“Base.AppTheme” parent=“Theme.MaterialComponents.DayNight”> <item name=“colorPrimary”>@color/brand_green</item> </style> res/values/themes.xml Option

    2
  72. Dark Theme <style name=“Base.AppTheme” parent=“Theme.MaterialComponents.DayNight”> <item name=“colorPrimary”>@color/brand_green</item> </style> res/values/themes.xml res/values-night/colors.xml

    <resources> <color name="brand_green">#1DE9B6</color> </resources> res/values/colors.xml <resources> <color name="brand_green">#30BA85</color> </resources> Option 2
  73. https://speakerdeck.com/nickbutcher/developing-themes-with- style-7d0571e3-6008-4ec5-99c6-aa5669520124?slide=262

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

  75. Material Theme Builder Project for visualizing Material Theming

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

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

    shape.xml • color.xml • night/color.xml
  78. Designer Resources • https:/ /material.io/tools/theme-editor/

  79. 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/
  80. Q & A Material Components for Android : Make consistent

    user interface @Linminphyoe1