Skip to content

Design Support Library

Jump to bottom
Roger Hu edited this page Aug 27, 2016 · 134 revisions

Overview

At their I/O 2015 conference, Google announced a new design support library, which helps bring a lot of material design components including a navigation drawer view, floating labels, floating action buttons, snackbars, and a new framework to tie motion and scroll events. The library is supported for Android version 2.3 and higher.

Features

The support design library has the following key features:

  1. FloatingActionButton - A round button at the bottom right denoting a primary action on your interface. Promoting key actions within a modern material design app.
  2. TabLayout - An easier way to put tabs around a ViewPager which acts as sliding tabs between fragments within an app.
  3. NavigationView - An easier way to provide a modern navigation drawer from the left with a header and a series of navigation items.
  4. SnackBar - Shown on the bottom of the screen and contains text with an optional single action. They automatically time out after the given time length by animating off the screen.
  5. TextInputLayout - Float the hint above any text field as the user is entering information and/or add a character counter.
  6. CoordinatorLayout - Provides an additional level of control over scroll and touch events between child views.
    • AppBarLayout allows your toolbar and other views to react to scroll events.
    • CollapsingToolbarLayout extend this to allow the toolbar to collapse as the user scrolls through a view.
    • Bottom Sheets to expose a sheet of material that slides up from the bottom of the screen.
  7. PercentRelativeLayout and PercentFrameLayout to enable views to occupy percentage-based dimensions.
  8. Vector Drawables to reduce the need to include images for every density size.
  • Vector drawables are compatible back to Android 2.1 (API 7), but animated vector drawables are only back-ported to Android 3.0 (API 11).
  1. Transitions framework for animating view hierarchies down to Android 4.0 (API 14) . Currently, there is no backported support for activity/fragment transitions used in this API.

Setup

Make sure that you have at least the Android Gradle plugin v2.1.0 supported.

dependencies {
    classpath 'com.android.tools.build:gradle:2.1.0'
}

There is a new support design library that must be included. This library also depends on updated versions of the AppCompat library to be included. If you are not currently using this library, check out this migration guide. In addition, make sure these versions have been updated.

Update your root build.gradle file:

android {
   compileSdkVersion 24  // needs to be consistent with major support libs used
}

ext {
  supportLibVersion = '24.2.0'  // variable that can be referenced to keep support libs consistent
}

Add these dependencies to your app/build.gradle file:

dependencies {
    compile "com.android.support:appcompat-v7:${supportLibVersion}"
    compile "com.android.support:design:${supportLibVersion}"
}

If you are using the RecyclerView, CardView, or any other support v7 related libraries you should also upgrade the versions. The RecyclerView for instance has features that are used with this new design support library.

dependencies {
    compile "com.android.support:recyclerview-v7:${supportLibVersion}"
}

Adding Percent Support Library

To add the percent support library, you need to add this statement:

dependencies {
    compile "com.android.support:percent:${supportLibVersion}"
}

Adding Vector Drawable Library

Android Studio v1.4 provides backwards support for vector drawables to pre-Lollipop devices by creating the PNG assets automatically at compile time. The support library eliminates this necessity by providing vector drawable support for older Android versions, but we need to first disable this auto-generation tool by adding these lines to our app/build.gradle configuration:

// This config only works for Android Gradle Plugin v2.1.0 or higher:
android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
    }  
 }

Finally, the libraries need to be added:

dependencies {
    compile "com.android.support:support-vector-drawable:${supportLibVersion}" // VectorDrawableCompat 
    compile "com.android.support:animated-vector-drawable:${supportLibVersion}" // AnimatedVectorDrawableCompat
}

Check out the vector drawables guide for usage details.

Adding Transitions Library

The Transitions API was first introduced in Android 4.4 (KitKat) but now includes back ported support for animating view hierarchies down to Android 4.0. However, there is no support for activity/fragment transitions currently. To use this library, you need to add the library explicitly:

dependencies {
    compile "com.android.support:transition:${supportLibVersion}"
}

Adding Annotations Library

To leverage the annotations library, you can also explicitly add it to your Gradle file. Adding the AppCompat or support design library implicitly adds it:

dependencies {
    compile "com.android.support:support-annotations:${supportLibVersion}"
}

Installing the Library

You normally need to open the SDK Manager and make sure to download the Android Support Repository as well as the latest Android Support Library. However, Android Studio will also show at the bottom any missing libraries and you can click on the Install repository and sync project. The process will only succeed if you specify a valid library and version, but it enables you to upgrade without needing to open the SDK Manager.

If you are using any type of continuous build system and need to help automate downloading of updates to the support library, you can use Jake Wharton's SDK Manager to download the packages for you.

Sample Code

If you want to see how to use the various components, check out this sample code. For an example of the percent support library, see this sample code.

Official Source Code

The Android Open Source Project (AOSP) hosts the major release versions for this library, which can be found here. For instance, if you are curious about what styles can be overridden for the different components, see this link.

The latest source code updates for the support library are now always included since v23.1.0 in your SDK directory (i.e. Library/Android/sdk/extras/android/m2repository/com/android/support/design for Mac OS X).

Change Log

Changes in Support Library v23

Changes in Support Library v23.1

  • TextInputLayout and EditText now includes the ability to add a character counter. (view guide)

  • A snap flag can also be added to the list of scrolling effects declared in AppBarLayout. (view guide)

  • A setOnDragListener() method has been added to AppBarLayout. (view guide)

  • An aspectRatio attribute is now supported in PercentRelativeLayout. (view guide)

  • A new item animation interface for the RecyclerView. (view guide)

  • Custom views can be provided for NavigationView rows. (view guide)

Changes in Support Library v23.1.1

  • NavigationView now contains a getHeaderView() method (view guide)

Changes in Support Library v23.2

  • Added support for bottom sheets. (view guide)
  • Added setup instructions for vector drawables. (view guide)

Changes in Support Library v24.2.0

  • TextInputLayout and EditText now includes the ability to add password visibility toggles. (view guide)

References

Created by CodePath with much help from the community. Contributed content licensed under cc-wiki with attribution required. You are free to remix and reuse, as long as you attribute and use a similar license.

Finding these guides helpful?

We need help from the broader community to improve these guides, add new topics and keep the topics up-to-date. See our contribution guidelines here and our topic issues list for great ways to help out.

Check these same guides through our standalone viewer for a better browsing experience and an improved search. Follow us on twitter @codepath for access to more useful Android development resources.

Clone this wiki locally