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.

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

4. Floating Action Button

5. Floating Action Button

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.

8. Floating Label

9. Floating Label
Hint Problem

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

21. Coordinator 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.

30. CollapsingToolbarLayout

31. CollapsingToolbarLayout

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
ibnu.wardy@gmail.com
Terima Kasih.