Floating Action Button Library for Android

Description

This Library contains implementation of the Floating Action Button for Android.

Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.

Requirements

The Library requires Android SDK version 9 (Gingerbread) and higher.

Gradle Dependency

dependencies {
	compile 'com.scalified:fab:1.1.3'
}

Action Button has a dependency on an external ViewMover library, which in turn has a transitive dependency on the UI Tools library. If any of these libraries are already used in the project they must be excluded as transitive dependencies

Activity Stream

Full ChangeLog

1.1.3 - current

1. Fixed issue #28: move() method smearing on KitKat with snackbar:

   • A fix was made within the dependent ViewMover library. Only ActionButton dependency on ViewMover library was updated

2. Changed the standard Android logging API to SLF4J Logging API

1.1.1 - previous

1. Fixed issue #27: Icon is outside the circle:

   A call to Canvas.restore() without calling the Canvas.save() first resulted in the unpredictable behaviour. Added call to Canvas.save() before Canvas.restore() in the RippleEffectDrawer class

Features in the next versions:

• 2.0.0:

  1. API change. Major refactoring. Deprecated API removal.
  2. New features - confirmed:
     • issue #13: Request - Circular ProgressBar

Demo

Subscribe the ActionButton YouTube Channel

Button types

Floating action buttons come in 3 sizes:

• DEFAULT (56dp) - used in most cases
• MINI (40dp) - used to create visual continuity with other elements on the screen
• BIG (72dp) - additional button size, useful for large screens (not covered by Material Design)

DEFAULT | MINI | BIG :-:|:-:|:-: | |

Color palette

The Library contains all of the colors 500 and 900 of the Material Color Palette.

Colors 500 are used for the NORMAL button state while 900 ones for the PRESSED state:

Green 500 | Amber 500 | Blue 500 :-:|:-:|:-: | |

Shadow

Shadow enabled by default and has standard settings according to Material Design Guidelines. These settings are suitable in most cases. However, shadow can be modified in three ways: radius, X- or Y-axis offset and color.

Default | Radius | X- and Y- axis offset :-:|:-:|:-: | |

Stroke

Stroke is disabled by default. Stroke can be modified in two ways: width and color.

Thin | Medium | Thick :-:|:-:|:-: | |

Effects

Shadow Responsive Effect

Shadow Responsive Effect means that shadow is changed in response to the user input. Shadow Responsive Effect enabled by default.

Ripple Effect

A touch Ripple Effect indicates where and when a touch occurs within the ActionButton and acknowledges that the touch input was received. Ripple Effect disabled by default.

Shadow Responsive Effect | Ripple Effect :-:|:-: |

Moving

ActionButton can be moved in any direction. ViewMover Library is used for performing the ActionButton moving

Left-Right Move | Up-Down Move :-:|:-: |

Animations

The Library has several predefined animations:

Fade In - Fade Out | Roll From Down - Roll To Down | Jump From Down - Jump To Down :-:|:-:|:-: | |

Scale In - Scale Out | Roll From Right - Roll To Right | Jump From Right - Jump To Right :-:|:-:|:-: | |

Usage

Creation

Declaration inside XML resource

ActionButton button can be declared in the XML resource. For instance, using RelativeLayout:

<RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <com.scalified.fab.ActionButton 
            android:id="@+id/action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" 
            android:layout_alignParentRight="true"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            />
</RelativeLayout>

// And then find it within the content view:
ActionButton actionButton = (ActionButton) findViewById(R.id.action_button);

There are no required configuration parameters for it. All of the configuration parameters are optional.

Programmatically

Context context = getContext();
ActionButton actionButton = new ActionButton(context);
// And then add it to the content view

Button actions

Showing and Hiding

Action Button can be shown, hidden or completely dismissed:

actionButton.show();    // shows the button if it is hidden and plays the show animation if set
actionButton.hide();    // hides the button if it is shown and plays the hide animation if set
actionButton.dismiss(); // completely dismisses the button and plays the hide animation if set

After dismissal the button is completely removed from its parent view, so any calls to show() etc. won't be processed.

The current status of the button can be checked with the help of:

// To check whether button is shown (inherited from android.view.View class):
boolean shown = actionButton.isShown();

// To check whether button is hidden:
boolean hidden = actionButton.isHidden();

// To check whether button is dismissed:
boolean dismissed = actionButton.isDismissed();

Playing animations

There are some cases when you need to force playing the animation without calling the show(), hide() or dismiss() methods. For instance, when your button appears within layout in the Activity for the first time. In such cases animations can be played apart from showing, hiding, or dismissing the button:

actionButton.playShowAnimation();   // plays the show animation
actionButton.playHideAnimation();   // plays the hide animation

Animations are played only if set. By default animations are not set.

The best way to play the animation with the Activity launching is to override the onWindowFocusChanged(boolean) and call either playShowAnimation() or playHideAnimation() within it

Moving ActionButton

ActionButton can be moved within its parent container. While