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.7k
バーチャル男声幼女プログラマーとして活動した1年間の振り返り
kirimin
0
940
アプリエンジニアでも神絵師になりたい!
kirimin
4
5.2k
Watashi ni Kotlin ga maiorita
kirimin
0
430
NEMのAPIとモザイクであそぼう
kirimin
0
340
はじめようきれいなコード
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
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Java 22 Overview
kishida
1
180
Fast JSX: Don't clone props object #28768
yossydev
1
130
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
340
エンターテイメント業界で利用されるAWS
demuyan
0
210
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Designing for Performance
lara
601
67k
The Language of Interfaces
destraynor
151
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Typedesign – Prime Four
hannesfritz
36
2.1k
Building Your Own Lightsaber
phodgson
99
5.7k
Git: the NoSQL Database
bkeepers
PRO
422
63k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
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ΘΓͱἧͬͯͦ͏ • ଟ͍ۙ͏ͪʹ༻ҙ͞ΕΔͣ...!!!
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠
͜ͷεϥΠυ͕ؾʹೖͬͨΒ νϟϯωϧొͱ͍͍Ͷ ͓Ͷ͕͍͠·͢