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
720
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
130
Deep Linksをはじめよう
ymnder
0
320
Introduction to Wear OS Application Development
ymnder
0
440
CircleCIを使ったAndroidの開発フローの効率化とtips
ymnder
1
1.2k
Introduction to new features of Google Play Billing
ymnder
2
280
運用から学ぶPlay Billing Library
ymnder
2
710
What’s new in Google Play Billing v1.2
ymnder
0
680
詳解定期購入
ymnder
7
6k
社内向けライブラリを設計・運用する話
ymnder
0
920
Other Decks in Programming
See All in Programming
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
A New Era of Testing
mannodermaus
2
510
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
830
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
2
710
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
私のEbitengineの第一歩
qt_luigi
0
450
Why Prism?
kddnewton
4
1.7k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
Jakarta EE meets AI
ivargrimstad
0
390
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Documentation Writing (for coders)
carmenintech
65
4.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Design by the Numbers
sachag
277
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
The Invisible Customer
myddelton
119
13k
Testing 201, or: Great Expectations
jmmastey
36
7k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
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͍͖ͬͯ