Shape Design with Material Components

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Introduction About shape Guideline How to implement Case study

Slide 5

Slide 5 text

About shape Customizable corners

Slide 6

Slide 6 text

Guideline

Slide 7

Slide 7 text

Usage

Slide 8

Slide 8 text

Emphasis

Slide 9

Slide 9 text

Identity

Slide 10

Slide 10 text

State

Slide 11

Slide 11 text

Branding

Slide 12

Slide 12 text

Attributes

Slide 13

Slide 13 text

Rounded Cut Shape family

Slide 14

Slide 14 text

Absolute Percentage Shape size

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Small components

Slide 17

Slide 17 text

Medium components

Slide 18

Slide 18 text

Large components

Slide 19

Slide 19 text

Caution

Slide 20

Slide 20 text

Do. Donʼt. Absolute or Percentage

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

How to implement

Slide 23

Slide 23 text

Apply categories <item name="cornerFamily">cut</item> <item name="cornerSize">4dp</item> ... <item name="shapeAppearanceSmallComponent">@style/SmallCompShapeAppearance</item> ...

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Apply individual component <item name="cornerFamily">rounded</item> <item name="cornerSize">16dp</item>

Slide 26

Slide 26 text

Case study

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Before After BottomAppBar

Slide 29

Slide 29 text

Before After BottomSheet

Slide 30

Slide 30 text

Before After SmallComponents

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Thanks!