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
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.4k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
100
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
470
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
600
Other Decks in Programming
See All in Programming
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
270
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
140
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.9k
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
750
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170
CSC509 Lecture 14
javiergs
PRO
0
130
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
240
Criando Commits Incríveis no Git
marcelgsantos
2
170
Full stack testing :: basic to basic
up1
1
930
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
670
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Mobile First: as difficult as doing things right
swwweet
222
9k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
A designer walks into a library…
pauljervisheath
204
24k
Music & Morning Musume
bryan
46
6.2k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Being A Developer After 40
akosma
87
590k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
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!