Skip to content

Design Support Library

Jump to bottom
Slava Panasenko edited this page Aug 30, 2019 · 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. Note this class is deprecated and ConstraintLayout should be used for more complex layouts.
  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. Animating view hierarchies using the Transitions framework down to Android 4.0 (API 14) . Currently, there is no backported support for activity/fragment transitions used in this API.
  2. Bottom Navigation Views for easily switching from 3 to 5 tabbed items.

Setup

Make sure your top-level build.gradle includes the following:

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        jcenter() 
        google()  // new as of Gradle v4.1 (not to be confused the the Android Gradle plugin below)
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.4.2'
    }
}

There is a new support design library that must be included. This library also depends on AndroidX 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 27  
}

ext {
  appCompatVersion = '1.0.0'
  designSupportVersion = '1.0.0'
  recyclerViewVersion = '1.0.0'
}

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

dependencies {
    implementation "androidx.appcompat:appcompat:${appCompatVersion}"
    implementation "com.google.android.material:material:${designSupportVersion}"
}

If you are using the RecyclerView, CardView, or any other external dependencies make sure to update them. The RecyclerView for instance has features that are used with this new design support library.

dependencies {
    implementation "androidx.recyclerview:recyclerview:${recyclerViewVersion}"
}

Adding Percent Support Library

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

dependencies {
    implementation "androidx.percentlayout:percentlayout:1.0.0"
}

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 {
    implementation "androidx.vectordrawable:vectordrawable:1.0.0" // VectorDrawableCompat 
    implementation "androidx.vectordrawable:vectordrawable-animated:1.0.0" // 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 {
    implementation "androidx.transition:transition:1.1.0"
}

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 {
    implementation "androidx.annotation:annotation:1.1.0"
}

Sample Code

Sample code uses outdated Support Library, check Migration Guide if you want to copy the code from samples. 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.

Change Log

For changes and latest versions of AndroidX library visit official Versions page. Remember that AndroidX replaced all old Support Libraries.

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