Pearson Webcast Series

How to Use the Android Design Support Library Webcast Presented by Ian G. Clifton Brought to you by InformIT – 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 – TextInputLayout FABs – FloatingActionButton Snackbars - Snackbar Tabs – TabLayout Navigation drawers – NavigationView Coordinated animation – CoordinatorLayout Collapsing toolbars – CollapsingToolbarLayout

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 EditText Include an ID for both views That’s it!

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

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)

FAB Layout Simple view, often anchored.

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

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 TabLayout class Can be fixed for two or three tabs Or scrollable for more tabs Typically tied to a ViewPager displaying fragments

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

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

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

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)

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

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

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

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

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

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 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

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

Additional Resources Ian G. Clifton Twitter: @iangclifton GitHub: https://github.com/IanGClifton Google Plus: https://plus.google.com/+IanClifton/ Visit informit.com/webcasts for upcoming and archived webcasts.

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