FAB Scroll Animations

Additional

Language
Java
Version
N/A
Created
Mar 27, 2016
Updated
Jun 22, 2016
Owner
Marcos Calvo García (marcoscgdev)
Contributor
Marcos Calvo García (marcoscgdev)
1
Activity
Badge
Generate
Download
Source code
APK file

Advertisement

FAB Scroll Animations

With this Android library, you can made this animations with your Support Library Floating Action Button when a NestedScrollView 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 NestedScrollView based scrolling content (Ex: RecyclerView).

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 NestedScrollView based content.

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 line of code of the FloatingActionButton.

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

It tells to the FAB the animation that it have to do when user scrolls the content.


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 to clarify any queries you may have.