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
86
My Workspace [2020/06版]
umechanhika
0
32
Badging for Tabs and Bottom Navigation
umechanhika
0
280
Capture view and Register to gallery
umechanhika
0
42
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
490
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.4k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
100
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
470
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
580
Other Decks in Programming
See All in Programming
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
180
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
130
Pydantic x Database API:turu-pyの開発
yassun7010
1
380
AWS Lambda Web Adapterを活用する新しいサーバーレスの実装パターン
tmokmss
6
5.4k
Infrastructure as Code でセキュリティを楽にしよう!
konokenj
5
1.4k
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
100
コードレビューと私の過去と未来
jxmtst
0
150
Quarto Clean Theme
nicetak
0
220
Applied NLP in the Age of Generative AI
inesmontani
PRO
3
1.1k
5年分のツケを一気に払った話
soogie
3
1k
Removing Corepack
yosuke_furukawa
PRO
9
1.1k
CSC305 Lecture 01
javiergs
PRO
1
140
Featured
See All Featured
Code Review Best Practice
trishagee
62
16k
How to Think Like a Performance Engineer
csswizardry
16
1k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Debugging Ruby Performance
tmm1
73
12k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Art, The Web, and Tiny UX
lynnandtonic
295
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Statistics for Hackers
jakevdp
796
220k
Building Adaptive Systems
keathley
37
2.1k
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!