Pearson Webcast Series How to Use the Android

Pearson Webcast Series

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

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

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

The Android Design Support Library • Material Design components for Android 2. 1 and newer • Float labels – Text. Input. Layout • FABs – Floating. Action. Button • Snackbars - Snackbar • Tabs – Tab. Layout • Navigation drawers – Navigation. View • Coordinated animation – Coordinator. Layout • Collapsing toolbars – Collapsing. Toolbar. Layout

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

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

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

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

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

Float Label Layout • Simply wrap an Edit. Text • Include an ID for both views • That’s it!

Float Label Usage • Changes to the hint/label should go through set. Hint on the Text. Input. Layout • Supports errors with set. Error. Enabled and set. Error • Supports counting characters with set. Counter. Enabled and set. Counter. Max. Length • Convenient get. Edit. Text method

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 (56 x 56 dp), but can be used with the “mini” size (40 x 40 dp)

FAB Layout Simple view, often anchored.

FAB Usage • Use the fab. Size attribute with normal or mini, depending on your needs • Child class of Image. Button, which is a child class of Image. View, so you can use methods from those classes such as set. Image. Drawable • Can be shown/hidden with the show and hide methods • Uses an On. Click. Listener like a typical view

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

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

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

Tabs Displayed with the Tab. Layout class Can be fixed for two or three tabs Or scrollable for more tabs Typically tied to a View. Pager displaying fragments

Tab Layout Typically goes below the Toolbar This can be in a Linear. Layout, an App. Bar. Layout, or wherever makes sense in your app Tab content is almost always implemented with a View. Pager

Tab Usage Create an adapter for View. Pager Don’t forget to override get. Page. Title to return the Char. Sequence for each tab Set the adapter on the View. Pager Call set. Tabs. From. Pager. Adapter Call add. On. Page. Change. Listener passing in a new Tab. Layout. On. Page. Change. Listener Call set. On. Tab. Selected. Listener

Nav Drawer Displayed with the Navigation. View class Uses a Drawer. Layout as the toplevel 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

Nav Drawer XML Navigation drawer content is defined as a menu in an XML file Primary nav sections are in a group with checkable. Behavior 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)

Nav Drawer Usage Uses the same “plumbing” as the older style navigation drawer with a Drawer. Layout and an Action. Bar. Drawer. Toggle Don’t forget to set the On. Navigation. Item. Selected. Listener Override on. Back. Pressed in order to close the drawer if it is open

Nav Drawer Selection Usually the Activity implements the On. Navigation. Item. Selected interface Selection is handled just like with any Menu. Item: get the ID and compare it to values you care about Close the drawer after handling the selection

Coordinated Animation Coordinator. Layout is basically just a Frame. Layout …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

With App. Bar. Layout The Coordinator. Layout is usually the root view You will have some kind of view that scrolls (Scroll. View, Nested. Scroll. View, Recycler. View, List. View, etc. ) You will have an App. Bar. Layout that contains a Toolbar and possibly a Tab. Layout You just set the behavior and the scroll flags

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 exit. Until. Collapsed: Shrinks to min. Height before scrolling off enter. Always: Scroll back up causes the view to reappear enter. Always. Collapsed: Scroll back up causes the view to reappear at min. Height

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

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

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

Collapsing Toolbar Usage Extremely easy to implement! Just wrap your Toolbar with a Collapsing. Toolbar. Layout Call set. Title on the Collapsing. Toolbar. Layout You can set the collapse mode to pin or parallax If you use parallax, you can also set layout_collapse. Parallax. Multiplier and/or content. Scrim

Additional Thoughts • The support libraries are always being updated • Coordinator. Layout behaviors are really cool • Browse the source code: https: //github. com/android/platform_frameworks_support

Additional Resources Ian G. Clifton • Twitter: @iangclifton • Git. Hub: https: //github. com/Ian. GClifton • Google Plus: https: //plus. google. com/+Ian. Clifton/ Visit informit. com/webcasts for upcoming and archived webcasts.

Thank you! • Sign-up for more webcasts at informit. com/webcasts • Connect with Inform. IT at informit. com/community