Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
From design to develop with Material Components
Search
Kajornsak Peerapathananont
July 07, 2019
Programming
0
150
From design to develop with Material Components
Android Bangkok Conference 2019
Kajornsak Peerapathananont
July 07, 2019
Tweet
Share
More Decks by Kajornsak Peerapathananont
See All by Kajornsak Peerapathananont
Understanding your Android build
kajornsakp
0
41
iOSDevTH #21
kajornsakp
0
45
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
71
Mobile Design System at scale
kajornsakp
0
87
What's new in Flutter 2020
kajornsakp
0
64
Mobile Machine Learning for All Skill Levels
kajornsakp
0
34
What's new in Flutter 1.9
kajornsakp
0
53
Kotlin meets Web
kajornsakp
0
22
ML Kit : Face contour detection
kajornsakp
0
41
Other Decks in Programming
See All in Programming
AWS CDKの推しポイントN選
akihisaikeda
1
240
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
360
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
zozotech
PRO
8
4.4k
関数実行の裏側では何が起きているのか?
minop1205
1
640
ViewファーストなRailsアプリ開発のたのしさ
sugiwe
0
410
AIエージェントを活かすPM術 AI駆動開発の現場から
gyuta
0
280
Querying Design System デザインシステムの意思決定を支える構造検索
ikumatadokoro
1
1.3k
手軽に積ん読を増やすには?/読みたい本と付き合うには?
o0h
PRO
1
150
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
290
Level up your Gemini CLI - D&D Style!
palladius
1
180
Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025
marcoroth
0
250
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
5
1.8k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Site-Speed That Sticks
csswizardry
13
990
How to Ace a Technical Interview
jacobian
280
24k
For a Future-Friendly Web
brad_frost
180
10k
[RailsConf 2023] Rails as a piece of cake
palkan
58
6.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Faster Mobile Websites
deanohume
310
31k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Transcript
From design to develop with Material Components
What is Material Design
Google I/O 2014
None
Google I/O 2018
None
Design
Material Theming
None
Foundation
Material Foundation • Color • Typography • Iconography • Layout
• Shape • Motion (Animation)
None
None
None
None
Develop
Adding dependency implementation 'com.google.android.material:material:1.1.0-alpha07' repositories { google() jcenter() }
Requirements - compileSdkVersion 28 - using AppCompatActivity - using Theme.MaterialComponents
Theme Theme.MaterialComponents Theme.MaterialComponents.NoActionBar Theme.MaterialComponents.Light Theme.MaterialComponents.Light.NoActionBar Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.DayNight Theme.MaterialComponents.DayNight.NoActionBar Theme.MaterialComponents.DayNight.DarkActionBar
Theme Bridge Theme.MaterialComponents.Bridge Theme.MaterialComponents.Light.Bridge Theme.MaterialComponents.NoActionBar.Bridge Theme.MaterialComponents.Light.NoActionBar.Bridge Theme.MaterialComponents.Light.DarkActionBar.Bridge
Theming
Theming • Color Theming • Shape Theming • Typography Theming
• Dark Theme*
None
Color Theming
Color Theming
None
Shape Theming
Shape Theming
None
Typography Theming
Typography Theming
Dark Theme* res/values/color.xml res/values-night/color.xml
None
Components
Alert Dialog
Bottom App Bar bottomAppBar.replaceMenu(R.menu.bottom_app_bar_menu)
Material Button
And more….. https://material.io/develop/android/components
None
How’s about MDC in 2019?
ML-powered features
Camera - Barcode scanning
Camera - Live Object detection
Photos - Object detection
Tools
Material Theme Editor
None
Material Theme Builder
https://material-theme-builder.glitch.me
None
Color Tool
None
Icon
None
Interested?
https://material.io/
https://material.io/collections/developer-tutorials