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.github.shell-software:fab:1.0.1'
}

Demo

Watch the Full Demo Video on YouTube

Floating Action Button types

Floating action buttons come in two sizes: the DEFAULT, which should be used in most cases, and the MINI, which should only be used to create visual continuity with other elements on the screen

DEFAULT	MINI

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

Here are some colors examples:

Green 500	Amber 500	Blue Grey 500

Shadow

Shadow enabled by default and has starndard settings. 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 disabled by default. Stroke can be modified in two ways: width and color

Thin	Medium	Thick

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

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.software.shell.fab.FloatingActionButton 
            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>

Object creation

import com.software.shell.fab.FloatingActionButton;

// ...

Context context = getContext();
FloatingActionButton actionButton = new FloatingActionButton(context);

Customization

XML configuration example

Firstly add the namespace:

xmlns:fab="http://schemas.android.com/apk/res-auto"

Then refer the added namespace to configure Floating Action Button parameters

<com.software.shell.fab.FloatingActionButton 
            android:id="@+id/action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            fab:type="normal"
            fab:button_color="@color/fab_material_lime_500"
            fab:button_colorPressed="@color/fab_material_lime_900"
            fab:image="@drawable/fab_plus_icon"
            fab:image_size="24dp"
            fab:shadow_color="#757575"
            fab:shadow_radius="1.0dp"
            fab:shadow_xOffset="0.5dp"
            fab:shadow_yOffset="1.0dp"
            fab:stroke_color="@color/fab_material_blue_grey_500"
            fab:stroke_width="1.0dp"
            fab:animation_onShow="@anim/fab_roll_from_down"
            fab:animation_onHide="@anim/fab_roll_to_down"
            />

The same configuration example using code

//Button type
actionButton.setType(FloatingActionButton.Type.MINI);

//Button colors
actionButton.setButtonColor(getResources().getColor(R.color.fab_material_lime_500));
actionButton.setButtonColorPressed(getResources().getColor(R.color.fab_material_lime_900));

//Image
actionButton.setImageDrawable(getResources().getDrawable(R.drawable.fab_plus_icon));
actionButton.setImageSize(24.0f);

//Shadow
actionButton.setShadowColor(Color.parseColor("#757575"));
actionButton.setShadowRadius(1.0f);
actionButton.setShadowXOffset(0.5f);
actionButton.setShadowYOffset(1.0f);

//Stroke
actionButton.setStrokeColor(getResources().getColor(R.color.fab_material_blue_grey_500));
actionButton.setStrokeWidth(1.0f);

//Animations
actionButton.setAnimationOnShow(FloatingActionButton.Animations.ROLL_FROM_DOWN);
actionButton.setAnimationOnHide(FloatingActionButton.Animations.ROLL_TO_DOWN);

License

  Copyright 2015 Shell Software Inc.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

Shell Software Inc. links

• Google+
• Twitter Page