Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to implement Material Design

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for ymnder ymnder
March 27, 2018
Programming
800
1

How to implement Material Design

Androidエンジニア デザイン部 #1 2018/03/28 @ymnd
https://nohana.connpass.com/event/80530/

Avatar for ymnder

ymnder

March 27, 2018

More Decks by ymnder

See All by ymnder
What’s new in Google Play's billing system
Avatar for ymnder ymnder
1
400
Deep Linksをはじめよう
Avatar for ymnder ymnder
0
490
Introduction to Wear OS Application Development
Avatar for ymnder ymnder
0
590
CircleCIを使ったAndroidの開発フローの効率化とtips
Avatar for ymnder ymnder
1
1.4k
Introduction to new features of Google Play Billing
Avatar for ymnder ymnder
2
350
運用から学ぶPlay Billing Library
Avatar for ymnder ymnder
2
780
What’s new in Google Play Billing v1.2
Avatar for ymnder ymnder
0
770
詳解定期購入
Avatar for ymnder ymnder
7
6.8k
社内向けライブラリを設計・運用する話
Avatar for ymnder ymnder
0
1.2k

Other Decks in Programming

See All in Programming
空間オーディオの活用
Avatar for Yuki Yasoshima objectiveaudio
0
150
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
Avatar for Marco Roth marcoroth
0
720
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
470
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
Avatar for Takashi Kokubun k0kubun
3
3.1k
AgentCore Optimizationを始めよう！
Avatar for matsukada licux
3
240
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
390
Spec Driven Development | AI Summit Vilnius
Avatar for Daniel Sogl danielsogl
PRO
1
160
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
Surviving Black Friday: 329 billion requests with Falcon!
Avatar for Samuel Williams ioquatix
0
3.2k
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
Avatar for Ryosuke Shimizu (RIO) rio432
0
160
ハーネスエンジニアリングとは？
Avatar for kinopee kinopeee
13
7k
2026年のソフトウェア開発を考える（2026/05版） / Software Engineering Scrum Fest Niigata 2026 Edition
Avatar for Takuto Wada twada
PRO
23
13k

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
360
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.5k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
530
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
230
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
780
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k

Transcript

  1. How to implement Material Design AndroidΤϯδχΞ σβΠϯ෦ #1 2018/03/28 @ymnd

  2. ࠓ೔ͷ͓඼ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 2

  3. Ͳ͏΍ͬͯσβΠϯΛ੡඼ʹ ࣮૷ͯ͠·͔͢

  4. ͨͱ͑͹͜ΜͳλεΫ • ݕࡧը໘ΛϚςϦΞϧσβΠϯԽ͢Δ • શ໘తʹελΠϧΛݟ௚͢ • ৭ʗ༨നʗॻମʗΞΠίϯɾɾɾɾ • ݕࡧલʹཤྺ΍ϗοτΩʔϫʔυΛදࣔ͢Δ •

    ݕࡧը໘ʹೖͬͨͱ͖ʹϗοτΩʔϫʔυΛදࣔ • ݕࡧBoxΛλοϓͯ͠ཤྺΛදࣔ 4

  5. ࣗ෼ͷྗͰ σβΠϯ͍ͯ͘͠

  6. None

  7. ΍͍͖ͬͯͩʂʂʂ

  8. ࠓ೔ͷ͓඼ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 8

  9. ᶃࣄલௐࠪ • ઌߦࣄྫΛൺֱ͢Δ • ͍ΖΜͳΞϓϦΛ৮ͬͯΈΔ • ݕࡧػೳΛ࢖ͬͯεΫγϣΛूΊΔ 9

  10. ᶃࣄલௐࠪͷ࣮ྫ 10

  11. ࠓ೔ͷ͓඼ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 11

  12. ᶄΨΠυϥΠϯͷ֬ೝ • ΨΠυϥΠϯΛݟʹߦ͘ • ࣄલʹҰ௨Γ໨Λ௨͓ͯ͘͜͠ͱ • ̍ͭͷը໘Λͭ͘Δʹࡍͯ͠΋ߟྀࣄ߲͸ͨ͘͞Μ͋Δ • Patterns/Search •

    Components/Lists • Style/Color • Style/Icons 12

  13. ᶄΨΠυϥΠϯͷ֬ೝͷ࣮ྫ • ݕࡧɺϦετɺΞΠίϯɺϑΥϯτͷଠ͞ɺ৭ຯ ←ΫϦΞϘλϯͷେ͖͞ʗ༨ന͸ʁ ←ςΩετͷϘτϜҐஔ ←ελΠϧ͸Boldʁ ←ྻͷdp͸ʁ ϚςϦΞϧΞΠίϯ͸ʁˠ େ͖͞ͱҐஔ͸ʁˠ ৭͸ςΩετΑΓೱ͍ʁˠ

    ଞͷΞΠίϯͷྫ͸ʁˠ ←ંฦ͠͸ߟྀ͢΂͖ʁ ←dividerͷ৭͸ʁଠ͞͸ʁ ←ݟग़͠͸Ͳ͏͍ΕΔ͔ ɹʢଞͷΞΠςϜͷ૝ఆʣ ςΩετͱͲΕ͘Β͍཭͢ʁˠ ←ϑΥϯταΠζ͸ʁ 13

  14. ࠓ೔ͷ͓඼ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 14

  15. ᶅσβΠϯͷ۩ମԽ • SketchͰෳ਺ҊΛඳ͍ͯνʔϜͰ૬ஊ͢Δ 15

  16. ࠓ೔ͷ͓඼ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 16

  17. ᶆσόοά࡞ۀ • σόοάͷ௕͍௕͍ಓͷΓ • ૊ΈํΛؒҧ͔ͬͨͳʁ • Ґஔ͕ἧΘͳ͍ଞ • ୺຤໰୊ •

    Կނ͔ಛఆ୺຤ͰͷΈڍಈ͕ҧ͏ • OSόʔδϣϯ໰୊ • Կނ͔̐ܥ่͚ͩΕΔ • λονϑΟʔυόοΫରԠ 17

  18. ᶆσόοά࡞ۀ • LayoutInspector • Stetho • ։ൃऀπʔϧ • Sketch 18

  19. ᶆσόοά࡞ۀ(LayoutInspector) • AndroidStudio > Tools > Layout Inspector • ViewHierarchyͱ֤ཁૉͷঢ়ଶΛ֬ೝͰ͖Δ

    • ViewͷVisibility΍Themeɺ༨നɺେ͖͞ͳͲ 19

  20. ᶆσόοά࡞ۀ(LayoutInspector)

  21. ᶆσόοά࡞ۀ(LayoutInspector) View Tree

  22. ᶆσόοά࡞ۀ(LayoutInspector) View Properties

  23. ᶆσόοά࡞ۀ(Stetho) • http://facebook.github.io/stetho/ • ChromeDeveloperToolsΛར༻͠CSS-likeʹ֬ೝͰ͖Δ • TextΛϦΞϧλΠϜͰૢ࡞͢Δ͜ͱ͕Ͱ͖Δ • ௕͘ͳͬͨ৔߹ͷݟͨ໨ΛνΣοΫͰ͖Δ 23

  24. ᶆσόοά࡞ۀ(Stetho)

  25. ᶆσόοά࡞ۀ(Stetho) View Tree

  26. ᶆσόοά࡞ۀ(Stetho) View Properties

  27. ᶆσόοά࡞ۀ(Stetho)

  28. ᶆσόοά࡞ۀ(Stetho)

  29. ᶆσόοά࡞ۀ(Stetho) text෦෼Λબ୒ˍೖྗ

  30. ᶆσόοά࡞ۀ(Stetho)

  31. ᶆσόοά࡞ۀ(Stetho)

  32. ᶆσόοά࡞ۀ(։ൃऀπʔϧ) • ઃఆ > ։ൃऀ޲͚Φϓγϣϯ > ϨΠΞ΢τڥքΛදࣔ • ڥ໨͕Ͳ͜ʹ͋Δ͔ܶతʹ෼͔Γ΍͘͢ͳΔ 32

  33. ᶆσόοά࡞ۀ(Sketch) • σβΠϯҊʹεΫγϣΛॏͶͯඍௐ੔Λ܁Γฦ͢ • OpacityΛ80%ʹͯ͠ॏͶΔ 33

  34. Ͱ͖͕͋Γ 34

  35. whoami • twitter:@ymnd, github:@ymnder • Application Engineer • Android ೔ܦిࢠ൛ΞϓϦ

    • Android ࢴ໘ϏϡʔΞʔΞϓϦ • ٕज़ॻయ̐Ͱ೔ܦిࢠ൛ͷ஌ݟΛ·ͱΊͨຊΛग़͠·͢ɻ 35

  36. Design΍͍͖ͬͯ