Shape Design with Material Components

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!