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. 2.

    Who am I ? Lin Min Phyo @Linminphyoe1 Senior Android

    Developer Product, UI/UX, Software Architectures
  2. 8.

    History of Material Design Problem • Apps look very similar

    • Lack of expressiveness for branding
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 22.
  12. 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
  13. 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
  14. 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
  15. 29.

    Add Material Components to project dependencies { // AndroidX implementation

    ‘com.google.android.material:material:<version>’ }
  16. 30.

    Add Material Components to project dependencies { // AndroidX implementation

    ‘com.google.android.material:material:<version>’ }
  17. 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' }
  18. 34.
  19. 35.
  20. 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
  21. 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
  22. 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
  23. 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>
  24. 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>
  25. 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>
  26. 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
  27. 54.
  28. 56.
  29. 57.
  30. 58.
  31. 59.

    Typography Theming in MDC-Android textAppearanceHeadline1 textAppearanceHeadline2 textAppearanceHeadline3 textAppearanceHeadline4 textAppearanceHeadline5 textAppearanceHeadline6

    textAppearanceSubtitle1 textAppearanceSubtitle2 textAppearanceBody1 textAppearanceBody2 textAppearanceButton textAppearanceCaption textAppearanceOverline
  32. 61.
  33. 62.

    Color Theming in MDC-Android colorPrimary colorPrimaryVariant colorSecondary colorSecondaryVariant android:colorBackground colorSurface

    colorError colorOnPrimary colorOnSecondary colorOnBackground colorOnSurface colorOnError
  34. 64.
  35. 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
  36. 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
  37. 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/