Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Arguably the best-known Material Design component, and the one most unique to Material Design, is the Floating Action Button, or FAB. A floating action button represents the primary action of a screen.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Arguably the best known
Material Design component, and
0:00
the one most unique to Material Design,
is the Floating Action Button, or FAB.
0:04
The introduction to this element in
the documentation sounds pretty simple.
0:11
A Floating Action Button represents
the primary action of a screen.
0:16
Great, if my screen has one
obvious action that's more
0:22
important than any other, why not give
users a prominent interface element?
0:26
Gmail is probably the best
known example of this concept.
0:32
There are other tasks I might
want to accomplish from my inbox,
0:37
like reading messages, or
switching to a different folder.
0:41
But if I'm here to compose a new message,
0:45
it would be hard to
overlook this plus button.
0:47
It's near my thumb, so it's easy to reach.
0:51
And even as I scroll through my messages,
0:54
the button stays in place
floating above all other content.
0:56
The Floating Action Button isn't
appropriate for every situation, however.
1:02
You'll notice I haven't used it yet
in my demo.
1:07
The Search Results page didn't
have a single primary action,
1:11
but rather
a series of recipes with equal weight.
1:15
While the Search page does have
a primary action, searching for recipes,
1:19
it makes more sense to provide users
with a search interface right away.
1:25
What if you're thinking of using
more than one Floating Action Button
1:31
on the same screen?
1:35
You'll have to use your own best judgment.
1:37
The Material Design docs say don't
display multiple FABs on the same screen,
1:40
except that you can use two when
each button represents a distinct,
1:47
equally important action.
1:52
Now, here's the home screen for
Google Maps.
1:54
And I see three Floating Action Buttons,
two larger default buttons for
1:58
finding my location and
getting directions, and
2:03
a mini-sized FAB to
toggle between map types.
2:06
So I guess the lesson here is,
2:11
don't use more than one FAB per screen,
except when you really, really want to?
2:13
The rules are clearer for
designing the button.
2:19
No layering badges above the button.
2:23
No ambiguous icons, and
no text labels on a default
2:28
or mini FAB, and positive actions only.
2:33
No using a Floating Action Button to
trash a file, or cancel an activity.
2:38
If your icon or primary activity
is less than completely obvious,
2:46
there's an extended FAB button
available with room for a text label.
2:51
If you check out the file called
Design a Floating Action Button
2:58
in the Project Files folder,
3:03
you'll see that I have created a simple
screen for an individual recipe.
3:05
The only thing missing from the screen
is some sort of primary action.
3:10
Let's determine what
that action should be.
3:15
The FAB section of the Material
Design UI kit contains designs for
3:19
the standard mini, and
extended Floating Action Button.
3:24
If I've decided to make the primary action
on the screen favorite this recipe,
3:30
the heart icon indicates like or
3:36
favorite in enough apps,
that users should recognize it.
3:39
I changed the background color from
purple to gray for my wireframe.
3:45
But otherwise, leave the design
alone after I paste it in.
3:56
However, note that my app has
a category called Planner.
4:01
Would pressing Favorite add the current
recipe to the user's planner?
4:06
If that's the primary
action on the screen,
4:11
the icon ought to make that more obvious.
4:14
Let's see whether I can find
a system icon to replace the heart.
4:19
A plus icon, like Gmail uses,
4:30
might suggest creating new content,
like adding a brand new recipe.
4:33
That could be misleading here.
4:39
How about the calendar icon by itself?
4:48
That doesn't really suggest an action.
4:51
Users might expect this button
to merely launch the planner.
4:55
I could create a new icon by
combining the calendar and plus icons.
5:00
But I'm still not completely
confident the meaning is clear.
5:13
Fortunately, this is where the extended
FAB comes in with room for a text label.
5:19
I'll make a component of my new icon,
combining the calendar and
5:25
plus symbol, and
5:30
paste the extended FAB in from the UI kit.
5:36
I'll make the background gray once again,
and
5:51
change the text label
to read Add to Planner.
5:55
This takes up more screen real
estate than the standard FAB, but
6:07
should remove the ambiguity from
the screen's primary action.
6:12
To be sure which Floating Action Button
approach is best,
6:17
I'd want to test my design on users.
6:22
Check the teacher's notes for
more on user testing.
6:25
That concludes our look
at Material Design.
6:29
If you're tasked with designing
an Android app, keep those docs handy.
6:32
And combine them with your own
observations on how users interact
6:37
with their Android devices.
6:41
You'll have the tools you need to
create predictable interfaces and
6:43
satisfying user experiences.
6:47
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up