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
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
時計仕掛けのCompose
mkeeda
1
280
Formの複雑さに立ち向かう
bmthd
1
720
SwiftUI Viewの責務分離
elmetal
PRO
0
140
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Domain-Driven Transformation
hschwentner
2
1.9k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
98
5.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Language of Interfaces
destraynor
156
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Code Reviewing Like a Champion
maltzj
521
39k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Six Lessons from altMBA
skipperchong
27
3.6k
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