GDG Kütahya - Exploring the v28 Android Design Support Library Additions

Transcript

1. Exploring the v28 Android Design Support Library Additions
2. About Me Android Developer @ emretekin.me emre@kukapps.com emretekin emretekinn
3. What is Support Library? The Support Library is a collection of libraries can be defined as into two group of libraries such as compatibility and component libraries. implementation 'com.android.support:design:28.0.0' This is the stable release of Support Library 28.0.0 and is suitable for use in production. This will be the last feature release under the android.support packaging, and developers are encouraged to migrate to AndroidX. implementation 'com.google.android.material:material:1.0.0
4. Introduction Material Design Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. https://material.io
6. Previously Used Material Components • Toolbar • Bottom Navigation View • Cardview • Floating Action Button • Selection Controls
7. Toolbar
8. Bottom Navigation View
9. Cardview
10. Floating Action Button
11. Selections Controls • Checkbox • Radio button • Switch button
12. New Material Components • BottomAppBar • Material Cardview • Chip • Chip Group • Material Button
13. Toolbar to BottomAppBar A bottom app bar displays navigation and key actions at the bottom of mobile screens. Based on the changing needs and behaviors of users, the BottomAppBar is an evolution from standard Material guidance.
14. Toolbar to BottomAppBar A bottom app bar displays navigation and key actions at the bottom of mobile screens. Based on the changing needs and behaviors of users, the BottomAppBar is an evolution from standard Material guidance.
15. Bottom NavigationView BottomAppBar
16. Bottom NavigationView BottomAppBar
17. Bottom NavigationView BottomAppBar
18. BottomAppBar
19. Selection Controls to Chips
20. Selection Controls to Chips
21. Cardview to Material CardView Material CardView is a customizable component based on CardView from the Android Support Library. Material CardView provides all of the features of CardView, but adds attributes for customizing the stroke and uses an updated Material style by default.
22. Button to Material Button
23. Let’s See How Can We Implement New Components to Our Project
24. BottomAppBar
25. BottomAppBar with FAB • bottom_app_bar.replaceMenu(R.menu.main) • app:layout_anchor=”@id/bottom_appbar”
26. BottomAppBar with FAB • app:fabAttached: “true”
27. BottomAppBar with FAB • app:fabAttached: “false”
28. BottomAppBar with FAB • app:fabAlignmentMode:”center”
29. BottomAppBar Behaviors • bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END • bottom_app_bar.replaceMenu(menu_secondary)
30. BottomAppBar Behaviors • app:hideOnScroll:”true” • app:layout_scrollFlags=”scroll|enterAlways” • bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END • bottom_app_bar.replaceMenu(menu_secondary)
31. Chip
32. Chip Group
33. Chips There are four types of chips: • Entry Chip • Filter Chip • Choice Chip • Action Chip (Default)
34. • Entry(Input) Chips
35. • Choice Chips
36. • Filter Chips
37. • Action Chips
38. • Chip Attributes Label android:text android:textAppearance Shape app:chipCornerRadius Size app:chipMinHeight Background app:chipBackgroundColor Border app:chipStrokeColor app:chipStrokeWidth Ripple app:rippleColor Chip Icon app:chipIconVisible app:chipIcon app:chipIconTint app:chipIconSize Close Icon app:closeIconVisible app:closeIcon app:closeIconSize app:closeIconTint Checkable android:checkable Motion app:showMotionSpec app:hideMotionSpec Paddings app:chipStartPadding app:iconStartPadding app:iconEndPadding app:textStartPadding app:textEndPadding app:closeIconStartPadding app:closeIconEndPadding app:chipEndPadding
39. Material Cardview • app:strokeWidth: • app:strokeColor:
40. Material Button
41. Material Button style="@style/Widget.MaterialComponents.Button.TextButton"
42. • Material Button Attributes Icon drawable app:icon Padding between icon and button text app:iconPadding Icon color app:iconTint app:iconTintModer Stroke app:strokeColor app:strokeWidth The radius of all four corners of the button app:cornerRadius Ripple app:rippleColor
43. Google I/O 2018 https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched&hl=en 1 2 3
44. Demo https://medium.com/@emre.tekin/android-design-support-library-v28-3e0ea4d9f688 https://github.com/emretekin/Support-Library-v28-Additions
45. References https://material.io https://www.reddit.com/r/androiddev/comments/82qh9e/support_library_2800alpha1/ https://medium.com/material-design-in-action/chips-material-components-for-android-46001664a40f https://youtu.be/DPH3F0v1jB0
46. Thank You! Questions? emretekin.me