Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Material Components for Android触ってみる
きりみん
May 23, 2018
Programming
7
1.6k
Material Components for Android触ってみる
きりみん
May 23, 2018
Tweet
Share
More Decks by きりみん
See All by きりみん
AndroidエンジニアがRailsにチャレンジしてる理由
kirimin
1
1.3k
What are AtCoder and competitive programming
kirimin
0
9.4k
バーチャル男声幼女プログラマーとして活動した1年間の振り返り
kirimin
0
780
アプリエンジニアでも神絵師になりたい!
kirimin
4
4.9k
Watashi ni Kotlin ga maiorita
kirimin
0
360
NEMのAPIとモザイクであそぼう
kirimin
0
320
はじめようきれいなコード
kirimin
8
2.8k
[社内LT]あたらしいMaterial Design
kirimin
1
1.6k
Hello-kirimin-chan
kirimin
0
110
Other Decks in Programming
See All in Programming
OSC大阪 パスワード認証は人類には早すぎる ~ IDaaSを使ったソーシャルログインのすすめ ~
authyasan
7
1.5k
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
320
Swift Concurrency in GoodNotes
inamiy
4
1.3k
An Advanced Introduction to R
nicetak
0
1.8k
ECテックカンファレンス2023
kspace
1
360
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
210
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
490
Ruby Pattern Matching
bkuhlmann
0
610
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
410
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
340
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Writing Fast Ruby
sferik
613
58k
What the flash - Photography Introduction
edds
64
10k
Statistics for Hackers
jakevdp
785
210k
A designer walks into a library…
pauljervisheath
199
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
Scaling GitHub
holman
453
140k
Designing for humans not robots
tammielis
245
24k
Docker and Python
trallard
30
1.9k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
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ΘΓͱἧͬͯͦ͏ • ଟ͍ۙ͏ͪʹ༻ҙ͞ΕΔͣ...!!!
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠
͜ͷεϥΠυ͕ؾʹೖͬͨΒ νϟϯωϧొͱ͍͍Ͷ ͓Ͷ͕͍͠·͢