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
84
My Workspace [2020/06版]
umechanhika
0
28
Badging for Tabs and Bottom Navigation
umechanhika
0
270
Capture view and Register to gallery
umechanhika
0
42
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
470
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.4k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
97
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
460
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
560
Other Decks in Programming
See All in Programming
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
CSC307 Lecture 06
javiergs
PRO
0
360
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
유연한 Composable 설계
l2hyunwoo
0
380
生成AIをkintoneに連携してみた
hideg
0
230
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Terraformテスト入門
msato
0
520
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Code Reviewing Like a Champion
maltzj
517
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Building an army of robots
kneath
301
42k
Why Our Code Smells
bkeepers
PRO
332
56k
Designing Experiences People Love
moore
136
23k
Gamification - CAS2011
davidbonilla
78
4.9k
How to Ace a Technical Interview
jacobian
274
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Designing for Performance
lara
604
67k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
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!