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
From design to develop with Material Components
Search
Kajornsak Peerapathananont
July 07, 2019
Programming
0
130
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
30
iOSDevTH #21
kajornsakp
0
37
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
53
Mobile Design System at scale
kajornsakp
0
78
What's new in Flutter 2020
kajornsakp
0
57
Mobile Machine Learning for All Skill Levels
kajornsakp
0
29
What's new in Flutter 1.9
kajornsakp
0
48
Kotlin meets Web
kajornsakp
0
20
ML Kit : Face contour detection
kajornsakp
0
31
Other Decks in Programming
See All in Programming
JAWS Days 2025のインフラ
komakichi
1
260
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.2k
AIプログラミング雑キャッチアップ
yuheinakasaka
19
5k
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
150
sappoRo.R #12 初心者セッション
kosugitti
0
280
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
290
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
180
Swift Testingのモチベを上げたい
stoticdev
2
190
color-scheme: light dark; を完全に理解する
uhyo
7
500
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
160
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
250
Featured
See All Featured
Side Projects
sachag
452
42k
GraphQLとの向き合い方2022年版
quramy
44
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Docker and Python
trallard
44
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Speed Design
sergeychernyshev
27
820
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.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