Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shrink and extend function on new ExtendedFloatingActionButton in Material Components for Android is not working

I am using the new ExtendedFloatingActionButton from the Material Components for Android library 1.1.0-alpha06. It is rendered just fine but the 'extend' and 'shrink' methods are not doing anything.

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
                    android:id="@+id/extended_fab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_anchor="@id/bottom_sheet"
                    android:text="Drag map to change location"
                    app:icon="@drawable/my_location"
                    app:backgroundTint="@color/white"
                    app:iconTint="@color/quantum_googblueA200"
                    android:textColor="@color/quantum_googblueA200"
                    app:iconSize="18dp"
                    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
                    android:padding="4dp"
                    android:textSize="12sp"
                    android:textAllCaps="false"
                    android:layout_margin="8dp"
                    app:layout_anchorGravity="right|top"/>

Here's the rendered layout:

Rendered Layout

like image 981
user3391825 Avatar asked Jun 30 '19 04:06

user3391825


People also ask

What is extendedmaterial design buttons in Android?

You may refer to this article: Material Design Buttons in Android with Example, as the ExtendedMaterial design button is child class of the Material design buttons. The article says, the advantages of having Material design buttons, and why the theme needs to be changed.

What is extendedfloatingactionbutton (EFAB)?

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.

What are extended floating action buttons used for?

Extended floating action buttons are used for a special type of promoted action. They are distinguished by an icon and a text floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point. Extended floating action buttons may have icon and text, but may also hold just an icon or text.

How to shrink the floatingactionbutton?

The shrink animation shrinks the FAB to show just the icon. The FloatingActionButton can be sized either by using the discrete sizing modes, a custom size, or for the large FAB by applying the desired style. normal - the normal sized button, 56dp.


1 Answers

Here is a Kotlin version which matches the behavior of the built-in Contacts app. The FAB is extended whenever the RecyclerView is at the top, and the FAB shrinks whenever the user scrolls away from the top.

class FabExtendingOnScrollListener(
    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:

recyclerView.addOnScrollListener(FabExtendingOnScrollListener(fab))
like image 149
Chris Chute Avatar answered Oct 22 '22 10:10

Chris Chute