Practice English Speaking&Listening with: Adding a FAB

Difficulty: 0

Now that we've identified what should be our promoted action, let's create one.

The designs port library implements all the features one would have to build

into a fab, like touch elevation and interaction with other elements.

Some features, like ripples, are not supported in all versions of Android,

even with the use of the support library.

Depending on when your project was created, or

what version of Android Studio you use to create it,

the project might already have some of the things I'm going to add.

On the other hand, you'll likely come across a legacy app that you would need

to update, so it's good to know what to look for.

First you'll need to add these two lines to your build.gradle file.

I'll explain why we need appcompat in just a second.

The design library adds several widgets and

layouts that make implementing material design much easier.

22.2.0 was the most recent version at the time of recording, but

use whatever is the latest and greatest.

So here's our definition of the floating action button that will be in our

layout file.

So as you can see some of these attributes are on the app namespace, and

some are on Android namespace.

Let's focus on the app ones.

So as Nick mentioned before, the fab can be normal sized or mini.

This corresponds to 56dp.

Next we have an elevation, a resting elevation for

our floating action button, we want that to be 6dp.

One thing that might be new is layout gravity.

Assuming a left to right layout system, end is a synonym for right.

So it should lay out the fab to the right of whatever element or

your layout.

Next is the pressedTranslationZ property of 12dp, so

when this button is pressed, we want it to raise to a total of 12dp.

That's followed by a bunch of attributes here that you've probably already

seen before.

So we're not going to go over these point by point right now.

Now, if we try to build this right now, it'll refuse to run properly.

Android Studio will first complain that there was an error inflating

the floating action button.

That's because the fab needs AppCompat for style information.

To resolve this last error,

we need to replace instances of Material with AppCompat.

And then you're all set.

You're fab will elevate and show ripples when touched.

And you can treat it like any other button in your UI.

The Description of Adding a FAB