Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shape Design with Material Components

658634c5077d2652d14b6ba043d850f0?s=47 Umechan
September 27, 2019

Shape Design with Material Components

Material ComponentsのShapeのガイドラインと、Shapeを用いてアプリを角丸デザインにした実例をご紹介します。



September 27, 2019


  1. Shape Design with Material Components

  2. Hikaru Umetsu (@umechanhika) Individual developer Android & Flutter About me

  3. The GOAL is to enable you to implement shape using

    Material Components.
  4. Introduction About shape Guideline How to implement Case study

  5. About shape Customizable corners

  6. Guideline

  7. Usage

  8. Emphasis

  9. Identity

  10. State

  11. Branding

  12. Attributes

  13. Rounded Cut Shape family

  14. Absolute Percentage Shape size

  15. Categories

  16. Small components

  17. Medium components

  18. Large components

  19. Caution

  20. Do. Donʼt. Absolute or Percentage

  21. Full-screen components Donʼt use shape on the corners of full-screen

    and expanded components.
  22. How to implement

  23. Apply categories <style name="SmallCompShapeAppearance" parent="ShapeAppearance.MaterialComponents.SmallComponent"> <item name="cornerFamily">cut</item> <item name="cornerSize">4dp</item> </style>

    <style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> ... <item name="shapeAppearanceSmallComponent">@style/SmallCompShapeAppearance</item> ... </style>
  24. Apply components <style name="CardViewShapeAppearanceOverlay"> <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item> </style> <style

    name="CardViewStyle" parent="Widget.MaterialComponents.MaterialCardView"> <item name="shapeAppearanceOverlay">@style/CardViewShapeAppearanceOverlay</item> </style> <style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> ... <item name="materialCardViewStyle">@style/CardViewStyle</item> ... </style>
  25. Apply individual component <style name="CardViewShapeAppearanceOverlay"> <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item> </style>

    <com.google.android.material.card.MaterialCardView android:layout_width="match_parent" android:layout_height="wrap_content" app:shapeAppearanceOverlay="@style/CardViewShapeAppearanceOverlay"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/card_text"/> </com.google.android.material.card.MaterialCardView>
  26. Case study

  27. About app Name: HappinessBank Concept: happiness/soft/warmth Adopt: Branding

  28. Before After BottomAppBar

  29. Before After BottomSheet

  30. Before After SmallComponents

  31. Summary Shape is the customizable corners. Usage of shape is

    Emphasis, Identity, State, and Branding. You can customize it using styles.xml.
  32. Thanks!