Material Design QuickTip - Floating Action Button and Snackbar

16 July 2015

Let's explore some Material Design UI components and use Butter Knife to access this components easily

Some weeks ago I was having a conversation with some designers at R/GA. In this talk we discussed about a specific topic in Material Design related to making all the apps becoming almost visually equals between them.

My friend Fabricio Teixeira wrote a very good post about that, covering his thoughts and comparing apps. In that time, Google had not yet released any supporting library to help developers to develop apps using Material Design.

But after Google I/O 2015 we can now use Android Design Support Library to bring material design to life in a easier way.

In this article we'll see how to implement two of these UI components: Floating Action Button and Snackbar.

Setting Up Dependencies

We are goig to use Gradle to include the Android Design Support Library. Also, we'll use Butter Knife to easily connect the views and logic.

UI components

After gradle sync we'll have access to many UI Material Design components. In order to have the Floating Action Button and the Snackbar, we'll have the following layout structure.

Note that we don't need to make any reference to the Snackbar in the layout file. Snackbar works like the old Toast component and will be activated from our logic layer. The Floating Action Button has many interesting properties, but whats really important to notice here is that it's inside a CoordinatorLayout.

CoordinatorLayout may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.

In this example it's important to move the Floating Action Button up when the Snackbar appears.


Now we need some logic for our layout. We will add some behavior for the FAB click. When clicked, we'll activate Snackbar. Take a look at three important methods calls: make, setAction and show.

Another important step here is to get references to the UI view components using Butter Knife. Using just a simple annotation in the begging of the file we wi reach the components we need. Besides that, Butter Knife also helps us with the onClick() mapping to the UI button and the logic.

The final screen

Not so difficult, yep? For more UI components visit the official Android Design Support Library website.

Follow me on Twitter! @anderson_leite
comments powered by Disqus