Using the Design Support Library

Previous lessons in this class have covered a variety of material design components that are available as part of the Android framework. The Design Support library provides APIs to support additional important material design components and patterns to your applications beyond those covered by the Android framework, to all devices running Android 2.1 or later. This lesson introduces two of the components from the Design Support library using examples that you can incorporate into your applications.

Add the Dependency

The examples in this lesson rely on the Design Support Library, which you can make use of in your projects by adding the following Gradle dependency to your application's module:

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

Create a Floating Action Button

Figure 1 - A floating action button.

A floating action button (FAB) is a circular button that is used to trigger a primary action in your application's UI. You can use the Design Support library to add this important Material Design component to your application. You can customize a variety of aspects of the button, including its size, placement, and appearance.

The following basic code example demonstrates how to add the FloatingActionButton to a layout:

<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:src="@drawable/ic_my_icon"
        android:layout_margin="16dp" />

You can then apply an View.OnClickListener to the button in the corresponding activity for your layout. Note that as FloatingActionButton extends ImageButton, and in turn ImageView, you can set the icon which is displayed either via android:src as illustrated in the example above, or using the setImageDrawable() method.

By default the FAB is colored using the colorAccent attribute in your theme as described in the earlier lesson in this class, Using the Material Theme.

Note: As highlighted in the earlier lesson, the material theme is only available in Android 5.0 (API level 21) and above. The v7 Support Libraries provide themes with material design styles for some widgets and support for customizing the color palette. For more information, see Maintaining Compatibility .

You can configure a number of properties for the FAB using either the attributes defined in the v7 appcompat library or corresponding methods, including:

• The elevation of the FAB, using the app:elevation attribute or setCompatElevation() method
• The size of the FAB, using the app:fabSize attribute or setSize() method
• The size of the FAB, using the app:rippleColor attribute or setRippleColor() method

For information about maintaining material design compatibility on versions prior to Android 5.0 (API level 21) using the v7 Support Libraries, see Maintaining Compatibility.

It is common to combine a variety of components from the Design Support library in a single layout. For example, you might want to display brief pop-up messages to the user using a Snackbar. The message automatically disappears after a short period. You can use the CoordinatorLayout class to move other UI elements, such as the FAB, when the Snackbar appears. For more information about both the Snackbar and CoordinatorLayout classes, see Building and Displaying a Pop-Up Message.

For more information on the capabilities of the FAB, see the API reference for the FloatingActionButton.

Create a Navigation Drawer

Figure 2 - A navigation drawer.

The navigation drawer is a UI panel that shows your application's main navigation menu. It is hidden when not in use, but appears when the user swipes a finger from the left edge of the screen or, when at the top level of the application, the user touches the application icon in the app bar.

The remainder of the lesson examines some of the details of implementing the layouts for a navigation drawer using the Design Support library. If you would prefer to implement a navigation drawer using the DrawerLayout APIs available in the Support Library, see Creating a Navigation Drawer.

Note: Before you decide to use a navigation drawer in your app, you should understand the use cases and design principles defined in the Navigation Drawer design guide.

There are three primary resource files that typically contribute to the layout of a navigation drawer:

• The main activity layout from which the navigation drawer is initially called
• An optional navigation header layout
• A navigation drawer menu

You examine each of these resource files using simple examples in this lesson.

Create a drawer layout

To add a navigation drawer, begin by creating a DrawerLayout object as the root view of your layout. Inside the DrawerLayout, include a layout for the main content for the UI and a NavigationView for the navigation drawer. The main content layout must be placed before the NavigationView because the XML order implies z-ordering and the navigation drawer must be on top of the main content. The main content view is set to match the parent view's width and height, because it represents the entire UI when the navigation drawer is closed.

The following example layout uses a DrawerLayout which includes a separate layout file to contain the main content, as well as a NavigationView for the navigation drawer.

<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/my_drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <include
        layout="@layout/my_main_content.xml"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/my_navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/my_drawer_header"
        app:menu="@menu/my_drawer_view"/>

</android.support.v4.widget.DrawerLayout>

Create a drawer header layout

Next create a layout for navigation drawer header with a LinearLayout object at the root of the layout and a TextView with a header title, as illustrated by the following example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="My header title"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</LinearLayout>

Note that you can add multiple additional child view objects in the header as required. For example, you may want to add extra TextView objects, or an ImageView object to display a logo in the navigation drawer header.

Create a drawer menu layout

Finally create a layout for your navigation drawer's menu items. The following simple example is a collection of checkable menu items:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_item_1"
            android:icon="@drawable/ic_my_icon"
            android:title="My item 1" />
        <item
            android:id="@+id/nav_item_2"
            android:icon="@drawable/ic_my_icon"
            android:title="My item 2" />
    </group>

    <item android:title="Sub items">
        <menu>
            <item
                android:id="@+id/nav_sub_1"
                android:icon="@drawable/ic_my_icon"
                android:title="My sub item 1" />
            <item
                android:id="@+id/nav_sub_2"
                android:icon="@drawable/ic_my_icon"
                android:title="My sub item 2" />
        </menu>
    </item>

</menu>

Notice in the above example, that you can also use sub-headers in your menu to separate and organize groups of items.

When a user selects a menu item, the system invokes the item's callback method. To set the callback method, use the setNavigationItemSelectedListener() method to assign a OnNavigationItemSelectedListener to the menu item. The system passes the listener the MenuItem that was clicked, allowing you to handle changing the checked status of a menu item, or loading new content in your application.