Android ExtendedFloatingActionButton — fast tricks to begin utilizing it right this moment | by Viktoriia.io | Nov, 2020

Normal information

Immediately we’re gonna have a fast dive into Materials ExtendedFloatingActionButton from https://material.io/components/buttons-floating-action-button#types-of-transitions

Good that now we have it already accomplished by Android staff 🙂

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

Be aware: Apparently, however ExtendedFloatingActionButton (EFAB) doesn’t lengthen FloatingActionButton (FAB) the way you would possibly already assumed. EFAB extends MaterialButton which is Button once we go deeper, whereas FAB is an ImageButton, due to this fact an ImageView. If you happen to wished to create some frequent strategies, extension features or use generics when utilizing EFAB and FAB — unhealthy information for you :(, you may solely do that with some frequent interfaces they implement, but it surely’s not the most suitable choice.

Fast begin

To make use of EFAB in your individual challenge do 3 steps:

Step 1: add dependency in construct.gradle to materials (newest model)

implementation "com.google.android.materials:materials:1.2.1"

Step 2: regulate app theme in types.xml to one among Theme.MaterialComponents

<fashion title="AppTheme" dad or mum="@fashion/Theme.MaterialComponents.Gentle.NoActionBar">

Step 3: add EFAB in your structure.xml

<com.google.android.materials.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="dad or mum"
app:layout_constraintEnd_toEndOf="dad or mum"
app:icon="@drawable/ic_my_icon"
instruments:textual content="My Motion" />

Anatomy & behaviour

EFAB differs from FAB in it’s UI, it’s recommended that EFAB can haven’t solely icon, but additionally a textual content label. (but it surely’s not a should to have each as you’ll see within the examples under)

As for the behaviour — most likely the one you’ll use more often than not is “Transformation to a regular FAB” on scrolling or resizing your app.

In my expertise it is a useful animation for scrollable screens, in case you have content material inside ScrollView otherwise you’re utilizing RecyclerView.
If you would like your button to behave precisely as in materials.io pattern, and also you’re utilizing RecyclerView, use this listener by way of addOnScrollListener to your recyclerView:

class ExtendedFloatingActionButtonScrollListener(
personal val floatingActionButton: ExtendedFloatingActionButton
) : RecyclerView.OnScrollListener() {
override enjoyable onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
if (newState == RecyclerView.SCROLL_STATE_IDLE
&& !floatingActionButton.isExtended
&& recyclerView.computeVerticalScrollOffset() == 0
) {
floatingActionButton.lengthen()
}
tremendous.onScrollStateChanged(recyclerView, newState)
}
override enjoyable onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
if (dy != 0 && floatingActionButton.isExtended) {
floatingActionButton.shrink()
}
tremendous.onScrolled(recyclerView, dx, dy)
}
}