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
220
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
88
My Workspace [2020/06版]
umechanhika
0
33
Badging for Tabs and Bottom Navigation
umechanhika
0
310
Capture view and Register to gallery
umechanhika
0
44
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
510
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
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Ruby on cygwin 2025-02
fd0
0
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Software Architecture
hschwentner
6
2.1k
DROBEの生成AI活用事例 with AWS
ippey
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Building Applications with DynamoDB
mza
93
6.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Why Our Code Smells
bkeepers
PRO
335
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
A better future with KSS
kneath
238
17k
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!