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