Quick Tips to Start Using ExtendedFloatingActionButton
This article will provide you with the base knowledge & usage tips for adding Extended FAB to your project.
General Info
Today we’re going to have a quick dive into Material ExtendedFloatingActionButton. Good that we have it already done by Android team :).
I’m pretty sure that most of you have already used FloatingActionButton (FAB), and using ExtendedFloatingActionButton (EFAB) won’t bring much effort. EFAB is basically a FAB with some explanation text and as a result — extended behaviors required for better UX on scroll.
Interestingly, EFAB doesn’t extend FAB like you might assume. EFAB extends MaterialButton which is Button when we go deeper, while FAB is an ImageButton, therefore an ImageView. If you wanted to create some common methods, extension functions, or use generics when using EFAB and FAB — bad news for you 🥺, you can only do this with some common interfaces they implement, but it’s not the best option.
Quick Start
To use EFAB in your own project, there are three steps:
Step 1: Add dependency in build.gradle to material (latest version)
implementation "com.google.android.material:material:1.2.1"Step 2: Adjust app theme in styles.xml to one of Theme.MaterialComponents
<style name="AppTheme" parent="@style/Theme.MaterialComponents.Light.NoActionBar">Step 3: Add EFAB in your layout.xml
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="@+id/my_extended_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:icon="@drawable/ic_my_icon"
tools:text="My Action" />Anatomy & Behaviour
EFAB differs from FAB in its UI. It’s suggested that EFAB can have not only icon but also a text label, but it’s not a must to have both as you’ll see in the examples below.
As for the behavior — most probably the one you will use most of the time is “Transformation to a standard FAB” on scrolling or resizing your app.
In my experience, this is a handy animation for scrollable screens if you have content inside ScrollView or you’re using RecyclerView.
If you want your button to behave exactly as in material.io sample, and you’re using RecyclerView, use this listener via addOnScrollListener to your recyclerView:
class ExtendedFloatingActionButtonScrollListener(
private val floatingActionButton: ExtendedFloatingActionButton
) : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
if (newState == RecyclerView.SCROLL_STATE_IDLE
&& !floatingActionButton.isExtended
&& recyclerView.computeVerticalScrollOffset() == 0
) {
floatingActionButton.extend()
}
super.onScrollStateChanged(recyclerView, newState)
}
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
if (dy != 0 && floatingActionButton.isExtended) {
floatingActionButton.shrink()
}
super.onScrolled(recyclerView, dx, dy)
}
}Usage: Tips to Face No Issues
If you’ve never used EFAB before you might face some common problems that could make you go crazy in attempts to solve them. :) Here are the issues I faced when started using EFAB:
- EFAB looks very tiny, I have to care about paddings myself…
Tip: No it shouldn't require any efforts from you :) Most probably you forgot to change your app theme to one of Theme.MaterialComponents. In my case I use the following:
- EFAB doesn’t adjust properly when I shrink it…
Tip: It could be the same problem of wrong theme parent for your app as shown above. For me, the mistake was also in setting iconPadding attribute programmatically when I was doing styling. The button looks cool just out of the box, make sure you’re not overcomplicating it’s usage, as you most probably did with MaterialButtons before. - I don’t understand how to style EFAB properly…
Tip: That’s quite easy, taking into account that EFAB is MaterialButton many attributes are inherited from it. (Note: You can also use them programmatically, like
button.iconTint = …, button.icon = …). Please try to stick to these attributes and don’t mess up with attributes inherited from TextView! You might see issues in this case.
How to make your button look fancy
Not all EFABs look good & work well when it comes to real apps that are presented to customers or users. To make you and your users happy when they see your newly developed EFAB, please make sure you follow these rules:
- Be concise & clear in action text.
Nobody needs long text in action buttons. All actions should be:
- Understandable without extra efforts (no Google, long tap, double-tap, shake, opening the link)
- Easy to replace with an icon (if you can’t express action with an icon then it’s not an action, it’s a manual, document, caution, bubble, snack bar, whatever).
If you follow this simple rule you won’t need to search for the right way of showing twolines of text, ellipsizing it, and doing other wrong things. :) But I must say that ellipsizing is not prohibited by Material IO guidelines: “Only truncate text if shorter text isn’t an option.” - Find the right placement.
Advice from material.io: “The extended FAB can be positioned in the center, left, or right side of a screen.” Yes you can choose any position of your button, but please first analyse the majority of target users who will be using your app. If they use right hand to handle the phone and with its fingers to do actions in the app — the right side for the action button is preferable than the center, even if you shrink the button on scroll — most probably users will always tap on it accidentally when scrolling inside comfort area. Again this is more an advice, please reference to researches and studies on this topic, like https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php or https://sven-mayer.com/wp-content/uploads/2018/01/le2018fingers.pdf. - Use known pictograms as icons.
I agree, it’s very good if the majority of users can understand what your icon means without even reading text. Your button may shrink on scrolling and the user will see only the icon, so the text should be guessable at the list. But it doesn’t mean text is useless, for instance, “+” icon can mean “add new mail” or “add the new account to current” it’s better to clarify with the text what you mean. - Don’t overlap your content with actions.
The good app shows to the user only the most valuable information, we don’t have much space on the screen. Nobody wants to overlap key information and make users angry trying to scroll every time they want to read what exactly is behind that big button “Share”. Try to find a balance between easy to find and unobtrusive.
Conclusion
Looking back to the past, when Android developers had to reinvent the wheel, were writing own FABs, or using unofficial GitHub libraries, I see that now is the luxurious time for us — we can simply use what Android developers made for us. Extended FAB is of such components you usually see in the Material guides and apps on your phone, and the only thing that is required — simply reading this friendly manual and following advice to make your EFAB look fancy & understandable.
Thanks for reading, I hope you enjoyed it.
References
- Material IO concepts & UI guidelines for the EFAB https://material.io/components/buttons-floating-action-button#extended-fab
- Android documentation for the EFAB https://developer.android.com/reference/com/google/android/material/floatingactionbutton/ExtendedFloatingActionButton
- Some articles about fingers placement on the phone to place EFAB correctly: https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php or https://sven-mayer.com/wp-content/uploads/2018/01/le2018fingers.pdf
