Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MDC - Material Design Components & Theming


Published on

MDC introduced in Google I/O 18 event where is provides a comprehensive guidance to implement material design in any platforms including Android, iOS and Web which will give seamless user experience across all the platforms. Flutter also provides package to implement MDC components.

Published in: Software
  • Be the first to comment

MDC - Material Design Components & Theming

  1. 1. Material Design Components Material Theming Subir Chakraborty Harin Trivedi Useful for Android + iOS + Web
  2. 2. MDC Material Design Components
  3. 3. Components BottomAppBar Bottom NavigationBottomSheet Chips Collapsing Toolbar Floating Action Button Material ButtonMaterial Card Modal Bottom SheetNavigation Views Snackbars Tab layout Text Fields Top App Bars
  4. 4. Material Card MaterialCardView is a customizable component based on CardView from the Android Support Library. MaterialCardView provides all of the features of CardView, but adds attributes for customizing the stroke and uses an updated Material style by default. nents/material-card-view/
  5. 5. Material Button Material Button is a customizable button component with updated visual styles. Raised button: A rectangular material button that lifts and displays ink reactions on press Unelevated button: A button made of ink that displays ink reactions on press but does not lift
  6. 6. Styles Filled, elevated button (default): The default style represents an elevated button with a colored background. This should be used for important, final actions, like ‘Save’ or ‘Confirm’. style="@style/Widget.MaterialComponents.Button"
  7. 7. Styles Filled, unelevated button The UnelevatedButton style represents an unelevated button with a colored background. style="@style/Widget.MaterialComponents.Button. UnelevatedButton"
  8. 8. Styles Text button The TextButton style has a transparent background with colored text. Text buttons are used for low-priority actions, especially when presenting multiple options. style="@style/Widget.MaterialComponents.Button. TextButton"
  9. 9. Floating Action Buttons A FloatingActionButton displays the primary action in an application. It is a round icon button that’s elevated above other page content. The updated Material FloatingAction Button style consists of updated elevation, ripple, and motion changes. onents/floating-action-button/
  10. 10. Visibility Use the show and hide methods to animate the visibility of a FloatingActionButton. The show animation grows the widget and fades it in, while the hide animation shrinks the widget and fades it out.
  11. 11. Bottom App Barss BottomAppBar puts more focus on features, increases engagement, and visually anchors the UI. oid/components/bottom-app- bar/
  12. 12. BottomAppBar Attributes The placement of the FAB can be controlled by: fabAlignmentMode fabAttached fabCradleMargin fabCradleRoundedCornerRadius fabCradleVerticalOffset.
  13. 13. Handling Menu Option 2 ways to handle menu options: 1.setOnMenuItemClickListener (OnMenuItemClickListener) 2. setSupportActionBar() on the BottomAppBar. Handle navigation item click by checking if menu item id is
  14. 14. Text Fields s TextInputLayout provides an implementation for Material text fields. Used in conjunction with a TextInputEditText, TextInputLayout makes it easy to include Material text fields in your layouts. layout/
  15. 15. Material Styles Filled Box (Default) Filled text fields have a solid background color and draw more attention. Apply the following style to your TextInputLayout style="@style/Widget.Material Components.TextInputLayout. FilledBox"
  16. 16. Material Styles Outline Box Outline text fields have a stroked border. Apply the following style to your TextInputLayout style="@style/Widget.MaterialCo mponents.TextInputLayout. OutlineBox"
  17. 17. Style Variations 1.Standard 2.Dense In order to reduce the height of a text box, you can use a dense style, which will reduce the vertical padding within the text box. style="@style/Widget.MaterialComponents.TextInputLayout. FilledBox.Dense" style="@style/Widget.MaterialComponents.TextInputLayout. OutlineBox.Dense"
  18. 18. Snackbars The Snackbar disappear automatically, either after a timeout or after a user interaction elsewhere on the screen, and can also be swiped off the screen. Snackbars can also offer the ability to perform an action, such as undoing an action that was just taken, or retrying an action that had failed. /components/snackbar/
  19. 19. Usage Snackbars work best if they are displayed inside of a CoordinatorLayout. CoordinatorLayout allows the snackbar to enable behavior like swipe-to-dismiss, as well as automatically moving widgets like FloatingActionButton.
  20. 20. Chips A Chip represents a complex entity in a small block, such as a contact. It is a rounded button that consists of a label, an optional chip icon, and an optional close icon. A chip can either be clicked or toggled if it is checkable.
  21. 21. Entry Chips Filter Chips Action ChipsChoice Chips
  22. 22. ChipLayout Demo :
  23. 23. Material Theming
  24. 24. What & Why? Material Theming is the ability to systematically customize Material Design to better reflect your product’s brand Material Theming consists of three main actions: customizing your theme, applying it across your design mocks, and using it in code
  25. 25. UI - Color - Typography
  26. 26. Color Theming All Material Design components use a Widget.MaterialComponents style, and these styles reference color attributes from the Material Design theme (Theme.MaterialComponents).
  27. 27. Vision In a future update, our themes and components will be updated to reference a new set of color theming attributes. Then, all you need to do is update the color values for these attributes and you can: ➔ Adjust your component colors ➔ Switch between dark and light themes ➔ Ensure accessible color combinations across your app
  28. 28. Typography TextAppearance Styles includes: ● Font face name and weight ● Font size ● Letter spacing ● Text transformation
  29. 29. Shape Theming The shape library provides a MaterialShapeDrawable class that can draw custom shapes, draws itself using a path generator to easily building new shapes: ❏ CutCornerTreatment ❏ RoundedCornerTreatment ❏ TriangleEdgeTreatment
  30. 30. How to Integrate? Android: compileSdkVersion 'android-P' or 28 (Legacy) implementation '' (AndroidX) implementation '' iOS: pod 'MaterialComponents’ (All-in-one) pod 'MaterialComponents/Buttons' or pod 'MaterialComponents/TextFields'
  31. 31. References: 1. theming/overview.html#material-theming 2. (Includes codelabs for Android & iOS) 3. 4. 5.
  32. 32. Thank You ;) (Harry’s Lab)