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

How to implement Material Design

Avatar for ymnder ymnder
March 27, 2018
Programming
1
780

How to implement Material Design

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

ymnder

March 27, 2018
Tweet

More Decks by ymnder

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

Other Decks in Programming

See All in Programming
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
340
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
880
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
Avatar for MIKIO KUBO mickey_kubo
1
150
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ～継続的な取り組みを添えて～
Avatar for Takuya TAKAHASHI takutakahashi
1
150
AIともっと楽するE2Eテスト
Avatar for Yohei Maeda myohei
7
2.9k
効率的な開発手段として VRTを活用する
Avatar for Yosuke Ishikawa ishkawa
0
150
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
2
930
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
270
CDK引数設計道場100本ノック
Avatar for kazuho cryer-shinozuka badmintoncryer
1
240
RailsGirls IZUMO スポンサーLT
Avatar for 16bit_idol 16bitidol
0
190
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
550
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
880

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
30
14k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.4k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.1k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.7k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k

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