Shape Design with Material Components

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

Transcript

1. Shape Design with Material Components
2. Hikaru Umetsu (@umechanhika) Individual developer Android & Flutter About me Apps
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!