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
Material Components for Android触ってみる
Search
きりみん
May 23, 2018
Programming
7
1.8k
Material Components for Android触ってみる
きりみん
May 23, 2018
Tweet
Share
More Decks by きりみん
See All by きりみん
AndroidエンジニアがRailsにチャレンジしてる理由
kirimin
1
1.4k
What are AtCoder and competitive programming
kirimin
0
9.8k
バーチャル男声幼女プログラマーとして活動した1年間の振り返り
kirimin
0
960
アプリエンジニアでも神絵師になりたい!
kirimin
4
5.2k
Watashi ni Kotlin ga maiorita
kirimin
0
450
NEMのAPIとモザイクであそぼう
kirimin
0
350
はじめようきれいなコード
kirimin
8
2.9k
[社内LT]あたらしいMaterial Design
kirimin
1
1.6k
Hello-kirimin-chan
kirimin
0
120
Other Decks in Programming
See All in Programming
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
リハビリmruby
kishima
1
160
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Terraformテスト入門
msato
0
540
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Done Done
chrislema
179
15k
GitHub's CSS Performance
jonrohan
1026
450k
KATA
mclloyd
20
13k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
How GitHub (no longer) Works
holman
305
140k
Producing Creativity
orderedlist
PRO
340
39k
Transcript
Material Components for Android ৮ͬͯΈΔ @kirimin
͜͡͠ΐ͏͔͍ • @kiriminͱ͍͏IDͰੜ׆͍ͯ͠·͢ɻ • όʔνϟϧϢʔνϡʔόʔ • ͱ͖Ͳ͖AndroidΤϯδχΞ • ۓٸࢀઓͰ͚ম͖ਕLT
͜͡͠ΐ͏͔͍ • ͖ΓΈΜͪΌΜͶΔͱ͍͏ YoutubeνϟϯωϧͰಈըΛ Ξοϓϩʔυ͍ͯ͠·͢ɻ • όʔνϟϧLTͱ͔ϥΠϒίʔ σΟϯάͱ͔ٕज़ωλͬͯ ·͢ɻ
͓͞Β͍ • Google I/O2018ʹ߹ΘͤͯϚςϦΞϧσβΠ ϯΨΠυϥΠϯ͕ߋ৽͞Εͨɻ • Material Themingͱ͍͏֓೦͕Ճ͞Εͨ ଞɺComponentsʹଟ͘ͷมߋ͕͋ͬͨɻ
New Components (Ұ෦) • App bars:bottom • Backdrop • Banners
• Extended FAB • Progress indicators
App bars:bottom
App bars:bottom • ϘτϜφϏήʔγϣϯυϩϫʔϑϩʔςΟϯάΛ ؚΉΞΫγϣϯϘλϯͷΞΫηεΛఏڙ͢Δɻ
Backdrop
Backdrop • όοΫͱϑϩϯτͷ̎ͭͷϨΠϠʔ͔Βߏ͞ΕΔɻ όοΫϨΠϠʔΞΫγϣϯͱίϯςΩετΛදࣔɺ ϑϩϯτϨΠϠʔʹͦΕΒͷૢ࡞௨Λදࣔɻ
Banners
Banners • ॏཁͰ؆ૉͳϝοηʔδΛදࣔ͠ɺಉ࣌ʹϢʔβʔ ʹΞΫγϣϯΛఏڙ͢Δ • Bannersը໘ͷTOP(AppBarͷԼ)ʹදࣔ͞ΕΔ
Floating Action Button • Extended FAB͕Ճ • Floating Action ButtonΛؙ͚ͩ͡Όͳ͘৭ʑͳ
ελΠϧʹग़དྷΔΑ͏ʹ
Text Fields • FilledͱOutlinedͷ̎ͭͷσβΠϯ͕બΔΑ͏ʹ ͳͬͨ
Text Fields • ̎ͭͷλΠϓಉ͡ػೳΛఏڙ͢ΔͷͰɺͲͪΒΛ બͿ͔ΞϓϦͷελΠϧʹґଘ͢Δ
ͰɺͲ͏ͬͯ ࣮͢Δͷʁʁʁ
Material Components • ϚςϦΞϧσβΠϯͷComponentΛ࣮͢Δ ͨΊͷGoogleެࣜOSSϥΠϒϥϦ • AndroidҎ֎ʹ༷ʑͳϓϥοτϑΥʔϜ͚ ʹϥΠϒϥϦΛఏڙ͍ͯ͠Δ
Get started • ͍ͭͷ allprojects { repositories { jcenter() maven
{ url "https://maven.google.com" } } }
Get started • ͍ͭͷ dependencies { // ... compile 'com.google.android.material:material:1.0.0-alpha1'
// ... }
compileSdk • compileSdkVersionΛ'android-P'ʹ android { compileSdkVersion 'android-P' defaultConfig { applicationId
"com.example.m00008.trymaterialcomponents" minSdkVersion 21 targetSdkVersion 27 ...
Material Components Theme Λ͏ • Theme.MaterialComponents • Theme.MaterialComponents.NoActionBar • Theme.MaterialComponents.Light
• Theme.MaterialComponents.Light.NoActionBar • Theme.MaterialComponents.Light.DarkActionBar
AndroidXʹϦϑΝΫλϦϯά • Android StudioΛ3.2ʹ͢Δඞཁ͋Γ • ϦϑΝΫλϦϯάϝχϡʔ͔ΒRefoctoring to Android XΛબ
४උྃʙ
͔ͭͬͯΈΑ͏
Text field • ී௨ͷEdit Textͱಉ͡Α͏ʹ͏͚ͩ <com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="test"> <com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout>
Text field • styleΛมߋ <com.google.android.material.textfield.TextInputLayout style="@style/ Widget.MaterialComponents.TextInputLayout.OutlineBox" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="test">
<com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout>
Text field • Ͱ͖ͨʂ
ଞʁ • ݟͨײ͡৽Component·ͩ͋Μ·Γ࣮͞ Ε͍ͯͳ͍ͬΆ͍... • طଘͷComponentΘΓͱἧͬͯͦ͏ • ଟ͍ۙ͏ͪʹ༻ҙ͞ΕΔͣ...!!!
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠
͜ͷεϥΠυ͕ؾʹೖͬͨΒ νϟϯωϧొͱ͍͍Ͷ ͓Ͷ͕͍͠·͢