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
120
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
26
iOSDevTH #21
kajornsakp
0
25
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
48
Mobile Design System at scale
kajornsakp
0
68
What's new in Flutter 2020
kajornsakp
0
49
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
18
ML Kit : Face contour detection
kajornsakp
0
29
Other Decks in Programming
See All in Programming
僕がつくった48個のWebサービス達
yusukebe
20
17k
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
2
1k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
4.1k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
230
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
470
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
380
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
480
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
120
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
480
Tuning GraphQL on Rails
pyama86
2
1.2k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Six Lessons from altMBA
skipperchong
26
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Teambox: Starting and Learning
jrom
133
8.8k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Producing Creativity
orderedlist
PRO
341
39k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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