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
26
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
52
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
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
subpath importsで始めるモック生活
10tera
0
310
Quine, Polyglot, 良いコード
qnighy
4
650
距離関数を極める! / SESSIONS 2024
gam0022
0
290
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
CSC509 Lecture 13
javiergs
PRO
0
110
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
Writing Fast Ruby
sferik
627
61k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Navigating Team Friction
lara
183
14k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Into the Great Unknown - MozCon
thekraken
32
1.5k
A Philosophy of Restraint
colly
203
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
How STYLIGHT went responsive
nonsquared
95
5.2k
Designing for humans not robots
tammielis
250
25k
It's Worth the Effort
3n
183
27k
A designer walks into a library…
pauljervisheath
204
24k
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