Overview of the Android Design Support Library

Introduction

During Google I/O 2015, Google introduced the Design Support Library for Android developers. This library makes it simple for developers to implement more Material Design concepts into their applications, because many key elements were not available initially out of the box. On top of being easy to use, the Design Support Library is backwards compatible to API 7. The Design Support Library can be included in your Android projects by importing the Gradle dependency.

compile 'com.android.support:design:22.2.0'

1. Visual Components

There are two major categories of tools in the Design Support Library:

• visual components
• motion components

We'll start by taking a look at what new visual components are available to add polish to your apps.

Material Text Input

EditText views have been around in Android since the very beginning, and while they're simple to use, they haven't really changed much. With the Design Support Library, Google has introduced a new container view called TextInputLayout. This new view adds functionality to the standard EditText, such as support for error messages and animated hints to help make your user interface pop.

As shown in the snippet below, TextInputLayout can be included in your layout file as a wrapper for a standard EditText.

<android.support.design.widget.TextInputLayout
    android:id="@+id/textinput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"><EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="What is your name?" /></android.support.design.widget.TextInputLayout>

Gianluca Segato will take a closer look at the TextInputLayout component in an upcoming tutorial.

Floating Action Buttons

One of the most predominate user interface components in Material Design apps is the floating action button. Since their introduction, developers have either had to create these buttons from scratch or choose one of the many third party libraries designed specifically around these buttons.

With the Design Support Library, floating action buttons can be included in a layout and anchored to a portion of the screen with a few simple lines of XML. Each button is easily customizable with icons and colors. Two sizes are available, standard (56dp) and mini (40dp). One of the biggest advantages is that these buttons will now be supported by Google as their design evolves.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:src="@drawable/ic_fab" />

Navigation Components

While ViewPager and DrawerLayout components have been available for a while through the v4 support library, Google has expanded on them by providing two new related widgets. The first is an official version of the commonly used ViewPagerIndicator library by Jake Wharton called TabLayout. The second is the NavigationView, which provides support for drawer header views.

TabLayout

TabLayout components can have content added to them manually in code through using one of the addTab methods. Take a look at the following example.

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

Alternatively, you can associate TabLayout components with a ViewPager. This is accomplished by calling setupWithViewPager(), passing in the ViewPager as the first and only argument. This is another way to change sections in the ViewPager. It should be noted that getPageTitle() needs to be overridden when using TabLayout with a ViewPager to give each tab a proper name.

NavigationView

NavigationView is a new widget that extends the functionality of the DrawerLayout. Developers can now add header layouts to the drawer and mark selected sections with this easy to use component.

In addition to this, it's now very straightforward to create sections and subsections in the drawer through menu resource files. To get started, a NavigationView simply needs to be associated with a DrawerLayout in XML.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"><include layout="@layout/content"/><android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view"/></android.support.v4.widget.DrawerLayout>

Enhanced Toasts

While the Toast message has been a staple of Android for years, a new user interface widget called Snackbar is available to provide similar functionality with an improved look. Not only does the Snackbar present information to the user for a short period of time, it also supports a single action for adding context based functionality to your apps and can be dismissed with a swiping gesture.

Snackbar is implemented similarly to Toast, though it should be noted that creating one requires a view that can be used to find the bottom of the app display.

Snackbar.make( view, "Action", Snackbar.LENGTH_LONG )
    .setAction("Action!", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Log.e("App", "Action!");
        }
    } )
    .show();

2. Motion Components

How a user interface behaves and animates is very important in Material Design. To facilitate this, Google has released multiple components in the Design Support Library that help with common use cases. Kerry Perez-Huanca will take a closer look at this aspect of the Design Support Library in an upcoming tutorial.

Reactive Views

You may have noticed in the previous example that the FloatingActionButton moved up when the Snackbar view appeared. This is done using a new widget called the CoordinatorLayout, which wraps views that should be shifted to make room for other views.

Improved Quick Return and Toolbars

Many developers have asked for an easier way to display a parallax image that works with a quick return design pattern, disappearing or reappearing as the user scrolls. You can see this behavior in the Play Store for app listings. To let developers implement this without a lot of time spent writing redundant code, Google has released CollapsingToolBarLayout and AppBarLayout views. Using various options within these widgets, developers can pin views to the top of the screen or specify when those views should become visible as the user scrolls.

Conclusion

The Design Support Library has brought a lot of long awaited tools to Android. When paired with the AppCompat library, it becomes a lot easier to add Material Design to apps while maintaining backwards compatibility.

Many examples of how to work with these new components can be found in Google's official reference app, CheeseSquare, and Tuts+ will continue to provide in-depth tutorials on how to implement these new features.