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
75
My Workspace [2020/06版]
umechanhika
0
25
Badging for Tabs and Bottom Navigation
umechanhika
0
230
Capture view and Register to gallery
umechanhika
0
38
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
440
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.3k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
95
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
450
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
530
Other Decks in Programming
See All in Programming
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
TCA魔法学入門🪄
dazy
0
280
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
10k
Open Source Swiftc Workshop
kitasuke
1
180
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.4k
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.5k
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.7k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
What the flash - Photography Introduction
edds
64
11k
We Have a Design System, Now What?
morganepeng
42
6.7k
Typedesign – Prime Four
hannesfritz
36
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Design by the Numbers
sachag
274
18k
Agile that works and the tools we love
rasmusluckow
323
20k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
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!