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
240
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
96
My Workspace [2020/06版]
umechanhika
0
41
Badging for Tabs and Bottom Navigation
umechanhika
0
330
Capture view and Register to gallery
umechanhika
0
48
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
530
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.5k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
110
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
500
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
630
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
エラーって何種類あるの?
kajitack
5
310
C++20 射影変換
faithandbrave
0
530
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Create a website using Spatial Web
akkeylab
0
300
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Facilitating Awesome Meetings
lara
54
6.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Making Projects Easy
brettharned
116
6.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Producing Creativity
orderedlist
PRO
346
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Speed Design
sergeychernyshev
32
1k
Statistics for Hackers
jakevdp
799
220k
Done Done
chrislema
184
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Practical Orchestrator
shlominoach
188
11k
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!