Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

Quick Tips to Start Using ExtendedFloatingActionButton

 

 
Viktoriia.io
Software Developer, Android https://www.linkedin.com/mwlite/in/viktoriia-iotukhivska-41a3434a
Published: January 18, 2021
Tweet
Share
 
This article will provide you with the base knowledge & usage tips for adding Extended FAB to your project.

 

https://material.io/components/buttons-floating-action-button#extended-fab

 

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.

 

Image for post

https://material.io/components/buttons-floating-action-button#extended-fab

 

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:

 

Image for post

 

Image for post

 

  • 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.

 

Image for post

https://developer.android.com/reference/com/google/android/material/floatingactionbutton/ExtendedFloatingActionButton

 

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:

  1. 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.”
  2. 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.
  3. 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.
  4. 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

 

 

 

 

Tags: Android, Android App Development, Material Design, Floating Action Button, Kotlin

 

View original article at: 


 

Originally published: November 25, 2020

Android News
Compose CameraX on Android
Compose CameraX on Android

By Peng Jiang

Android new UI toolkit Jetpack compose is in beta now, which has all the features you need to build production-ready apps. CameraX is another Jetpack support library, which let you control the camera easier. As compose is still under development, lots of the views are still not available the compose way.

By ProAndroidDev -
Android News
Getting… your BottomSheetScaffold working on Jetpack Compose Beta 03
Getting… your BottomSheetScaffold working on Jetpack Compose Beta 03

By Carlos Mota

It’s Monday, no releases this week, and… there’s a new version of Jetpack Compose — beta 03—available. What a perfect time to just increment 02 to 03 and see what’s new. The API is (almost) final so after updating from alpha to beta there weren’t any big changes to do. However, and remember that’s still in development, there’s always something that I need to update. 

By ProAndroidDev -
Android News
Noisy Code With Kotlin Scopes
Noisy Code With Kotlin Scopes

By Chetan Gupta

Scopes make your code more readable? think again... You are going to encounter these scope functions namely let, run, apply, also, within every Kotlin codebase, along with all the mischievous ways developers exploit their usage from the way they were intended for. Let see how popular opinion on those ends up just as a code noise.

By ProAndroidDev -
Android News
Improving Android DataBinding with Bindables library
Improving Android DataBinding with Bindables library

By Jaewoong Eum

DataBinding is one of the most important factors for MVVM architecture. The basic concept of DataBinding is to link the view and view model via observer patterns, properties, event callbacks, etc. Linking and automating communication between the view via the bound properties or something in the view model has a lot of benefits in the MVVM architecture concept.

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One