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
Six and a half ridiculous things to do with Quarkus
hollycummins
0
130
開発生産性を上げるための生成AI活用術
starfish719
1
200
Swift Concurrency - 状態監視の罠
objectiveaudio
2
480
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
860
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
150
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
790
CSC509 Lecture 02
javiergs
PRO
0
410
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
110
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
650
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
760
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
940
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Speed Design
sergeychernyshev
32
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
For a Future-Friendly Web
brad_frost
180
9.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Unsuck your backbone
ammeep
671
58k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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!