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

Shape Design with Material Components

umechanhika
September 27, 2019

Shape Design with Material Components

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

umechanhika

September 27, 2019
Tweet

More Decks by umechanhika

Other Decks in Programming

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