Design Support Library

Kyle Sherman

kyle@buzzfeed.com

Overview
Setup
Components
Conclusion

Overview

The Design package provides APIs to support adding material design components and patterns to your apps.

The Design Support library adds support for various material design components and patterns for app developers to build upon, such as navigation drawers, floating action buttons (FAB), snackbars, and tabs.

Setup

To get started you just need to add this line to your module's build.gradle dependencies section:

dependencies {
    ...
    compile 'com.android.support:design:22.2.0'
}

Components

Let's take a look at the different components.

I'm using Chris Banes' sample application Cheessquare for these examples.

https://github.com/chrisbanes/cheesesquare

Main Activity

The main activity consists of a DrawerLayout, which acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from the edge of the window.

@layout/activity_main.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/include_list_viewpager" />

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

NavigationView

Added NavigationView for implementing navigation drawer contents, including the ability to inflate menu items via a Menu Resource.

@layout/nav_header.xml

<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="Username"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</LinearLayout>

@layout/drawer_view.xml

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_dashboard"
            android:title="Home" />
        <item
            android:id="@+id/nav_messages"
            android:icon="@drawable/ic_event"
            android:title="Messages" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/ic_headset"
            android:title="Friends" />
        <item
            android:id="@+id/nav_discussion"
            android:icon="@drawable/ic_forum"
            android:title="Discussion" />
    </group>

    <item android:title="Sub items">
        <menu>
            <item
                android:icon="@drawable/ic_dashboard"
                android:title="Sub item 1" />
            <item
                android:icon="@drawable/ic_forum"
                android:title="Sub item 2" />
        </menu>
    </item>

</menu>

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    if (navigationView != null) {
    setupDrawerContent(navigationView);
    }

    ...
}

CoordinatorLayout

Added CoordinatorLayout, a general purpose layout, used for building dependencies between sibling views and allowing easy scrolling reactions between components via CoordinatorLayout.Behavior. Many of the Design Library components rely on being a child of a CoordinatorLayout.

@layout/include_list_viewpager.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout ...>

        <android.support.v7.widget.Toolbar ... />

        <android.support.design.widget.TabLayout ... />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager ... />

    <android.support.design.widget.FloatingActionButton ... />

</android.support.design.widget.CoordinatorLayout>

AppBarLayout

Added AppBarLayout, a container for a Toolbar and other views (such as TabLayout) for reacting to scrolling events by scrolling off the screen, becoming visible in reaction to a downward scroll, or collapsing/uncollapsing before scrolling off/onto the screen.

@layout/include_list_viewpager.xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.AppBarLayout>

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    final ActionBar ab = getSupportActionBar();
    ab.setHomeAsUpIndicator(R.drawable.ic_menu);
    ab.setDisplayHomeAsUpEnabled(true);

    ...
}

TabLayout

Added TabLayout for implementing fixed and scrollable tabs as well as easy integration with ViewPager.

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

    ...
}

FloatingActionButton

Added FloatingActionButton for implementing a primary action on your interface as a floating action button, supporting either default or mini sizes.

By default, the colorAccent value of your theme will be used for the FAB color.

@layout/include_list_viewpager.xml

<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="@dimen/fab_margin"
    android:src="@drawable/ic_done" />

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null).show();
        }
    });

    ...
}

Detail Activity

The detail activity consists of a CoordinatorLayout containing an AppBarLayout with the header image and a NestedScrollView with the body content. When the NestedScrollView is scrolled down the header image does a parallax effect as it scrolls up.

@layout/activity_detail.xml

<android.support.design.widget.CoordinatorLayout ...>

    <android.support.design.widget.AppBarLayout ...>

        <android.support.design.widget.CollapsingToolbarLayout ...>

            <ImageView ... />

            <android.support.v7.widget.Toolbar ... />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView ...>

        ...

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

    <android.support.design.widget.FloatingActionButton ... />

</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout

Added CollapsingToolbarLayout for controlling how a Toolbar collapses. A toolbar may collapse by: pinning components to the top of the screen while it collapses, introducing parallax scrolling of components such as an ImageView, or adding a content scrim color when the view is partially collapsed.

@layout/activity_detail.xml

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleMarginStart="48dp"
    app:expandedTitleMarginEnd="64dp">

    <ImageView
        android:id="@+id/backdrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:fitsSystemWindows="true"
        app:layout_collapseMode="parallax" />

    <android.support.v7.widget.Toolbar ... />

</android.support.design.widget.CollapsingToolbarLayout>

TextInputLayout

Added TextInputLayout for showing EditText hint and error text as floating labels.

Snackbar

Added Snackbar for providing lightweight feedback with an optional action in an animated snackbar.

Just like a toast, it's pretty simple to trigger a snackbar.

Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
    .setAction("Action", null).show();

Conclusion

You can start using the features of the Design Support library today to make your code simpler, cleaner, and adhere to Google's Material Design standards.

Links:

This presentation: http://tinyurl.com/design-support-library
Cheesesquare Demo: https://github.com/chrisbanes/cheesesquare
Support Library: http://developer.android.com/tools/support-library/

Kyle Sherman <kyle@buzzfeed.com>

Design Support Library

Kyle Sherman

kyle@buzzfeed.com

Table of Contents

Overview

Setup

Components

Main Activity

NavigationView

CoordinatorLayout

AppBarLayout

TabLayout

FloatingActionButton

Detail Activity

CollapsingToolbarLayout

TextInputLayout

Snackbar

Conclusion