/FABScrollAnimations

A very simple library to animate the Support Library FAB on a RecyclerView scroll.

Primary LanguageJavaMIT LicenseMIT

FAB Scroll Animations

With this Android library, you can made this animations with your Support Library Floating Action Button when a RecyclerView is beeing scrolled:

DEFAULT FADE FLOAT

###Demo:

Video demo:

You can download the sample apk here.


###Requirements:

  • The Android Support Library v7 AppCompat.
  • The Android Support Design Library Floating Action Button.
  • A CoordinatorLayout as the master layout.
  • A RecyclerView with the scroll content.

###Usage:

####Step: 1 Include the fabscrollanimations.jar file to your libs folder. ####Step: 2 Ensure that your layout starts with a CoordinatorLayout. ####Step: 3 This library only works with a RecyclerView, so if you have a ListView, you'll need to migrate it (this tutorial can be useful for it). ####Step: 4 An example layout structure can be:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/plus"
        app:rippleColor="#4DFFFFFF"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:layout_anchor="@+id/recyclerview"
        app:layout_anchorGravity="bottom|end"
        app:layout_behavior="com.marcoscg.fabscrollanimations.Fade"/>

</android.support.design.widget.CoordinatorLayout>

You have to emphasize the last 3 lines of code of the FloatingActionButton.

        app:layout_anchor="@+id/recyclerview"
        app:layout_anchorGravity="bottom|end"
        app:layout_behavior="com.marcoscg.fabscrollanimations.Fade"

The first one anchor the FAB with the RecyclerView dimensions.

The second one controls the FAB gravity.

The third one tells to the FAB the animation that it have to do when the RecyclerView is beeing scrolled.


There are currently three animations:

  • DEFAULT:

    Use this layout_behavior:

        app:layout_behavior="com.marcoscg.fabscrollanimations.Default"
  • FADE:

    Use this layout_behavior:

        app:layout_behavior="com.marcoscg.fabscrollanimations.Fade"
  • FLOAT:

    Use this layout_behavior:

        app:layout_behavior="com.marcoscg.fabscrollanimations.Float"

See the sample project for clarify any queries you may have.