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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Kajornsak Peerapathananont
July 07, 2019
Programming
0
160
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
Full-Stack Development with FlutterFire
kajornsakp
0
7
How to build native-experience with cross-platform
kajornsakp
0
13
Understanding your Android build
kajornsakp
0
42
iOSDevTH #21
kajornsakp
0
53
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
82
Mobile Design System at scale
kajornsakp
0
140
What's new in Flutter 2020
kajornsakp
0
73
Mobile Machine Learning for All Skill Levels
kajornsakp
0
40
What's new in Flutter 1.9
kajornsakp
0
59
Other Decks in Programming
See All in Programming
Python’s True Superpower
hynek
0
190
New in Go 1.26 Implementing go fix in product development
sunecosuri
0
100
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
440
社内規程RAGの精度を73.3% → 100%に改善した話
oharu121
9
4.6k
AIコーディングの理想と現実 2026 | AI Coding: Expectations vs. Reality 2026
tomohisa
0
770
Swift ConcurrencyでよりSwiftyに
yuukiw00w
0
190
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1.1k
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
arthur1
2
400
モジュラモノリスにおける境界をGoのinternalパッケージで守る
magavel
0
3.3k
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
yokomachi
1
270
Raku Raku Notion 20260128
hareyakayuruyaka
0
420
浮動小数の比較について
kishikawakatsumi
0
360
Featured
See All Featured
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
310
Building an army of robots
kneath
306
46k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
64
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
280
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
450
Believing is Seeing
oripsolob
1
68
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
660
Joys of Absence: A Defence of Solitary Play
codingconduct
1
300
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
260
Code Reviewing Like a Champion
maltzj
527
40k
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