Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shape Design with Material Components
Search
umechanhika
September 27, 2019
Programming
3
250
Shape Design with Material Components
Material ComponentsのShapeのガイドラインと、Shapeを用いてアプリを角丸デザインにした実例をご紹介します。
umechanhika
September 27, 2019
Tweet
Share
More Decks by umechanhika
See All by umechanhika
My Workspace [2020/08版]
umechanhika
0
97
My Workspace [2020/06版]
umechanhika
0
42
Badging for Tabs and Bottom Navigation
umechanhika
0
340
Capture view and Register to gallery
umechanhika
0
53
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
540
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.6k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
110
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
510
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
650
Other Decks in Programming
See All in Programming
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
950
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Ktorで簡単AIアプリケーション
tsukakei
0
110
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
320
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
130
CSC509 Lecture 06
javiergs
PRO
0
270
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
380
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
140
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
690
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
440
Introduce Hono CLI
yusukebe
6
3.1k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimizing for Happiness
mojombo
379
70k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Building Adaptive Systems
keathley
44
2.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Designing for humans not robots
tammielis
254
26k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Into the Great Unknown - MozCon
thekraken
40
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Transcript
Shape Design with Material Components
Hikaru Umetsu (@umechanhika) Individual developer Android & Flutter About me
Apps
The GOAL is to enable you to implement shape using
Material Components.
Introduction About shape Guideline How to implement Case study
About shape Customizable corners
Guideline
Usage
Emphasis
Identity
State
Branding
Attributes
Rounded Cut Shape family
Absolute Percentage Shape size
Categories
Small components
Medium components
Large components
Caution
Do. Donʼt. Absolute or Percentage
Full-screen components Donʼt use shape on the corners of full-screen
and expanded components.
How to implement
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>
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>
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>
Case study
About app Name: HappinessBank Concept: happiness/soft/warmth Adopt: Branding
Before After BottomAppBar
Before After BottomSheet
Before After SmallComponents
Summary Shape is the customizable corners. Usage of shape is
Emphasis, Identity, State, and Branding. You can customize it using styles.xml.
Thanks!