Material Components for Android触ってみる

1. Material Components for Android ৮ͬͯΈΔ @kirimin
2. ͜͡͠ΐ͏͔͍ • @kiriminͱ͍͏IDͰੜ׆͍ͯ͠·͢ɻ • όʔνϟϧϢʔνϡʔόʔ • ͱ͖Ͳ͖AndroidΤϯδχΞ • ۓٸࢀઓͰ෇͚ম͖ਕLT
3. ͜͡͠ΐ͏͔͍ • ͖ΓΈΜͪΌΜͶΔͱ͍͏ YoutubeνϟϯωϧͰಈըΛ Ξοϓϩʔυ͍ͯ͠·͢ɻ • όʔνϟϧLTͱ͔ϥΠϒίʔ σΟϯάͱ͔ٕज़ωλ΍ͬͯ ·͢ɻ
4. ͓͞Β͍ • Google I/O2018ʹ߹ΘͤͯϚςϦΞϧσβΠ ϯΨΠυϥΠϯ͕ߋ৽͞Εͨɻ • Material Themingͱ͍͏֓೦͕௥Ճ͞Εͨ ଞɺComponentsʹ΋ଟ͘ͷมߋ͕͋ͬͨɻ
5. New Components (Ұ෦) • App bars:bottom • Backdrop • Banners • Extended FAB • Progress indicators
6. App bars:bottom
7. App bars:bottom • ϘτϜφϏήʔγϣϯυϩϫʔ΍ϑϩʔςΟϯάΛ ؚΉΞΫγϣϯϘλϯ΁ͷΞΫηεΛఏڙ͢Δɻ
8. Backdrop
9. Backdrop • όοΫͱϑϩϯτͷ̎ͭͷϨΠϠʔ͔Βߏ੒͞ΕΔɻ όοΫϨΠϠʔ͸ΞΫγϣϯͱίϯςΩετΛදࣔɺ ϑϩϯτϨΠϠʔʹ͸ͦΕΒͷૢ࡞΍௨஌Λදࣔɻ
10. Banners
11. Banners • ॏཁͰ؆ૉͳϝοηʔδΛදࣔ͠ɺಉ࣌ʹϢʔβʔ ʹΞΫγϣϯΛఏڙ͢Δ • Banners͸ը໘ͷTOP(AppBarͷԼ)ʹදࣔ͞ΕΔ
12. Floating Action Button • Extended FAB͕௥Ճ • Floating Action ButtonΛؙ͚ͩ͡Όͳ͘৭ʑͳ ελΠϧʹग़དྷΔΑ͏ʹ
13. Text Fields • FilledͱOutlinedͷ̎ͭͷσβΠϯ͕બ΂ΔΑ͏ʹ ͳͬͨ
14. Text Fields • ̎ͭͷλΠϓ͸ಉ͡ػೳΛఏڙ͢ΔͷͰɺͲͪΒΛ બͿ͔͸ΞϓϦͷελΠϧʹґଘ͢Δ
15. ͰɺͲ͏΍ͬͯ ࣮૷͢Δͷʁʁʁ
16. Material Components • ϚςϦΞϧσβΠϯͷComponentΛ࣮૷͢Δ ͨΊͷGoogleެࣜOSSϥΠϒϥϦ • AndroidҎ֎ʹ΋༷ʑͳϓϥοτϑΥʔϜ޲͚ ʹϥΠϒϥϦΛఏڙ͍ͯ͠Δ
17. Get started • ͍ͭ΋ͷ allprojects { repositories { jcenter() maven { url "https://maven.google.com" } } }
18. Get started • ͍ͭ΋ͷ dependencies { // ... compile 'com.google.android.material:material:1.0.0-alpha1' // ... }
19. compileSdk • compileSdkVersionΛ'android-P'ʹ android { compileSdkVersion 'android-P' defaultConfig { applicationId "com.example.m00008.trymaterialcomponents" minSdkVersion 21 targetSdkVersion 27 ...
20. Material Components Theme Λ࢖͏ • Theme.MaterialComponents • Theme.MaterialComponents.NoActionBar • Theme.MaterialComponents.Light • Theme.MaterialComponents.Light.NoActionBar • Theme.MaterialComponents.Light.DarkActionBar
21. AndroidXʹϦϑΝΫλϦϯά • Android StudioΛ3.2ʹ͢Δඞཁ͋Γ • ϦϑΝΫλϦϯάϝχϡʔ͔ΒRefoctoring to Android XΛબ୒
22. ४උ׬ྃʙ
23. ͔ͭͬͯΈΑ͏
24. 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>
25. 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>
26. Text field • Ͱ͖ͨʂ
27. ଞ͸ʁ • ݟͨײ͡৽Component͸·ͩ͋Μ·Γ࣮૷͞ Ε͍ͯͳ͍ͬΆ͍... • طଘͷComponent͸ΘΓͱἧͬͯͦ͏ • ଟ෼͍ۙ͏ͪʹ༻ҙ͞ΕΔ͸ͣ...!!!
28. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠
29. ͜ͷεϥΠυ͕ؾʹೖͬͨΒ νϟϯωϧొ࿥ͱ͍͍Ͷ ͓Ͷ͕͍͠·͢