zendesk / android-floating-action-button

Floating Action Button for Android based on Material Design specification

FloatingActionButton

Yet another library for drawing Material Design promoted actions.

Features

• Support for normal 56dp and mini 40dp buttons.

  

• Customizable background colors for normal and pressed states and icon drawable.

  

• Convenience AddFloatingActionButton class with plus icon drawn in code.

• FloatingActionsMenu which can be expanded/collapsed to reveal multiple actions.

  

• Optional labels for buttons in FloatingActionsMenu.

  

Usage

Just add the dependency to your build.gradle:

dependencies {
    compile 'com.getbase:floatingactionbutton:1.10.1'
}

To see how the buttons are added to your xml layouts, check the sample project.

Caveats

The API is extremely limited at the moment. It solves few select use cases in the app I'm working on.

Unlike some other FloatingActionButton libraries this library doesn't implement "quick return" pattern, i.e. hiding the button on scrolling down and showing it on scrolling up. That's intentional, I think that should be responsibility of another component, not the button itself.

This library is minSdkVersion=14 and if that changes, the version number will be increased, not decreased. It means that Honeycomb, Gingerbread or - gods forbid - Froyo, won't ever be supported. I won't even consider merging pull requests fully implementing support for older versions. We need to move on as Android community and focus on delivering value for 95% of users of modern Android OS instead of jumping through burning hoops to support ancient devices with ancient OS.

If you really require support for older Android versions, str4d maintains a version of this library with minSdkVersion=4.

Credits

I used FloatingActionButton library by Oleksandr Melnykov as a base for development.

Copyright and license

Copyright 2014 Zendesk

Licensed under the Apache License, Version 2.0

android-floating-action-button's Issues

Request: add the special effects of ripple etc to the button, as of API 21

For API 21 and above (Lollipop), please set the floating button to also have the ripple effect and optionally other effects (like a real shadow instead of drawable).

Adding Library

Hi, I am new to using external libraries. I'm using Android Studio but I'm having a real difficult time adding an external library to my app. I've following the instructions here but it is just not working. Can you please provide me with a step by step guide for installing?

I'm getting ~trunk/build.gradle failed to find: com.getbase:floatingactionbutton:1.1.0

Thanks, Eric

Intended handler pattern?

Maybe I'm just slow, but things function well, but what is the intended pattern for handling a button press? onCLick handler didn't do it...

FloatingActionButton.setTitle

Might require additional work in FloatingActionsMenu.

API to access the state of FloatingActionsMenu.

Expose mExpanded from FloatingActionsMenu via isExpanded.

This is required to findout the current state of floatingactionsmenu, normal pattern is to close the actionsmenu when back button is expanded or else exit the activity.

Set a drawable for a FloatingActionButton

Hi.
I've just made an unofficial fork for setting a drawable at the menu fab.

The code is pure crap (i never worked with canvas before), but maybe you like to take a look and include this feature in your code in the future.

https://github.com/Viperey/floating-action-button

Can't use addButton() method with FloatingActionsMenu

I try to use it the way shown in the sample app, but there's no such a method in FloatingActionsMenu class. How do I set up the buttons?

buttonA = new FloatingActionButton(activity.getBaseContext());
buttonB = new FloatingActionButton(activity.getBaseContext());

 fam = (FloatingActionsMenu) fragmentLayout.findViewById(R.id.menu);

    fam.addButton(buttonA);
    fam.addButton(buttonB);

    buttonA .setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            methodA();
        }
    });

    buttonB .setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            methodB();
        }
    });

NullPointerException when start activity

I try call expande() when start activity and i get error NullPointerException. What wrong in here?

Is there a way to new FloatingActionButton to FloatingActionsMenu?

Can I do it like this:
FloatingActionsMenu fam = (FloatingActionsMenu)findViewById(R.id.multiple_actions);
FloatingActionButton fab = new FloatingActionButton(getBaseContext());
fam.addView(fab);

But there's nothing wrong,it's not print anything

Add event interface to FloatingActionsMenu

I had need to add a scrim to the display when the Menu was open. As there wasn't anything setup for it in the code, I extended FloatingActionsMenu with the following code. That way I could optionally add an event listener in my activity for toggling the scrim.

I don't know if this is the best way to do things which is why I'm submitting an issue instead of a pull request...

import android.content.Context;

public class FloatingActionsMenu extends com.getbase.floatingactionbutton.FloatingActionsMenu {

    private OnFloatingActionMenuUpdateListener onFloatingActionMenuUpdateListener;

    public FloatingActionsMenu( Context context ) {

        this( context, null );
    }

    public void setOnFloatingActionMenuUpdateListener( OnFloatingActionMenuUpdateListener listener ) {

        onFloatingActionMenuUpdateListener = listener;
    }

    @Override
    public void toggle() {

        super.toggle();

        if( onFloatingActionMenuUpdateListener != null ) {

            onFloatingActionMenuUpdateListener.actionMenuToggled();
        }
    }

    public interface OnFloatingActionMenuUpdateListener {

        public void actionMenuToggled();
    }
}

Minimum SDK version 14?

Hi,

Is the minSdkVersion 14?
Any reason for that?

Thank you!

Miguel

build.graddle

I added the dependency line into my existing project graddle build file on Android Studio beta 0.8.14

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:21.0.+"
compile 'com.getbase:floatingactionbutton:1.2.0'
}

and I got this error when build. Note that I haven't even added any codes. What could I be doing wrong?

Error:Execution failed for task ':app:processDebugResources'.

com.android.ide.common.internal.LoggedErrorException: Failed to run command:
C:\Users\vnguyen5\android-sdks\build-tools\20.0.0\aapt.exe package -f --no-crunch -I C:\Users\vnguyen5\android-sdks\platforms\android-21\android.jar -M D:\dev\MyTestApplication\app\build\intermediates\manifests\full\debug\AndroidManifest.xml -S D:\dev\MyTestApplication\app\build\intermediates\res\debug -A D:\dev\MyTestApplication\app\build\intermediates\assets\debug -m -J D:\dev\MyTestApplication\app\build\generated\source\r\debug -F D:\dev\MyTestApplication\app\build\intermediates\res\resources-debug.ap_ --debug-mode --custom-package com.vnguyen.mytestapplication -0 apk --output-text-symbols D:\dev\MyTestApplication\app\build\intermediates\symbols\debug
Error Code:
-1073741819

Support for API 9+

I have an app that has minSdkVersion 9, and I cannot use this library with it because minSdkVersion is currently set to 14. But I have manually built the library myself and have not found any problems. Is there a reason for only supporting API 14 and above? If not, could minSdkVersion be lowered?

Allow setter methods

Create setXXXX() methods to enable size, colors, etc

Inconsistent view when a transparent background color is used

Using a background color with some alpha (e.g. #99fe0038) when the shadow is set to true reveals two circles: one for the floating action button and another inside (cf. image below). The latter is probably caused by the shape of the drawable that is used for creating the shadow.

It would be nice to get a circle without the inner one when a transparent background color is used.

I have also noticed that the image drawable used for the shadow isn't provided for xxxhdpi.

Is it possible to change the FloatingActionsMenu 's plus icon to other ones?

Thanks a lot

Change the icon on click

Is there a way to change the plus icon on clicking in the floating actions menu?..and bringing it back to the original state on clicking anywhere else in the screen?
Just like the inbox app??

Action menu with mini action buttons

I'm trying to make menu similar to the one Inbox app has. There is a large floating button which opens a menu of mini action button, but they are horizontally centered. I can't set gravity to FloatingActionsMenu since it's a ViewGroup.

is there any plan to add ScrollListener ?

like this

Proguard config for samples

These configs should be added to proguard, else FloatingActionsMenu's + to x animation will not work

-keep class com.getbase.floatingactionbutton.** { *; }

Move above snackbar

Is there a way to move up the action button in order to be above the snack bar?

I am using this snackbar: https://github.com/nispok/snackbar

Request: Add fab_icon parameter to FloatingActionsMenu

Would be nice to be able to customize the icon from the actionmenu base button. :)

Attach to listview?

The version that @makovkastar made has an attachToListView method for the floating action button. I don't see a method similar on FloatingActionsMenu. Am I not seeing something or was the auto hide on scroll feature deleted?

set expandDirection in the code?

Is it possible? I tried to look but didn't find any methods but maybe it was called differently? I know we could set it in the XML but it'd be nice if we could do it in the code as well..

What I'm trying to do: is to switch the direction if the device orientation changed!

Thanks.

Maven Central Availability

There is an issue with Maven Central, the library can't be found on it via Gradle.
Even if it seems to be there

Floating widgets

Hi!

I created some widgets that automtically place the FAB button in the correct place like guidlines say.

I will fork your project and try to PR if you think that are cool to setup in project.!

:)

Buttons are not aligned while using mini buttons, help pls

Below code give me unaligned buttons, if make all the buttons as normal buttons are aligned

<com.getbase.floatingactionbutton.FloatingActionsMenu
                android:id="@+id/fab_group"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_addButtonColorNormal="@color/fab_normal"
                fab:fab_addButtonColorPressed="@color/fab_pressed"
                fab:fab_addButtonPlusIconColor="@color/white"
                android:layout_marginBottom="16dp"
                android:layout_marginEnd="16dp"
                android:layout_gravity="bottom|right|center">

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab_more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_colorNormal="@color/colorAccent"
                    fab:fab_colorPressed="@color/colorPrimaryDark"
                    fab:fab_icon="@drawable/ic_expand_less"
                    fab:fab_size="mini"
                     />

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab_manual"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_colorNormal="@color/colorAccent"
                    fab:fab_colorPressed="@color/colorPrimaryDark"
                    fab:fab_icon="@drawable/ic_keyboard"
                    fab:fab_size="mini" />

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab_scan"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_colorNormal="@color/colorAccent"
                    fab:fab_colorPressed="@color/colorPrimaryDark"
                    fab:fab_icon="@drawable/ic_photo_camera"
                    fab:fab_size="mini"
                    />
            </com.getbase.floatingactionbutton.FloatingActionsMenu>

Custom image actionButton not centred

I set icon for ActionButton but the icon not centred

is this compatible with API >= 10 ?

Scroll or multiple lines for FloatingActionButton

Suppose you want to add 10 FloatingActionButtons in the screen, some of them will not be shown, it would be nice to be able to scroll the FloatingActionButtons when the FloatingActionMenu is expanded, or set a grid of how the FloatingActionButton are positioned, like 4 lines of buttons.
Thanks

How can I use this in Eclipse?

Hi, I need to use this in an Eclipse project, is it possible? Thanks.

Custom background drawable

Can you add the option to set background drawable?
It can be useful when you need to disable the button, with current state it just has 'colorNormal'.

cant work with floating menu

How to implement floating menu correctly. Sometimes,, when I add view, it never expands by clicking. onClickListener doesnt work.
Sometimes when it works, it align itself so as to fit the view that i added. I have arranged button at parent right by default. I comes to somewhere around center. i tried adding direction to view from right to left, but with no success.

Setters for FloatingActionsMenu properties

java.lang.OutOfMemoryError

I'm using version 1.10 right now. I noticed there are some OutOfMemoryError on crashlytics for some time.
I checked the release notes, It seems it wasn't fixed yet. So I post an issue here.

I thinks this is the same problem from this issue:
alexvasilkov/FoldableLayout#10

Here is the trace:
Caused by: java.lang.OutOfMemoryError
at android.graphics.Bitmap.nativeCreate(Bitmap.java)
at android.graphics.Bitmap.createBitmap(Bitmap.java:929)
at android.graphics.Bitmap.createBitmap(Bitmap.java:902)
at android.graphics.Bitmap.createBitmap(Bitmap.java:869)
at com.getbase.floatingactionbutton.FloatingActionButton.createStrokesDrawable(FloatingActionButton.java:164)
at com.getbase.floatingactionbutton.FloatingActionButton.updateBackground(FloatingActionButton.java:112)
at com.getbase.floatingactionbutton.FloatingActionButton.init(FloatingActionButton.java:75)
at com.getbase.floatingactionbutton.FloatingActionButton.(FloatingActionButton.java:53)

Support for pre honeycomb

Hi, i have implemented your library in pre honeycomb devices using nineoldandroids.
Works Great...

Here is my gist

i have kept your code commented.

https://gist.github.com/sahinraj/67eb0e61ebdaaaad39e0

Change states

Change FAB state when click.

Allow icon to animate, like AddFAB to change into loading, etc.

Enable 'enabled' state

Conflict with AppCompat

When i add this library to my project, i got an aapt error.
"Error:Attribute "icon" has already been defined"
This is only if i use AppCompat.

FloatingActionButton.SIZE_MINI ???

Sample code issue?

  FloatingActionButton button = (FloatingActionButton) findViewById(R.id.setter);
  button.setSize(FloatingActionButton.SIZE_MINI);

Android Studio complains that button.setSize value must be 0 or 1
Help?

Collapse FloatingActionsMenu on focus changed ("de-focus")

The FloatingActionsMenu should collapse when the user clicks/touches a different view similar to how the Inbox by Gmail FloatingActionsMenu auto-collapses when it loses focus.

BackWord Compatibility

Is it Supported in 2.2 version..?
I need it badly in for backword compatibility..!!!

TextView + FloatingActionButton

I'm trying to put a TextView next to a FloatingActionButton. But the width of FloatingActionMenu not allows it to fit the two, using match_parent or by setting in hand widh also is not working. Any suggestions for how I can do this?

Exemple:

 <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        app:fab_addButtonColorNormal="@color/white"
        app:fab_addButtonColorPressed="@color/primary_button_pressed_color"
        app:fab_addButtonPlusIconColor="?attr/colorPrimary">


        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:layout_marginEnd="50dp"
                android:layout_marginRight="50dp"
                android:text="Teste" />

            <com.getbase.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:adjustViewBounds="true"
                app:fab_colorNormal="@color/white"
                app:fab_colorPressed="@color/primary_button_pressed_color"
                app:fab_size="mini" />

        </FrameLayout>


        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="@color/white"
            app:fab_colorPressed="@color/primary_button_pressed_color"
            app:fab_size="mini" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="@color/white"
            app:fab_colorPressed="@color/primary_button_pressed_color"
            app:fab_size="mini" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/floating_action_button_diary_my_items_list"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="@color/white"
            app:fab_colorPressed="@color/primary_button_pressed_color"
            app:fab_size="mini" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="@color/white"
            app:fab_colorPressed="@color/primary_button_pressed_color"
            app:fab_size="mini" />


    </com.getbase.floatingactionbutton.FloatingActionsMenu>

'White glow' on top-side of FAB.

I've noticed a 'white glow' on the top side of the FAB (See attached).

I'm not exactly sure what the createStrokesDrawable method does (drawable stuff isn't my forte), but I was trying to work out what was causing the 'white glow', and sure enough, out-commenting the following fixed it:

    // inner top
    paint.setShader(new LinearGradient(innerStrokeRect.centerX(), innerStrokeRect.top, innerStrokeRect.centerX(), innerStrokeRect.bottom,
            new int[]{Color.WHITE, HALF_TRANSPARENT_WHITE, Color.TRANSPARENT},
            new float[]{0f, 0.2f, 1f},
            TileMode.CLAMP
    ));

In my opinion, removing the 'inner top' stroke would be an enhancement.

So, on the left is the standard, untouched FAB. On the right is the FAB generated with the 'inner top' commented out.

FloatingActionsMenu's expand orientation

It would be a nice feature if you allow us to set the orientation of FloatingActionsMenu to other directions; as of now its child would always expand upward.

Can't set addButton's color in code

fab_addButtonColorNormal
fab_addButtonColorPressed
fab_addButtonPlusIconColor

Please fix it...It's important for me !!!

Error:(26) No resource identifier found for attribute 'fab_expandDirection' in package 'XXXX'

I am getting this when trying to compile with fab_expandDirecton. I am using the gradle build.

Cannot set typeface to floatingActionButton view

Unable to set typeface to floatingActionButton view. I am trying to use fontawesome icons for each floatingActionButton. For now, i am using app:fab_icon to set the icon from the drawables folder. But, would like use fontAwesome Icons. Please show me a way.

Icons not centered in FAB?

Not all icons seem to center correctly.

Is there a way to add labels to FloatingActionsMenu?

Is there a way to add labels to nested FABs such as in the Evernote app?

background shadow

When the floating menu is opened, Is it possible to show the background shadow to disable background click event like inbox?