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
2k
Material Components for Android触ってみる
きりみん
May 23, 2018
Tweet
Share
More Decks by きりみん
See All by きりみん
AndroidエンジニアがRailsにチャレンジしてる理由
kirimin
1
1.6k
What are AtCoder and competitive programming
kirimin
0
10k
バーチャル男声幼女プログラマーとして活動した1年間の振り返り
kirimin
0
1.1k
アプリエンジニアでも神絵師になりたい!
kirimin
4
5.5k
Watashi ni Kotlin ga maiorita
kirimin
0
560
NEMのAPIとモザイクであそぼう
kirimin
0
390
はじめようきれいなコード
kirimin
8
3.1k
[社内LT]あたらしいMaterial Design
kirimin
1
1.7k
Hello-kirimin-chan
kirimin
0
150
Other Decks in Programming
See All in Programming
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
100
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
920
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
340
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
360
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
210
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
440
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
460
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
For a Future-Friendly Web
brad_frost
180
9.9k
Unsuck your backbone
ammeep
671
58k
Bash Introduction
62gerente
615
210k
Speed Design
sergeychernyshev
32
1.1k
How to Think Like a Performance Engineer
csswizardry
27
2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Building Flexible Design Systems
yeseniaperezcruz
329
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ΘΓͱἧͬͯͦ͏ • ଟ͍ۙ͏ͪʹ༻ҙ͞ΕΔͣ...!!!
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠
͜ͷεϥΠυ͕ؾʹೖͬͨΒ νϟϯωϧొͱ͍͍Ͷ ͓Ͷ͕͍͠·͢