Shape Design with Material Components

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

Transcript

1. Shape Design
   with
   Material Components
   

   View Slide

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

   View Slide

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

   View Slide

4. Introduction
   About shape
   Guideline
   How to implement
   Case study
   

   View Slide

5. About shape
   Customizable corners
   

   View Slide

6. Guideline
   

   View Slide

7. Usage
   

   View Slide

8. Emphasis
   

   View Slide

9. Identity
   

   View Slide

10. State
    

    View Slide

11. Branding
    

    View Slide

12. Attributes
    

    View Slide

13. Rounded Cut
    Shape family
    

    View Slide

14. Absolute Percentage
    Shape size
    

    View Slide

15. Categories
    

    View Slide

16. Small components
    

    View Slide

17. Medium components
    

    View Slide

18. Large components
    

    View Slide

19. Caution
    

    View Slide

20. Do. Donʼt.
    Absolute or Percentage
    

    View Slide

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

    View Slide

22. How to implement
    

    View Slide

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

    View Slide

24. Apply components
    <br/><item name="cornerFamily">rounded</item><br/><item name="cornerSize">16dp</item><br/>
    <br/><item name="shapeAppearanceOverlay">@style/CardViewShapeAppearanceOverlay</item><br/>
    <br/>...<br/><item name="materialCardViewStyle">@style/CardViewStyle</item><br/>...<br/>
    

    View Slide

25. Apply individual component
    <br/><item name="cornerFamily">rounded</item><br/><item name="cornerSize">16dp</item><br/>
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:shapeAppearanceOverlay="@style/CardViewShapeAppearanceOverlay">
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/card_text"/>
    
    

    View Slide

26. Case study
    

    View Slide

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

    View Slide

28. Before After
    BottomAppBar
    

    View Slide

29. Before After
    BottomSheet
    

    View Slide

30. Before After
    SmallComponents
    

    View Slide

31. Summary
    Shape is the customizable corners.
    Usage of shape is Emphasis, Identity, State, and Branding.
    You can customize it using styles.xml.
    

    View Slide

32. Thanks!
    

    View Slide