Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How to implement Material Design
Search
ymnder
March 27, 2018
Programming
1
760
How to implement Material Design
Androidエンジニア デザイン部 #1 2018/03/28 @ymnd
https://nohana.connpass.com/event/80530/
ymnder
March 27, 2018
Tweet
Share
More Decks by ymnder
See All by ymnder
What’s new in Google Play's billing system
ymnder
1
300
Deep Linksをはじめよう
ymnder
0
370
Introduction to Wear OS Application Development
ymnder
0
510
CircleCIを使ったAndroidの開発フローの効率化とtips
ymnder
1
1.3k
Introduction to new features of Google Play Billing
ymnder
2
300
運用から学ぶPlay Billing Library
ymnder
2
740
What’s new in Google Play Billing v1.2
ymnder
0
700
詳解定期購入
ymnder
7
6.3k
社内向けライブラリを設計・運用する話
ymnder
0
1k
Other Decks in Programming
See All in Programming
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
15
4.3k
技術選定を未来に繋いで活用していく
sakito
3
100
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
300
Being an ethical software engineer
xgouchet
PRO
0
190
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
3
790
AHC045_解説
shun_pi
0
410
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
4
1.4k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.2k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
1.2k
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
140
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
120
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
290
Featured
See All Featured
Designing for Performance
lara
606
69k
GitHub's CSS Performance
jonrohan
1030
460k
Writing Fast Ruby
sferik
628
61k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
12
640
Faster Mobile Websites
deanohume
306
31k
A Tale of Four Properties
chriscoyier
158
23k
Designing Experiences People Love
moore
141
23k
Code Review Best Practice
trishagee
67
18k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Building an army of robots
kneath
304
45k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Transcript
How to implement Material Design AndroidΤϯδχΞ σβΠϯ෦ #1 2018/03/28 @ymnd
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 2
Ͳ͏ͬͯσβΠϯΛʹ ࣮ͯ͠·͔͢
ͨͱ͑͜ΜͳλεΫ • ݕࡧը໘ΛϚςϦΞϧσβΠϯԽ͢Δ • શ໘తʹελΠϧΛݟ͢ • ৭ʗ༨നʗॻମʗΞΠίϯɾɾɾɾ • ݕࡧલʹཤྺϗοτΩʔϫʔυΛදࣔ͢Δ •
ݕࡧը໘ʹೖͬͨͱ͖ʹϗοτΩʔϫʔυΛදࣔ • ݕࡧBoxΛλοϓͯ͠ཤྺΛදࣔ 4
ࣗͷྗͰ σβΠϯ͍ͯ͘͠
None
͍͖ͬͯͩʂʂʂ
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 8
ᶃࣄલௐࠪ • ઌߦࣄྫΛൺֱ͢Δ • ͍ΖΜͳΞϓϦΛ৮ͬͯΈΔ • ݕࡧػೳΛͬͯεΫγϣΛूΊΔ 9
ᶃࣄલௐࠪͷ࣮ྫ 10
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 11
ᶄΨΠυϥΠϯͷ֬ೝ • ΨΠυϥΠϯΛݟʹߦ͘ • ࣄલʹҰ௨ΓΛ௨͓ͯ͘͜͠ͱ • ̍ͭͷը໘Λͭ͘Δʹࡍͯ͠ߟྀࣄ߲ͨ͘͞Μ͋Δ • Patterns/Search •
Components/Lists • Style/Color • Style/Icons 12
ᶄΨΠυϥΠϯͷ֬ೝͷ࣮ྫ • ݕࡧɺϦετɺΞΠίϯɺϑΥϯτͷଠ͞ɺ৭ຯ ←ΫϦΞϘλϯͷେ͖͞ʗ༨നʁ ←ςΩετͷϘτϜҐஔ ←ελΠϧBoldʁ ←ྻͷdpʁ ϚςϦΞϧΞΠίϯʁˠ େ͖͞ͱҐஔʁˠ ৭ςΩετΑΓೱ͍ʁˠ
ଞͷΞΠίϯͷྫʁˠ ←ંฦ͠ߟྀ͖͢ʁ ←dividerͷ৭ʁଠ͞ʁ ←ݟग़͠Ͳ͏͍ΕΔ͔ ɹʢଞͷΞΠςϜͷఆʣ ςΩετͱͲΕ͘Β͍͢ʁˠ ←ϑΥϯταΠζʁ 13
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 14
ᶅσβΠϯͷ۩ମԽ • SketchͰෳҊΛඳ͍ͯνʔϜͰ૬ஊ͢Δ 15
ࠓͷ͓ॻ͖ ᶃ ࣄલௐࠪ ᶄ ΨΠυϥΠϯ֬ೝ ᶅ σβΠϯͷ۩ମԽ ᶆ σόοά࡞ۀ 16
ᶆσόοά࡞ۀ • σόοάͷ͍͍ಓͷΓ • ΈํΛؒҧ͔ͬͨͳʁ • Ґஔ͕ἧΘͳ͍ଞ • •
Կނ͔ಛఆͰͷΈڍಈ͕ҧ͏ • OSόʔδϣϯ • Կނ͔̐ܥ่͚ͩΕΔ • λονϑΟʔυόοΫରԠ 17
ᶆσόοά࡞ۀ • LayoutInspector • Stetho • ։ൃऀπʔϧ • Sketch 18
ᶆσόοά࡞ۀ(LayoutInspector) • AndroidStudio > Tools > Layout Inspector • ViewHierarchyͱ֤ཁૉͷঢ়ଶΛ֬ೝͰ͖Δ
• ViewͷVisibilityThemeɺ༨നɺେ͖͞ͳͲ 19
ᶆσόοά࡞ۀ(LayoutInspector)
ᶆσόοά࡞ۀ(LayoutInspector) View Tree
ᶆσόοά࡞ۀ(LayoutInspector) View Properties
ᶆσόοά࡞ۀ(Stetho) • http://facebook.github.io/stetho/ • ChromeDeveloperToolsΛར༻͠CSS-likeʹ֬ೝͰ͖Δ • TextΛϦΞϧλΠϜͰૢ࡞͢Δ͜ͱ͕Ͱ͖Δ • ͘ͳͬͨ߹ͷݟͨΛνΣοΫͰ͖Δ 23
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho) View Tree
ᶆσόοά࡞ۀ(Stetho) View Properties
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho) text෦Λબˍೖྗ
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(։ൃऀπʔϧ) • ઃఆ > ։ൃऀ͚Φϓγϣϯ > ϨΠΞτڥքΛදࣔ • ڥ͕Ͳ͜ʹ͋Δ͔ܶతʹ͔Γ͘͢ͳΔ 32
ᶆσόοά࡞ۀ(Sketch) • σβΠϯҊʹεΫγϣΛॏͶͯඍௐΛ܁Γฦ͢ • OpacityΛ80%ʹͯ͠ॏͶΔ 33
Ͱ͖͕͋Γ 34
whoami • twitter:@ymnd, github:@ymnder • Application Engineer • Android ܦిࢠ൛ΞϓϦ
• Android ࢴ໘ϏϡʔΞʔΞϓϦ • ٕज़ॻయ̐Ͱܦిࢠ൛ͷݟΛ·ͱΊͨຊΛग़͠·͢ɻ 35
Design͍͖ͬͯ