Material Design in a single pack — Android Design Library

4 min readJul 6, 2016

Let me tell you something about Android Design Libraries.

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.

On top of being easy to use, the Design Support Library is backwards compatible to API 7. The library is supported for Android version 2.1 and higher.

The support design library has the following features-

FloatingActionButton
SnackBar
NavigationView
TabLayout
TextInputLayout
CollapsingToolbarLayout
AppBarLayout
CoordinatorLayout
PercentRelativeLayout/PercentFrameLayout

Floating Action Button

· It is a round button denoting a primary action on your interface. Floating action buttons are used for a promoted action.

· In addition to the normal size (56dp) floating action button, it supports the mini size (40dp) when visual continuity with other elements is critical.

· For example, if we are using an email App and we are listing the inbox folder, the promoted action might be composing a new message.

SnackBar

· Traditionally, if you wanted to present quick brief feedback to the user, you would use a Toast. Now there is another option — the Snackbar. Providing lightweight, quick feedback about an operation is a perfect opportunity to use a Snackbar.

· Snackbars are shown at the bottom of the screen and contain text with an optional single action. They automatically time out after the given time by animating off the screen. Users can also swipe them away before the timeout.

· By including the ability to interact with the Snackbar through actions and swiping to dismiss, they are considerably more powerful than toasts.

Navigation View

· The Navigation Drawer is a common component in Android apps. An easier way to provide a modern navigation drawer from the left with a header and a series of navigation items.

· Navigation View provides the framework you need for the navigation drawer as well as the ability to inflate your navigation items through a menu resource.

· Implementing one was never a quick process, but now with the Design Support Library, its implementation is much simpler.

Tab Layout

The Design library’s TabLayout implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally.

Collapsing Toolbar Layout

· CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It allows the toolbar to collapse as the user scrolls through a view.

· This setup uses CollapsingToolbarLayout’s app: layout_collapseMode=”pin” to ensure that the Toolbar itself remains pinned to the top of the screen while the view collapses.

App Bar Layout

· AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.

· It allows your toolbar and other views to react to scroll events.

Coordinator Layout

· CoordinatorLayout is a super-powered FrameLayout. As you may have guessed from its name, the super power of this layout is the ability to coordinate dependencies between child views.

· CoordinatorLayout is intended for two primary use cases:

As a top-level application decor or chrome layout.
As a container for a specific interaction with one or more child views.

After discussing the features of Android Design Support Library, Yogesh moved on to give us a quick session on GitHub.

GitHub is an invaluable tool to all the programmers. GitHub is a web-based Git repository hosting service. Unlike Git, which is strictly a command-line tool, GitHub provides a Web-based graphical interface and desktop as well as mobile integration.

It also provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project.

Moreover, we got to make a demo app from scratch. Bonus! You can have a look at the code, here is the link to the GitHub repository — Demo App.