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
25
iOSDevTH #21
kajornsakp
0
20
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
47
Mobile Design System at scale
kajornsakp
0
64
What's new in Flutter 2020
kajornsakp
0
49
Mobile Machine Learning for All Skill Levels
kajornsakp
0
24
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
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Some more adventure of Happy Eyeballs
coe401_
2
190
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Jakarta EE meets AI
ivargrimstad
1
520
A New Era of Testing
mannodermaus
2
510
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
810
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
472
290k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Documentation Writing (for coders)
carmenintech
65
4.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
The Language of Interfaces
destraynor
153
23k
Navigating Team Friction
lara
183
13k
Done Done
chrislema
180
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.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