Android Design Support Library
6 likes2,051 views
The document discusses the Android Design Support Library which provides components that help developers implement Material Design in their Android apps. It describes key components like the Floating Action Button, Text Input Layout, Snackbar, Tabs, CoordinatorLayout, AppBarLayout, NavigationView and CollapsingToolbarLayout. It provides details on what each component is used for and how it works with examples of usage and code snippets.
Ad
More Related Content
What's hot (20)
Similar to Android Design Support Library (20)
Ad
Recently uploaded (20)
Ad
Android Design Support Library
- 1. Android Design Support Library Ibnu Sina Wardy Google Dev Expert: Android
- 2. About Me Ibnu Sina Wardy Google Developer Expert, Android CEO of PT GITS Indonesia (gits.co.id)
- 3. Ibnu Sina Wardy Google Developer Expert, Android CEO of PT GITS Indonesia Floating Action Button Text Input Layout Snackbar Tab Progress: 1% Coordinator Layout Navigation View
- 6. Floating Action Button Floating action button redlines Mini floating action button redlines
- 7. Floa,ng Ac,on Bu1on • Round button for a primary action on your interface • The color of this button is set in colorAccent from your theme.
- 10. Floating Label When the user engages with the text input field, the floating inline labels move to float above the field.
- 11. Floating Label
- 12. TextInputLayout
- 13. Snackbar
- 14. Snackbar Providing lightweight, quick feedback about an operation Snackbars are shown on the bottom of the screen and contain text with an optional single action Users can swipe them away before the timeout They automatically time out after the given time length by animating off the screen.
- 15. Snackbar
- 16. Snackbar
- 17. Tabs
- 18. Tabs • Implements both fixed tabs as well as scrollable tabs • Tabs can be added programmatically.
- 19. Tabs
- 20. Tab Layout
- 22. Coordinator Layout provides additional level of control over touch events between child views.
- 23. CoordinatorLayout with FloatingActionButton & Snackbar • CoordinatorLayout resolve the issue of snackbar displaying over the FloatingActionButton. • FloatingActionButton automatically moves upward as the snackbar animates in and returns to its position when the snackbar hides. • CoordinatorLayout enables user to swipe snackbar away before the timeout.
- 24. CoordinatorLayout with FloatingActionButton & Snackbar
- 25. CoordinatorLayout with AppBarLayout • AppBarLayout allows your Toolbar and other views (such as tabs provided by TabLayout) to react to scroll events in a sibling view. • the AppBarLayout can respond to those events by using the children’s scroll flags. • Toolbar reacts to scroll events in a sibling view app:layout_scrollFlags="scroll|enterAlways" • TabLayout remains pinned to the top of the screen while Toolbar view collapses. • includes a layout with CardView views
- 26. <android.support.design.widget.CoordinatorLayout android:layout_height="match_parent" android:layout_width="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content”> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="?a1r/ac,onBarSize" android:background="?a1r/colorPrimary" app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> <!-‐-‐ Your Scrollable View -‐-‐> ……………… <android.support.design.widget.Floa,ngAc,onBu1on android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_ac,on_loca,on_found" android:layout_marginBo1om="20dp" android:layout_marginRight="20dp" android:layout_gravity="bo1om|right" app:fabSize="normal" /> </android.support.design.widget.CoordinatorLayout> CoordinatorLayout with FloatingActionButton & Snackbar
- 27. CoordinatorLayout with AppBarLayout & TabLayout
- 28. CoordinatorLayout with AppBarLayout & TabLayout
- 29. CollapsingToolbarLayout • CollapsingToolbarLayout to ensure that the Toolbar itself remains pinned to the top of the screen while the view collapses. • Toolbar title will automatically appear larger when the layout is fully visible, then transition to its default size as it is collapsed.
- 32. Navigation View
- 33. Navigation View • NavigationView makes adding navigation drawer to your app easier than before. • You can inflate your navigation items through a menu resource. • NavigationView should go inside DrawerLayout. • app:headerLayout attribute controls the (optional) layout used for the header. • app:menu attribute is the menu resource for the navigation items (which can also be updated at runtime).
- 34. Navigation View
- 35. Navigation View
- 37. References • Google Design http://www.google.com/design/ • Android Developers Blog http://android-developers.blogspot.com/ 2015/05/android-design-support-library.html • HMKCode http://hmkcode.com/material-design-app- android-design-support-library-appcompat/
- 38. Topic: Android Design Support Library Ibnu Sina Wardy Google Dev Expert (ID): Android [email protected] Terima Kasih.