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
780
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
340
Deep Linksをはじめよう
ymnder
0
400
Introduction to Wear OS Application Development
ymnder
0
530
CircleCIを使ったAndroidの開発フローの効率化とtips
ymnder
1
1.4k
Introduction to new features of Google Play Billing
ymnder
2
320
運用から学ぶPlay Billing Library
ymnder
2
750
What’s new in Google Play Billing v1.2
ymnder
0
730
詳解定期購入
ymnder
7
6.4k
社内向けライブラリを設計・運用する話
ymnder
0
1.1k
Other Decks in Programming
See All in Programming
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
1
590
Flutterと Vibe Coding で個人開発!
hyshu
1
200
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
320
リッチエディターを安全に開発・運用するために
unachang113
1
340
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
150
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
730
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
360
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Designing for humans not robots
tammielis
253
25k
Writing Fast Ruby
sferik
628
62k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Adaptive Systems
keathley
43
2.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Scaling GitHub
holman
461
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Bash Introduction
62gerente
613
210k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
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͍͖ͬͯ