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

How to implement Material Design

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for ymnder ymnder
March 27, 2018
Programming
790
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
390
Deep Linksをはじめよう
Avatar for ymnder ymnder
0
480
Introduction to Wear OS Application Development
Avatar for ymnder ymnder
0
580
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
760
詳解定期購入
Avatar for ymnder ymnder
7
6.8k
社内向けライブラリを設計・運用する話
Avatar for ymnder ymnder
0
1.2k

Other Decks in Programming

See All in Programming
飯MCP
Avatar for Yusuke Wada yusukebe
0
480
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
310
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
220
アーキテクチャモダナイゼーションとは何か
Avatar for nwiizo nwiizo
10
2.6k
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
730
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
820
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
340
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
180
Nuxt Server Components
Avatar for wattanx wattanx
0
240
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
3
370
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
120
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
Avatar for Shohei Okada okashoi
0
260

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
160
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
270
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
170
Side Projects
Avatar for Sacha Greif sachag
455
43k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
210
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.6k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.2k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.3k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
500

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