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
How to implement Material Design
Search
ymnder
March 27, 2018
Programming
1
780
How to implement Material Design
Androidエンジニア デザイン部 #1 2018/03/28 @ymnd
https://nohana.connpass.com/event/80530/
ymnder
March 27, 2018
Tweet
Share
More Decks by ymnder
See All by ymnder
What’s new in Google Play's billing system
ymnder
1
340
Deep Linksをはじめよう
ymnder
0
400
Introduction to Wear OS Application Development
ymnder
0
520
CircleCIを使ったAndroidの開発フローの効率化とtips
ymnder
1
1.4k
Introduction to new features of Google Play Billing
ymnder
2
320
運用から学ぶPlay Billing Library
ymnder
2
740
What’s new in Google Play Billing v1.2
ymnder
0
720
詳解定期購入
ymnder
7
6.4k
社内向けライブラリを設計・運用する話
ymnder
0
1.1k
Other Decks in Programming
See All in Programming
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
AIともっと楽するE2Eテスト
myohei
8
2.9k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
870
PicoRuby on Rails
makicamel
2
140
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
GPUを計算資源として使おう!
primenumber
1
200
What's new in AppKit on macOS 26
1024jp
0
140
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
240
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
560
Featured
See All Featured
It's Worth the Effort
3n
185
28k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
A better future with KSS
kneath
238
17k
Bash Introduction
62gerente
613
210k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
A designer walks into a library…
pauljervisheath
207
24k
Designing Experiences People Love
moore
142
24k
Making Projects Easy
brettharned
116
6.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Transcript
How to implement Material Design AndroidΤϯδχΞ σβΠϯ෦ #1 2018/03/28 @ymnd
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 2
Ͳ͏ͬͯσβΠϯΛʹ ࣮ͯ͠·͔͢
ͨͱ͑͜ΜͳλεΫ • ݕࡧը໘ΛϚςϦΞϧσβΠϯԽ͢Δ • શ໘తʹελΠϧΛݟ͢ • ৭ʗ༨നʗॻମʗΞΠίϯɾɾɾɾ • ݕࡧલʹཤྺϗοτΩʔϫʔυΛදࣔ͢Δ •
ݕࡧը໘ʹೖͬͨͱ͖ʹϗοτΩʔϫʔυΛදࣔ • ݕࡧBoxΛλοϓͯ͠ཤྺΛදࣔ 4
ࣗͷྗͰ σβΠϯ͍ͯ͘͠
None
͍͖ͬͯͩʂʂʂ
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 8
ᶃࣄલௐࠪ • ઌߦࣄྫΛൺֱ͢Δ • ͍ΖΜͳΞϓϦΛ৮ͬͯΈΔ • ݕࡧػೳΛͬͯεΫγϣΛूΊΔ 9
ᶃࣄલௐࠪͷ࣮ྫ 10
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 11
ᶄΨΠυϥΠϯͷ֬ೝ • ΨΠυϥΠϯΛݟʹߦ͘ • ࣄલʹҰ௨ΓΛ௨͓ͯ͘͜͠ͱ • ̍ͭͷը໘Λͭ͘Δʹࡍͯ͠ߟྀࣄ߲ͨ͘͞Μ͋Δ • Patterns/Search •
Components/Lists • Style/Color • Style/Icons 12
ᶄΨΠυϥΠϯͷ֬ೝͷ࣮ྫ • ݕࡧɺϦετɺΞΠίϯɺϑΥϯτͷଠ͞ɺ৭ຯ ←ΫϦΞϘλϯͷେ͖͞ʗ༨നʁ ←ςΩετͷϘτϜҐஔ ←ελΠϧBoldʁ ←ྻͷdpʁ ϚςϦΞϧΞΠίϯʁˠ େ͖͞ͱҐஔʁˠ ৭ςΩετΑΓೱ͍ʁˠ
ଞͷΞΠίϯͷྫʁˠ ←ંฦ͠ߟྀ͖͢ʁ ←dividerͷ৭ʁଠ͞ʁ ←ݟग़͠Ͳ͏͍ΕΔ͔ ɹʢଞͷΞΠςϜͷఆʣ ςΩετͱͲΕ͘Β͍͢ʁˠ ←ϑΥϯταΠζʁ 13
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 14
ᶅσβΠϯͷ۩ମԽ • SketchͰෳҊΛඳ͍ͯνʔϜͰ૬ஊ͢Δ 15
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 16
ᶆσόοά࡞ۀ • σόοάͷ͍͍ಓͷΓ • ΈํΛؒҧ͔ͬͨͳʁ • Ґஔ͕ἧΘͳ͍ଞ • •
Կނ͔ಛఆͰͷΈڍಈ͕ҧ͏ • OSόʔδϣϯ • Կނ͔̐ܥ่͚ͩΕΔ • λονϑΟʔυόοΫରԠ 17
ᶆσόοά࡞ۀ • LayoutInspector • Stetho • ։ൃऀπʔϧ • Sketch 18
ᶆσόοά࡞ۀ(LayoutInspector) • AndroidStudio > Tools > Layout Inspector • ViewHierarchyͱ֤ཁૉͷঢ়ଶΛ֬ೝͰ͖Δ
• ViewͷVisibilityThemeɺ༨നɺେ͖͞ͳͲ 19
ᶆσόοά࡞ۀ(LayoutInspector)
ᶆσόοά࡞ۀ(LayoutInspector) View Tree
ᶆσόοά࡞ۀ(LayoutInspector) View Properties
ᶆσόοά࡞ۀ(Stetho) • http://facebook.github.io/stetho/ • ChromeDeveloperToolsΛར༻͠CSS-likeʹ֬ೝͰ͖Δ • TextΛϦΞϧλΠϜͰૢ࡞͢Δ͜ͱ͕Ͱ͖Δ • ͘ͳͬͨ߹ͷݟͨΛνΣοΫͰ͖Δ 23
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho) View Tree
ᶆσόοά࡞ۀ(Stetho) View Properties
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho) text෦Λબˍೖྗ
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(։ൃऀπʔϧ) • ઃఆ > ։ൃऀ͚Φϓγϣϯ > ϨΠΞτڥքΛදࣔ • ڥ͕Ͳ͜ʹ͋Δ͔ܶతʹ͔Γ͘͢ͳΔ 32
ᶆσόοά࡞ۀ(Sketch) • σβΠϯҊʹεΫγϣΛॏͶͯඍௐΛ܁Γฦ͢ • OpacityΛ80%ʹͯ͠ॏͶΔ 33
Ͱ͖͕͋Γ 34
whoami • twitter:@ymnd, github:@ymnder • Application Engineer • Android ܦిࢠ൛ΞϓϦ
• Android ࢴ໘ϏϡʔΞʔΞϓϦ • ٕज़ॻయ̐Ͱܦిࢠ൛ͷݟΛ·ͱΊͨຊΛग़͠·͢ɻ 35
Design͍͖ͬͯ