Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

How to implement Material Design

Avatar for ymnder ymnder
March 27, 2018
Programming
830
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
430
Deep Linksをはじめよう
Avatar for ymnder ymnder
0
530
Introduction to Wear OS Application Development
Avatar for ymnder ymnder
0
630
CircleCIを使ったAndroidの開発フローの効率化とtips
Avatar for ymnder ymnder
1
1.5k
Introduction to new features of Google Play Billing
Avatar for ymnder ymnder
2
380
運用から学ぶPlay Billing Library
Avatar for ymnder ymnder
2
810
What’s new in Google Play Billing v1.2
Avatar for ymnder ymnder
0
800
詳解定期購入
Avatar for ymnder ymnder
7
6.9k
社内向けライブラリを設計・運用する話
Avatar for ymnder ymnder
0
1.2k

Other Decks in Programming

See All in Programming
Simple Storage Service(S3) is not simple
Avatar for Yura Iwatsuka iwatsukayura
0
230
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
540
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
7
2.4k
自サークルのIdPからログアウトできるようになるまで
Avatar for taiseiue taiseiue
1
130
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
350
Rでドレミ/Do-Re-Mi_with_R
Avatar for florets1 florets1
0
130
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
Avatar for Prota prota
1
1.8k
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
Avatar for r-kagaya rkaga
8
2k
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
360
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2.9k
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
160
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
130

Featured

See All Featured
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
450
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
15k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
610
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
490
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
420
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
450
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
840
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
400
Done Done
Avatar for chrislema chrislema
187
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k

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΍͍͖ͬͯ