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
210
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
87
My Workspace [2020/06版]
umechanhika
0
33
Badging for Tabs and Bottom Navigation
umechanhika
0
300
Capture view and Register to gallery
umechanhika
0
42
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
500
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.5k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
110
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
480
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
610
Other Decks in Programming
See All in Programming
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
120
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
120
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
3.1k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
0
340
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
440
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
4.7k
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
150
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
190
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
680
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
220
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Invisible Side of Design
smashingmag
299
50k
For a Future-Friendly Web
brad_frost
176
9.5k
Why Our Code Smells
bkeepers
PRO
335
57k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Navigating Team Friction
lara
183
15k
A designer walks into a library…
pauljervisheath
205
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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!