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
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Rails アプリ地図考 Flush Cut
makicamel
1
110
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Designing for Performance
lara
604
68k
KATA
mclloyd
29
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
797
220k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Adopting Sorbet at Scale
ufuk
74
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