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

How to implement Material Design

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for ymnder ymnder
March 27, 2018
Programming
810
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
420
Deep Linksをはじめよう
Avatar for ymnder ymnder
0
520
Introduction to Wear OS Application Development
Avatar for ymnder ymnder
0
620
CircleCIを使ったAndroidの開発フローの効率化とtips
Avatar for ymnder ymnder
1
1.4k
Introduction to new features of Google Play Billing
Avatar for ymnder ymnder
2
370
運用から学ぶPlay Billing Library
Avatar for ymnder ymnder
2
810
What’s new in Google Play Billing v1.2
Avatar for ymnder ymnder
0
780
詳解定期購入
Avatar for ymnder ymnder
7
6.9k
社内向けライブラリを設計・運用する話
Avatar for ymnder ymnder
0
1.2k

Other Decks in Programming

See All in Programming
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
210
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
490
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
480
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
150
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
140
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
18k
Built Our Own Background Agent at LayerX
Avatar for LayerX layerx
PRO
9
5.1k
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
140
言語を使う側から、作る側へ。 自作 Lisp で得た新たな気づき。
Avatar for ANDPAD inc andpad
0
160
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
Avatar for kosuke T kosuket
0
440
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
Avatar for viviON vivion
0
300
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
3
770

Featured

See All Featured
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
930
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
340
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k

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