scalified / fab

Floating Action Button Library for Android

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 moving, translate animation is used. There are methods for moving ActionButton in 4 standard directions:

// Initialize the moving distance
int distance = 100.0f // in density-independent pixels

// Move ActionButton left
actionButton.moveLeft(distance);

// Move ActionButton up
actionButton.moveUp(distance);

// Move ActionButton right
actionButton.moveRight(distance);

// Move ActionButton down
actionButton.moveDown(distance);

The above methods will cover the most cases, however movement can also be customized in more advanced way:

// Initialize the moving parameters
int xAxisDelta = 100.0f // in density-independent pixels
int yAxisDelta = 100.0f // in density-independent pixels
long animationDuration = 500L
Interpolator animationInterpolator = new AccelerateInterpolator();

// Create the moving parameters instance
MovingParams params = new MovingParams(getContext(), xAxisDelta, yAxisDelta, animationDuration, animationInterpolator);

// Move the ActionButton
actionButton.move(params);

ViewMover Library is used for performing the ActionButton moving.

For API lower than Jelly Bean (version code 16) moving is guaranteed to work as expected with FrameLayout and RelativeLayout. Working as expected with other layouts not guaranteed

Customization

Button types

There are three types of Action Button, which you can work with:

• DEFAULT (56dp)
• MINI (40dp)
• BIG (72dp)

By default the button type is set to DEFAULT.

To work with button types use:

// To set the button type:
actionButton.setType(ActionButton.Type.MINI);

// To get the button type:
ActionButton.Type type = actionButton.getType();

Button size

To work with ActionButton size use:

// To get the ActionButton size
float size = actionButton.getSize();

// To set the ActionButton size
actionButton.setSize(60.0f); // in density-independent pixels

Changing the default size of the button breaks the rules of Material Design

Setting the button size explicitly means, that button types with its default sizes are completely ignored. Do not use this method, unless you know what you are doing

Button states

There are two button states, which Action Button may reside in:

• NORMAL
• PRESSED

To work with button states use:

// To set the button state:
actionButton.setState(ActionButton.State.PRESSED);

// To get the button state:
ActionButton.State state = actionButton.getState();

Button colors

Button colors can be set as for the NORMAL state, so for the PRESSED one. By default the following colors are set:

• #FF9B9B9B for the NORMAL state
• #FF696969 for the PRESSED state

To work with button colors use:

// To set button color for normal state:
actionButton.setButtonColor(getResources().getColor(R.color.fab_material_lime_500));

// To get button color for normal state:
int buttonColor = actionButton.getButtonColor();

// To set button color for pressed state:
actionButton.setButtonColorPressed(getResources().getColor(R.color.fab_material_lime_900));

// To get button color for pressed state:
int buttonColorPressed = actionButton.getButtonColorPressed();

Shadow

Shadow can be customized in three ways: color, radius and offset. By default shadow enabled and has the following default values:

• shadowColor = #42000000 (~ light-grey)
• shadowRadius = 8.0f (in density-independent pixels)
• shadowXOffset = 0.0f (in density-independent pixels)
• shadowYOffset = 8.0f (in density-independent pixels)

To work with shadow use:

// To check whether shadow is present:
boolean hasShadow = actionButton.hasShadow();

// To set the shadow color:
actionButton.setShadowColor(getResources().getColor(R.color.fab_material_grey_500));

// To get the shadow color:
int shadowColor = actionButton.getShadowColor();

// To set the shadow radius:
actionButton.setShadowRadius(5.0f);

// To get the shadow radius:
float shadowRadius = actionButton.getShadowRadius();

// To set the shadow X-axis offset:
actionButton.setShadowXOffset(3.5f);

// To get the shadow X-axis offset:
float shadowXOffset = actionButton.getShadowXOffset();

// To set the shadow Y-axis offset:
actionButton.setShadowYOffset(3.0f);

// To get the shadow Y-axis offset:
float shadowYOffset = actionButton.getShadowYOffset();

// To remove shadow:
actionButton.removeShadow();

Shadow radius and offset must be specified in density-independent pixels.

For API 21 Lollipop and higher elevation can be enabled. In this case the default shadow becomes disabled and configuration of any of its parameters will be ignored.

Image

Action Button can have an image centered inside. By default the image absent. Any image can be used for adding. The Library has fab_plus_icon drawable, which can also be used. When an image is set its width and height are changed to the default values, which both are set to 24.0dp (according to material design guidelines). However this size is also adjustable.

To work with image use:

// To check whether image is present:
boolean hasImage = actionButton.hasImage();

// To set an image (either bitmap, drawable or resource id):
actionButton.setImageBitmap(bitmap);
actionButton.setImageDrawable(getResource.getDrawable(R.drawable.fab_plus_icon));
actionButton.setImageResource(R.drawable.fab_plus_icon);

// To get an image:
Drawable image = actionButton.getImage();

// To set the image size (which is by default 24.0dp):
actionButton.setImageSize(30.0dp);

// To get the image size:
float imageSize = actionButton.getImageSize();

// To remove the image:
actionButton.removeImage();

Image size must be specified in density-independent pixels.

Changing the image size breaks the rules of Material Design

Stroke

Stroke can be customized in two ways: width and the color. Stroke disabled by default, however it has the default values:

• strokeColor = Color.BLACK
• strokeWidth = 0.0f (no stroke)

To work with stroke use:

// To check whether stroke enabled:
boolean hasStroke = actionButton.hasStroke();

// To set stroke color:
actionButton.setStrokeColor(getResources().getColor(R.color.fab_material_blue_grey_500));

// To get stroke color:
int strokeColor = actionButton.getStrokeColor();

// To set stroke width:
actionButton.setStrokeWidth(1.5f);

// To get stroke width:
float strokeWidth = actionButton.getStrokeWidth();

// To remove the stroke:
actionButton.removeStroke();

Stroke width must be specified in density-independent pixels

Effects

Shadow Responsive Effect

Shadow Responsive Effect means that shadow is changed in response to the user input. When user clicks the button and holds it, shadow radius increased to a certain value. Then, when user releases the button, shadow radius decreased to its initial value. Shadow Responsive Effect enabled by default.

To work with the Shadow Responsive Effect use:

// To check whether Shadow Responsive Effect enabled:
boolean shadowResponsiveEffectEnabled = actionButton.isShadowResponsiveEffectEnabled();

//To enable or disable Shadow Responsive Effect:
actionButton.setShadowResponsiveEffectEnabled(true);
actionButton.setShadowResponsiveEffectEnabled(false);

For API 21 Lollipop and higher elevation can be enabled. Shadow Responsive Effect won't be available in this case.

Shadow maximum radius value is calculated by multiplying the shadow initial radius and shadow response factor, which is by default 1.75f. Shadow response factor can't be changed.

Note, that having Shadow Responsive Effect enabled leads to increasing of the ActionButton general view size. In this case view size calculated based on the maximum value of the shadow radius. This means, that even if there is a place near the ActionButton unfilled, it is actually used by Shadow Responsive Effect

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. Ripple Effect color by default is a darken variant (20% darker) of the color for the PRESSED state

To work with Ripple Effect use:

// To check whether Ripple Effect enabled:
boolean rippleEffectEnabled = actionButton.isRippleEffectEnabled();

// To enable or disable Ripple Effect:
actionButton.setRippleEffectEnabled(true);
actionButton.setRippleEffectEnabled(false);

// To set button color ripple:
actionButton.setButtonColorRipple(getResources().getColor(R.color.fab_material_grey_900));

// To get button color ripple:
int buttonColorRipple = actionButton.getButtonColorRipple();

Animations

Action Button supports 2 animation types: animation, which is played while showing the button and animation, which is played while hiding the button. By default neither show animation, nor hide animation are set.

To work with animations use:

// To set show animation:
actionButton.setShowAnimation(getResources().getAnimation(R.anim.fab_fade_in));
actionButton.setShowAnimation(ActionButton.Animations.FADE_IN);

// To get show animation:
Animation animation = actionButton.getShowAnimation();

// To remove show animation:
actionButton.removeShowAnimation();

// To set hide animation:
actionButton.setHideAnimation(getResources().getAnimation(R.anim.fab_fade_out));
actionButton.setHideAnimation(ActionButton.Animations.FADE_OUT);

// To get hide animation:
Animation animation = actionButton.getHideAnimation();

// To remove hide animation:
actionButton.removeHideAnimation();

XML full configuration example

Firstly add the namespace:

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

Then refer the added namespace to configure Action Button parameters

<com.scalified.fab.ActionButton 
            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="DEFAULT"
            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:button_colorRipple="@color/fab_material_black"
            fab:rippleEffect_enabled="false"
            fab:shadowResponsiveEffect_enabled="true"
            fab:show_animation="@anim/fab_roll_from_down"
            fab:hide_animation="@anim/fab_roll_to_down"
            />

The above example contains all of the configuration parameters for Action Button, so there is no need to configure all of them, because they all have default values

Logging

To enable logging:

1. Add the following dependency:

   dependencies {
   	compile 'com.github.tony19:logback-android-classic:1.1.1-3'
   }

2. Create the logback.xml file in the src/main/assets with the sample configuration:

   <?xml version="1.0" encoding="UTF-8"?>
   <configuration>
   	<appender name="LOGCAT" class="ch.qos.logback.classic.android.LogcatAppender">
   		<tagEncoder>
   			<pattern>%logger{0}</pattern>
   		</tagEncoder>
   		<encoder>
   			<pattern>%d{HH:mm:ss.SSS} [%thread] [%logger{0}] - %msg%n</pattern>
   		</encoder>
   	</appender>
   
   	<root level="TRACE" additivity="false">
   		<appender-ref ref="LOGCAT" />
   	</root>
   </configuration>

   You may wish to configure different appenders with different log levels for packages, classes etc.

   More information about LOGBack can be found @ LOGBack Project Site

3. Add the following InvalidPackage ignore rule into lint.xml file (located @ the root of the project):

   <issue id="InvalidPackage" >
   	<ignore path="**/logback-android-core/*" />
   </issue>

Applications that use ActionButton Library

If You would like your application to be added to this list please write me or create the pull request

Icon	Application
	CodeBuddy
	Temperature Metric Converter

License

  Copyright 2016 Scalified <http://www.scalified.com>

  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.

Scalified Links

• Scalified
• Scalified Official Facebook Page
• Scalified Support

fab's Issues

xml parsing error while setting the animations

Hi,

Its a great library that you've made. It helped a lot :)

But when I tried to set the animation to the button using :

actionButton.setShowAnimation(getResources().getAnimation(R.anim.fab_fade_in));
actionButton.setShowAnimation(ActionButton.Animations.FADE_IN);

it throws an error saying cannot resolve method setShowAnimation(android.content.res.xmlResourseParser)

I guess I'm not implementing it correctly. Any help would be appreciated.

(I'm using android api level 15)

PayPal donate link returns error

Clicking on the donate button in the readme returns the following error:

Currently PayPal accounts in Ukraine are only able to send payments. This recipient is not eligible to receive funds.

Render issue

HI,
currently i am working with android studio and i update the FAB version from 1.1.0 to 1.1.2 and i get a render issue i dont know if it is an Android Studio issue or maybe an incompatibility but if i downgrade to 1.1.0 the render works and display the button on preview.

Btw on 1.1.1 version still the issue.

regards

java.lang.VerifyError: Expecting a stackmap frame at branch target 12
Exception Details:
Location:
com/software/shell/fab/ActionButton.isHidden()Z @5: if_icmpne
Reason:
Expected stackmap frame at this location.
Bytecode:
0000000: 2ab6 0241 07a0 0007 04a7 0004 03ac

at java.lang.Class.getDeclaredConstructors0(Native Method)
at java.lang.Class.privateGetDeclaredConstructors(Class.java:2585)
at java.lang.Class.getConstructor0(Class.java:2885)
at java.lang.Class.getConstructor(Class.java:1723)
at org.jetbrains.android.uipreview.ViewLoader.createNewInstance(ViewLoader.java:368)
at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:154)
at org.jetbrains.android.uipreview.ViewLoader.loadView(ViewLoader.java:93)
at com.android.tools.idea.rendering.LayoutlibCallbackImpl.loadView(LayoutlibCallbackImpl.java:190)
at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:216)
at android.view.BridgeInflater.createViewFromTag(BridgeInflater.java:143)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:704)
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:835)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:70)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:811)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798)
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:838)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:70)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:811)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798)
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:838)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:70)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:811)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798)
at android.view.LayoutInflater.inflate(LayoutInflater.java:515)
at android.view.LayoutInflater.inflate(LayoutInflater.java:394)
at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:413)
at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:322)
at com.android.ide.common.rendering.LayoutLibrary.createSession(LayoutLibrary.java:350)
at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:511)
at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:499)
at com.intellij.openapi.application.impl.ApplicationImpl.runReadAction(ApplicationImpl.java:888)
at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:499)
at com.android.tools.idea.rendering.RenderTask.access$600(RenderTask.java:72)
at com.android.tools.idea.rendering.RenderTask$3.call(RenderTask.java:611)
at com.android.tools.idea.rendering.RenderTask$3.call(RenderTask.java:608)
at com.android.tools.idea.rendering.RenderService.runRenderAction(RenderService.java:363)
at com.android.tools.idea.rendering.RenderTask.render(RenderTask.java:608)
at com.android.tools.idea.rendering.RenderTask.render(RenderTask.java:630)
at com.intellij.android.designer.designSurface.AndroidDesignerEditorPanel$6.run(AndroidDesignerEditorPanel.java:480)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:320)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:310)
at com.intellij.util.ui.update.MergingUpdateQueue$2.run(MergingUpdateQueue.java:254)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:269)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:227)
at com.intellij.util.ui.update.MergingUpdateQueue.run(MergingUpdateQueue.java:217)
at com.intellij.util.concurrency.QueueProcessor.runSafely(QueueProcessor.java:238)
at com.intellij.util.Alarm$Request$1.run(Alarm.java:351)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:471)
at java.util.concurrent.FutureTask.run(FutureTask.java:262)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at java.lang.Thread.run(Thread.java:745)

FAB sides are not perfectly round

I have used the default implementation of your library's FAB, however the FAB is not perfectly round. The left & top side of the FAB is cut off - not round. Any work arounds to resolve this.

 <com.software.shell.fab.ActionButton
        android:id="@+id/action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"
        android:textColor="#fff"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:elevation="7dp"
        android:layout_margin="@dimen/fab_margins"
        fab:type="DEFAULT" />```

Lollipop elevation disable shadow

Hello,
I would like to add your FAB to "over a edge of two materials". Iam using relative layout with negative margin. And FAB shadow is shown properly. Problem is that when other views has android:elevation set, it shows over FAB and FAV is not visible. So, I add elevation (higher) to FAB. FAB is shown correctly over other view, but without shadow.
Any idea what I did wrong? Or how to solve this? Thank you.

Needs compatible method with new CoordinatorLayout.

Hi,

it should be nice that the new CoordinatorLayout of design-lib gives behavior-relationship to your "fab" instead the FAB of design-lib self. I've tried but it throws exception to cast fab to FAB of design-lib. With the behavior we can move the "fab" up automatically against Snackbar of design-lib.

Icon is outside the circle

Android 2.3 (4+ is ok), it's also visible in Android Studio's layout preview
It's caused by fab:rippleEffect_enabled="true". When I set it to false, it's ok again.

Animations not work

Hi,

I have no animation either if they are defined in xml or if they are defined programmatically.

I put a fab in a relative layout as you advise it, with a recycler view. All is inflated in a fragment.

All others features work well.

I don't understand what I do wrong.

Thanks.

fragment_layout.xml

<android.support.v7.widget.RecyclerView
    android:id="@+id/fragment_list_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/padding_default"/>

<com.software.shell.fab.FloatingActionButton
    android:id="@+id/fragment_list_fab"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="@dimen/margin_default"
    android:layout_marginRight="@dimen/margin_default"
    android:layout_marginEnd="@dimen/margin_default"
    fab:type="normal"
    fab:shadow_color="@color/sq_blue_dark"
    fab:shadow_radius="8.0dp"
    fab:button_color="@color/sq_blue_dark"
    fab:button_colorPressed="@color/sq_orange_dark"/>

fragment onViewCreated

mFab = (FloatingActionButton) getSQActivity().findViewById(R.id.fragment_list_fab);
mFab.setImageSize(24.0f);
mFab.setImageDrawable(getResources().getDrawable(R.drawable.ic_add_white_24dp));
mFab.setAnimationOnShow(FloatingActionButton.Animations.ROLL_FROM_DOWN);
mFab.setAnimationOnHide(FloatingActionButton.Animations.ROLL_TO_DOWN);

Prefix attributes to avoid collisions with other libraries

Small issue, but can you please prefix the stylable attributes with something like fab? Some of the names are pretty common and cause isses with other libraries that also don't prefix. The result is a compile time error like this

Attribute "type" already defined with incompatible format.

Changing size of button

Hi,

Great library. The only issue I have run into is that the size of the button is seemingly not customizable beyond Normal or Mini. Setting the height and width of the button in XML does nothing as far as I can tell. I saw from your video that this was on purpose in order to comply with Material Design guidelines, however it would be nice to be able to not have this limitation. Would it be possible to add custom sizing?

Ripple state reset on UP_ACTION outside of FAB

In order to reset the ActionButton state on an UP_ACTION outside of the view bounds, I had to include the following workaround:

actionButton.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(@NonNull View view, @NonNull MotionEvent event) {
        int action = event.getAction();
        if((action == MotionEvent.ACTION_CANCEL) || (action == MotionEvent.ACTION_UP)) {
            actionButton.setState(ActionButton.State.NORMAL); // fix ripple handling
        }
        return false; // default handling
    }
});

Does the actionButton have some playHideAnimationCompleationListner?

Thanks for grate lib! :)
Wanted to hide the actionButton using animation when user press backpress but the super.onBackPressed(); in parent Activity don't wait for actionButton.playHideAnimation(); to finish.

I posted a Q at: to get a workaround
http://stackoverflow.com/questions/42878553/how-to-let-fragment-do-some-action-before-onbackpressed-kill-it

FAB position not exactly correct

First of all thank you for this wonderful library. I tried it and it is working great but I noticed a small bug when I am using it with almost the default settings. The fab is upper and more to the left side than most of the Google native apps (Gmail, Keep, Photos..). It seems that the margin to the edges begins from the end of the shadows instead of the exact button. When I enabled elevation (which automatically disables shadows) the fab is located correctly at the exact same spot as the Google apps.

Here is some screenshots if my explanation wasn't good enough :)

FAB with the default settings
Here is the XML code with RelativeLayout

<com.software.shell.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"
    fab:button_color="@color/fab_material_blue_500"
    fab:button_colorPressed="@color/fab_material_blue_900"
    fab:image="@drawable/fab_plus_icon"
    fab:rippleEffect_enabled="true"
    fab:show_animation="@anim/fab_scale_up"
    fab:hide_animation="@anim/fab_scale_down" />

Here is a screenshot from Gmail app

And here is a screenshot from FAB button with the same XML code but with added elevation in java code:
if (Build.VERSION.SDK_INT >=21) {
actionButton.setElevation(10);
}

Hide FAB onScrollView

Hello ! How do I hide FAB to scroll the page ?

Thank you

Can't render XML

I was using Android Studio 2.1.2 and my JDK was 1.8 ,my system was 64bit Win7 .

When I add this sample to my XML ,it just keep throwing an error that I can't understand.

<com.software.shell.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"
/>

java.lang.VerifyError: Expecting a stackmap frame at branch target 12
Exception Details:
Location:
com/software/shell/fab/ActionButton.isHidden()Z @5: if_icmpne
Reason:
Expected stackmap frame at this location.
Bytecode:
0x0000000: 2ab6 022b 07a0 0007 04a7 0004 03ac

at java.lang.Class.getDeclaredConstructors0(Native Method)
at java.lang.Class.privateGetDeclaredConstructors(Class.java:2671)
at java.lang.Class.getConstructor0(Class.java:3075)
at java.lang.Class.getConstructor(Class.java:1825)
at org.jetbrains.android.uipreview.ViewLoader.createNewInstance(ViewLoader.java:396)
at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:172)
at org.jetbrains.android.uipreview.ViewLoader.loadView(ViewLoader.java:105)
at com.android.tools.idea.rendering.LayoutlibCallbackImpl.loadView(LayoutlibCallbackImpl.java:176)
at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:247)
at android.view.BridgeInflater.createViewFromTag(BridgeInflater.java:171)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:727)
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:858)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:70)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:834)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:821)
at android.view.LayoutInflater.inflate(LayoutInflater.java:518)
at android.view.LayoutInflater.inflate(LayoutInflater.java:397)
at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:317)
at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:429)
at com.android.ide.common.rendering.LayoutLibrary.createSession(LayoutLibrary.java:350)
at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:520)
at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:508)
at com.intellij.openapi.application.impl.ApplicationImpl.runReadAction(ApplicationImpl.java:967)
at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:508)
at com.android.tools.idea.rendering.RenderTask.access$600(RenderTask.java:75)
at com.android.tools.idea.rendering.RenderTask$3.call(RenderTask.java:620)
at com.android.tools.idea.rendering.RenderTask$3.call(RenderTask.java:617)
at com.android.tools.idea.rendering.RenderService.runRenderAction(RenderService.java:371)
at com.android.tools.idea.rendering.RenderTask.render(RenderTask.java:617)
at com.android.tools.idea.rendering.RenderTask.render(RenderTask.java:639)
at com.intellij.android.designer.designSurface.AndroidDesignerEditorPanel$7.run(AndroidDesignerEditorPanel.java:519)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:337)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:327)
at com.intellij.util.ui.update.MergingUpdateQueue$3.run(MergingUpdateQueue.java:271)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:286)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:244)
at com.intellij.util.ui.update.MergingUpdateQueue.run(MergingUpdateQueue.java:234)
at com.intellij.util.concurrency.QueueProcessor.runSafely(QueueProcessor.java:238)
at com.intellij.util.Alarm$Request$1.run(Alarm.java:352)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)

Could you help me?

I love this awesome project ,whereas I'm new in programme : )

Both buttons show up when I only want one at a time

I have a edit and save button. When editButton is clicked the editButton hides and the saveButton shows. The problem I am having is when the activity is first loaded saveButton.hide() does not hide the button. I made a if statement to switch between the buttons but they dont work the way i want it to. I have began to make the code more redundant and nothing still works. It seems to me that my logic is correct, but the application is not doing what I want it to do.

ActionButton editButton = (ActionButton) findViewById(R.id.edit_button);
ActionButton saveButton = (ActionButton) findViewById(R.id.save_button);
editButton.show();
saveButton.hide(); // saveButton.hide(); does not work initially on load up

editButton.setOnClickListener(new View.OnClickListener() {
@OverRide
public void onClick(View v) {
editButton.hide();
saveButton.show();
if(saveButton.isHidden()) {
saveButton.show();
}
}
});

Question - Pressed State

Hi
In Google guidelines, it says that default elevation for FAB is 8dp and in pressed state the elevation is 14dp(+6dp). is this libs deffault properties are same as google guidelines?

Sorry For My Bad English And ThnQ For Ur Awesome Lib :)

Hiding and showing on Sections Pager

Hi,
I have an activity which has some section pagers of fragments. I want to dynamically hide and show the actionbutton depending on the fragment. Here is my scenario.

Main Activity inflates my layout with the actionbutton view.

onCreateView method for fragment_1.
initActionButton()

onResume method Fragment_1
boolean shown = actionButton.isShown();
if (shown){
actionButton.setShowAnimation(ActionButton.Animations.ROLL_TO_DOWN);
actionButton.dismiss();
}

private void initActionButton() {
actionButton = (ActionButton) getActivity().findViewById(R.id.action_button);
}

The first time it loads, the button is NOT visible. If I swipe to other fragments and return, it crashes:
java.lang.NullPointerException: Attempt to invoke virtual method 'boolean com.software.shell.fab.ActionButton.isShown()' on a null object reference
at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3224)

How can I resolve this? I have tried isEnabled() to the same effect.

ripple effect

API level 11 not 9

This field:
android:interpolator="@android:interpolator/decelerate_cubic">
in anim-v11 folders

Won't load in fragment

Inflated it

    View view = inflater.inflate(R.layout.fragment_pocetna, container, false);
    listview = (ListView) view.findViewById(R.id.pocetna_listview);
    ActionButton actionButton = (ActionButton) view.findViewById(R.id.action_button);
    actionButton.show();

Here's my layout fragment_pocetna:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ECECEC">

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/pocetna_swipe"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<ListView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:divider="@null"
    android:dividerHeight="0dp"
    android:transcriptMode="normal"
    android:id="@+id/pocetna_listview"
   />

</android.support.v4.widget.SwipeRefreshLayout>

<com.software.shell.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"
    />

</LinearLayout>

But doesn't seem to show. There's no errors in logcat. Thanks

Request - Floating Action Menu

Hi,
This is a great Library and i love it
Can u Add Floating Action Menu Like This Lib:
https://github.com/futuresimple/android-floating-action-button

ThnQ

cant set color of button

using it from code: fab.setButtonColor(R.color.myRed);
or using it form xml: fab:button_color="@color/myRed"
has no effect at all.

Also i could set image into fab only from code xml attribute didnt work

Move button up and down

Would be nice if we had methods (with a parameter for height) for moving the button up (animated) when a snackbar is shown, and move it back after snackbar is dismissed.

Remove deprecated API, fix unknown API references

Hi when I start my app, I get a
"Could not find class 'com.software.shell.fab.ActionButtonOutlineProvider', referenced from method com.software.shell.fab.ActionButton.drawElevation" exeption, but the Action button works fine.

Maybe you can help me with this issue.

BR
Emeriko

Background of the button

When I use the BIG type button, and place it over some view, I found that that there is a rectangular box (of white color by default) covering the view beneath, I couldn't find a way to remove it, how do i remove this ?

Animations not showing on default

Hi,
I'm using your library to do an app on a Moto G2. When I define the show and hide animations in the xml and through the actionButton.setHideAnimation(...) - methods, I can't see any animation. I honestly thought there's actually something really broken.

I decided to play around. I extracted the Animation object through actionButton.getShowAnimation(). I then called animation.setDuration(1000) and added them back with a actionButton.setShowAnimation(). NOW I can actually see all of the animations. This workaround is working, but I feel like this isn't the correct way done.

IS there something I might have done wrong or do I have to overwrite the duration to see the animations?

Is the way to have margin 0dp?

When I delete in XML this line android:layout_marginBottom="@dimen/fab_margin", some margin would be still in mu UI. Is the way to have margin of FAB 0dp?

Default shadow offset does conform to material design guidelines

The light source in material design is always directly above the element, so shadows do not ordinarily have an x offset.

http://www.google.com/design/spec/what-is-material/environment.html#environment-3d-world
http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

Would you please consider changing the default x offset to zero, as the typical user likely just wants a button with the recommended style?

move() method smearing on KitKat with snackbar.

The FAB seems to be smearing (leaving a image trail behind) under certain conditions in KitKat when move is called.

I'm using your FAB in conjunction with nispok's Snackbar library https://github.com/nispok/snackbar,
and when the snackbar slides up, I move my FAB up by the snackbar height. However, when I SWIPE AWAY the snackbar (very important detail), the FAB comes back down, but it leaves a trail of itself.

I made my own translation animation and the smearing is gone, so it's a good chance that it's a bug in your library. I thought it should be something you should look at.

Note: I've only tested this on the emulator. ICS and Lollipop work fine.
Edit: Jellybean works fine, did not test ICS.

fabicon not hidden behind when keyboard is diplayed

Hello,

I am trying to implement the library but when I click on the searchbar in the toolbar the keyboard pop ups & the fab icon is above the keyboard as it should be hidden behind the keyboard like the gmail app.

I've attached the screenshot of the error
http://s3.postimg.org/i73vb2f4j/Untitled1.png

Any help is appreciated
Thanks,

Is it possible to use Text and Font_awesome with this library ?

onTouchEvent to handle onClickListener

Hi.

How is onTouchEvent supposed to work? I can't find the correct way to handle onClick events. I've tried setOnClickListener and setOnTouchListener without luck. And I can't cast FloatingActionButton to Button because it gives an error.

Can you provide an example? Thanks!

Request - Circular ProgressBar

Hi
Can u add a circular progressBar around the FAB like this lib:
https://github.com/ckurtm/FabButton

setSize method doesn't work

I tried setting the button's size using the setSize method but nothing happened.

tiny problems

1. Please generate a gradlew file by running gradle wrapper
2. Please include sample projects.

A really cool and useful project.

Can Drag?

I want drag this button, how can I do this ?

Make fab appear when scrolling

I want the fab to appear only when scrolling

Ripple effect gets interrupted as soon as you release the touch input from the fab

Well, a video would be more explanatory then words: https://goo.gl/JgwZsD

anyway that's the code, notice that its father view is a RelativeLayout, if it matters anyway:
<com.scalified.fab.ActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" fab:rippleEffect_enabled="true" fab:button_colorPressed="@color/white" fab:button_color="@color/white" fab:image="@drawable/ic_my_location_black_24dp"/>

no resource found logback-android-core

I'm trying to build this project after cloning

$ ./gradlew --configure-on-demand --daemon assembleDebug installDebug

and got an error. It seems like it couldn't find logback-android-core. How're you able to build this?

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':sample'.
> Could not download logback-android-core.jar (com.github.tony19:logback-android-core:1.1.1-3)
   > Could not get resource 'https://jcenter.bintray.com/com/github/tony19/logback-android-core/1.1.1-3/logback-android-core-1.1.1-3.jar'.
      > Could not GET 'https://jcenter.bintray.com/com/github/tony19/logback-android-core/1.1.1-3/logback-android-core-1.1.1-3.jar'.
         > akamai.bintray.com: nodename nor servname provided, or not known