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
42
Badging for Tabs and Bottom Navigation
umechanhika
0
340
Capture view and Register to gallery
umechanhika
0
49
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
540
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.5k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
110
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
510
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
640
Other Decks in Programming
See All in Programming
What's new in Adaptive Android development
fornewid
0
120
コーディングエージェント概観(2025/07)
itsuki_t88
0
450
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
Comparing decimals in Swift Testing
417_72ki
0
130
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
330
Gemini CLI のはじめ方
ttnyt8701
1
110
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
830
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.5k
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
670
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Agile that works and the tools we love
rasmusluckow
329
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
A Tale of Four Properties
chriscoyier
160
23k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Language of Interfaces
destraynor
158
25k
Adopting Sorbet at Scale
ufuk
77
9.5k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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!