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
29
iOSDevTH #21
kajornsakp
0
35
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
52
Mobile Design System at scale
kajornsakp
0
75
What's new in Flutter 2020
kajornsakp
0
53
Mobile Machine Learning for All Skill Levels
kajornsakp
0
26
What's new in Flutter 1.9
kajornsakp
0
47
Kotlin meets Web
kajornsakp
0
19
ML Kit : Face contour detection
kajornsakp
0
30
Other Decks in Programming
See All in Programming
Introduction to kotlinx.rpc
arawn
0
630
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
WebDriver BiDiとは何なのか
yotahada3
1
140
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Scaling GitHub
holman
459
140k
Code Reviewing Like a Champion
maltzj
521
39k
Side Projects
sachag
452
42k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Building Adaptive Systems
keathley
40
2.4k
How STYLIGHT went responsive
nonsquared
98
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
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