1. Pearson Webcast Series

2. How to Use the Android Design Support Library Webcast
Presented by Ian G. Clifton
Brought to you by InformIT – informit.com/webcasts

3. Welcome. Our Agenda Today.
Material Design and the Android Design Support Library
The Little Pieces: Float Labels, FABs, and Snackbars
The Big Pieces: Tabs, Navigation Drawers, Coordinated Animation, and Collapsing Toolbars
Q&A
Wrap-up & Resources

4. Material Design Material Design – A design language for beautiful apps
Wow, this is amazing!
Oh no, how do I implement these things?
Come on, the FAB isn’t that hard…
What about the changes to tabs and the nav drawer?
…not to mention animated app bars and snackbars

5. The Android Design Support Library
Material Design components for Android 2.1 and newer
Float labels – TextInputLayout
FABs – FloatingActionButton
Snackbars - Snackbar
Tabs – TabLayout
Navigation drawers – NavigationView
Coordinated animation – CoordinatorLayout
Collapsing toolbars – CollapsingToolbarLayout

6. Add to Your App Include as a Gradle dependency: dependencies {
compile ‘com.android.support.design:23.1.0’ }
Or just add any activity that uses the design library within Android Studio

7. The Little Pieces
Float Labels, Floating Action Buttons, and Snackbars

8. Float Label Input method that shows form labels as hints. Saves space
Avoids duplicating text

9. Float Label Input method that shows form labels as hints. Saves space
Avoids duplicating text
Hints turn into labels on focus

10. Float Label Input method that shows form labels as hints. Saves space
Avoids duplicating text
Hints turn into labels on focus
Supports errors and character counting

11. Float Label Layout Simply wrap an EditText
Include an ID for both views
That’s it!

12. Float Label Usage
Changes to the hint/label should go through setHint on the TextInputLayout
Supports errors with setErrorEnabled and setError
Supports counting characters with setCounterEnabled and setCounterMaxLength
Convenient getEditText method

13. FAB Used to call out the core action for a given screen
Iconic element of Material Design, but it isn’t required
Generally used at this size (56x56dp), but can be used with the “mini” size (40x40dp)

14. FAB Layout
Simple view, often anchored.

15. FAB Usage
Use the fabSize attribute with normal or mini, depending on your needs
Child class of ImageButton, which is a child class of ImageView, so you can use methods from those classes such as setImageDrawable
Can be shown/hidden with the show and hide methods
Uses an OnClickListener like a typical view

16. Snackbar It’s like a toast but actually good
Used to show a short message
Tied to your layout
Can be dismissed by the user
Can optionally be interactive (actions show as colored text)
Great for the undo pattern

17. Snackbar Usage Call the static make method to create a new instance
The passed view is used to traverse the hierarchy
Set an action if applicable
Set a callback to be notified of the snackbar being shown or dismissed
Don’t forget to call show when it is ready

18. The Big Pieces
Tabs, Navigation Drawers, Coordinated Animation, and Collapsing Toolbars

19. Tabs Displayed with the TabLayout class
Can be fixed for two or three tabs
Or scrollable for more tabs
Typically tied to a ViewPager displaying fragments

20. Tab Layout Typically goes below the Toolbar
This can be in a LinearLayout, an AppBarLayout, or wherever makes sense in your app
Tab content is almost always implemented with a ViewPager

21. Tab Usage Create an adapter for ViewPager
Don’t forget to override getPageTitle to return the CharSequence for each tab
Set the adapter on the ViewPager
Call setTabsFromPagerAdapter
Call addOnPageChangeListener passing in a new TabLayoutOnPageChangeListener
Call setOnTabSelectedListener

22. Nav Drawer Displayed with the NavigationView class
Uses a DrawerLayout as the top-level view
Should always be in front of the app but behind the status bar
Contains a header plus menu items, optionally split with sections
Don’t use one just because you can

23. Nav Drawer XML
Navigation drawer content is defined as a menu in an XML file
Primary nav sections are in a group with checkableBehavior set to single
Actions are in a separate item with a submenu
Generally, every item in a group should have icons or not have icons (be consistent)

24. Nav Drawer Usage
Uses the same “plumbing” as the older style navigation drawer with a DrawerLayout and an ActionBarDrawerToggle
Don’t forget to set the OnNavigationItemSelectedListener
Override onBackPressed in order to close the drawer if it is open

25. Nav Drawer Selection
Usually the Activity implements the OnNavigationItemSelected interface
Selection is handled just like with any MenuItem: get the ID and compare it to values you care about
Close the drawer after handling the selection

26. Coordinated Animation
CoordinatorLayout is basically just a FrameLayout
…but awesome!
Allows view changes such as appearing or scrolling to affect other views
For example, a FAB can move out of the way when a snackbar appears
Or a toolbar can scroll off the screen while scrolling down another view and pop back on when scrolling up

27. With AppBarLayout The CoordinatorLayout is usually the root view
You will have some kind of view that scrolls (ScrollView, NestedScrollView, RecyclerView, ListView, etc.)
You will have an AppBarLayout that contains a Toolbar and possibly a TabLayout
You just set the behavior and the scroll flags

28. Behaviors and Scroll Flags
Layout behavior points to the class that implements the behavior
Scroll flags will be the combination that makes sense for your app
scroll: View scrolls off the screen
exitUntilCollapsed: Shrinks to minHeight before scrolling off
enterAlways: Scroll back up causes the view to reappear
enterAlwaysCollapsed: Scroll back up causes the view to reappear at minHeight

29. Collapsing Toolbars
Toolbar starts at a larger size but shrinks (collapses) as the user scrolls

30. Collapsing Toolbars
Toolbar starts at a larger size but shrinks (collapses) as the user scrolls

31. Collapsing Toolbars
Toolbar starts at a larger size but shrinks (collapses) as the user scrolls

32. Collapsing Toolbar Usage
Extremely easy to implement!
Just wrap your Toolbar with a CollapsingToolbarLayout
Call setTitle on the CollapsingToolbarLayout
You can set the collapse mode to pin or parallax
If you use parallax, you can also set layout_collapseParallaxMultiplier and/or contentScrim

33. Additional Thoughts The support libraries are always being updated
CoordinatorLayout behaviors are really cool
Browse the source code:

34. Additional Resources Ian G. Clifton Twitter: @iangclifton
GitHub:
Google Plus:
Visit informit.com/webcasts for
upcoming and archived webcasts.

35. Thank you! Sign-up for more webcasts at informit.com/webcasts
Connect with InformIT at informit.com/community