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
360
Deep Linksをはじめよう
ymnder
0
420
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.5k
社内向けライブラリを設計・運用する話
ymnder
0
1.1k
Other Decks in Programming
See All in Programming
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Le côté obscur des IA génératives
pascallemerrer
0
120
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
プログラマのための作曲入門
cheebow
0
540
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
920
CSC305 Lecture 02
javiergs
PRO
1
260
Serena MCPのすすめ
wadakatu
4
900
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
770
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
950
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
How GitHub (no longer) Works
holman
315
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
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͍͖ͬͯ