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.4k
Watashi ni Kotlin ga maiorita
kirimin
0
550
NEMのAPIとモザイクであそぼう
kirimin
0
390
はじめようきれいなコード
kirimin
8
3.1k
[社内LT]あたらしいMaterial Design
kirimin
1
1.7k
Hello-kirimin-chan
kirimin
0
140
Other Decks in Programming
See All in Programming
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
エラーって何種類あるの?
kajitack
5
310
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
120
Create a website using Spatial Web
akkeylab
0
300
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
Is Xcode slowly dying out in 2025?
uetyo
1
190
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Bash Introduction
62gerente
614
210k
Scaling GitHub
holman
459
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
GraphQLとの向き合い方2022年版
quramy
48
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Being A Developer After 40
akosma
90
590k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Typedesign – Prime Four
hannesfritz
42
2.7k
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ΘΓͱἧͬͯͦ͏ • ଟ͍ۙ͏ͪʹ༻ҙ͞ΕΔͣ...!!!
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠
͜ͷεϥΠυ͕ؾʹೖͬͨΒ νϟϯωϧొͱ͍͍Ͷ ͓Ͷ͕͍͠·͢