[] Android floating action button

Overview

DEPRECATED

Use the FloatingActionButton from the support library instead.

FloatingActionButton

Android Arsenal

Description

Android floating action button which reacts on scrolling events. Becomes visible when an attached target is scrolled up and invisible when scrolled down.

Demo

Demo

FloatingActionButton Demo on Google Play Store

Integration

1) Add as a dependency to your build.gradle:

dependencies {
    compile 'com.melnykov:floatingactionbutton:1.3.0'
}

2) Add the com.melnykov.fab.FloatingActionButton to your layout XML file. The button should be placed in the bottom right corner of the screen. The width and height of the floating action button are hardcoded to 56dp for the normal and 40dp for the mini button as specified in the guidelines.

<FrameLayout 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">

    <ListView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    <com.melnykov.fab.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="16dp"
            android:src="@drawable/ic_action_content_new"
            fab:fab_colorNormal="@color/primary"
            fab:fab_colorPressed="@color/primary_pressed"
            fab:fab_colorRipple="@color/ripple" />
</FrameLayout>

3) Attach the FAB to AbsListView, RecyclerView or ScrollView :

ListView listView = (ListView) findViewById(android.R.id.list);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.attachToListView(listView);

Check the sample project to see how to use custom listeners if you need to track scroll events.

4) Add the namespace xmlns:fab="http://schemas.android.com/apk/res-auto" to your layout file.

  • Set the button type (normal or mini) via the fab_type xml attribute (default is normal):

    fab:fab_type="mini"

    or

    fab.setType(FloatingActionButton.TYPE_MINI);
  • Set the normal and pressed colors via the xml attributes:

    fab:fab_colorNormal="@color/primary"
    fab:fab_colorPressed="@color/primary_pressed"

    or

    fab.setColorNormal(getResources().getColor(R.color.primary));
    fab.setColorPressed(getResources().getColor(R.color.primary_pressed));
  • Enable/disable the button shadow with the fab_shadow xml attribite (it's enabled by default):

    fab:fab_shadow="false"

    or

    fab.setShadow(false);
  • Show/hide the button expliciltly:

    fab.show();
    fab.hide();
    
    fab.show(false); // Show without an animation
    fab.hide(false); // Hide without an animation
  • Specify the ripple color for API 21+:

    fab:fab_colorRipple="@color/ripple"

    or

    fab.setColorRipple(getResources().getColor(R.color.ripple));

5) Set an icon for the FloatingActionButton using android:src xml attribute. Use drawables of size 24dp as specified by guidelines. Icons of desired size can be generated with Android Asset Studio.

Changelog

Version 1.3.0

  • Add the disabled state for the FAB (thanks to Aleksey Malevaniy);
  • Fix shadow assets. Rename shadow drawables with a prefix;
  • Generate default pressed and ripple colors (thanks to Aidan Follestad).

Version 1.2.0

  • Respect an elevation set manually for the FAB;
  • Don't emit a scroll when the listview is empty;
  • Add an ability to attach normal listeners for scroll operations (thanks to Bill Donahue).

Version 1.1.0:

  • Do not ignore negative margins on pre-Lollipop;
  • Disable clicks on the FAB when it's hidden on pre-Honeycomb;
  • Some shadow tuning.

Version 1.0.9:

  • Support API 7;
  • Fixed extra margins on pre-Lollipop devices;
  • Fixed mini FAB size;
  • Updated shadow assets to more accurately match 8dp elevation.

Version 1.0.8:

  • ATTENTION! Breaking changes for custom listeners. Check an updated sample how to use them.
  • Added support for the ScrollView;
  • Significantly optimized scroll detection for the RecyclerView;
  • Fixed laggy animation for a list view with items of different height;
  • Added isVisible getter;
  • Deleted deprecated methods.

Version 1.0.7:

  • Updated shadow assets to better match material design guidelines;
  • Make FabOnScrollListener and FabRecyclerOnViewScrollListener implement ScrollDirectionListener for easier custom listeners usage.

Version 1.0.6:

  • Added support for the RecyclerView;
  • Added ripple effect and elevation for API level 21.

Thanks to Aidan Follestad.

Version 1.0.5:

  • Updated shadow to more accurately match the material design spec;

Version 1.0.4:

  • Allow a custom OnScrollListeners to be attached to a list view;
  • Work properly with list of different height rows;
  • Ignore tiny shakes of fingers.

Version 1.0.3:

  • Add methods to show/hide without animation;
  • Fix show/hide when a view is not measured yet.

Applications using FloatingActionButton

Please ping me or send a pull request if you would like to be added here.

Icon Application Icon Application
Finger Gesture Launcher Vocabletrainer
Lanekeep GPS Mileage Tracker Score It
Перезвони мне App Swap
QKSMS - Quick Text Messenger Uninstaller - Beta Version
Device Control Confide
Date Night Jair Player The Music Rainbow
Taskr - Lista de Tareas Festivos: ¡Conoce el mundo!
nowPaper Vicious chain - Don't do that!
My Football Stats The ScoreBoard
NavPoint Just Reminder
Early Notes Ranch - Smart Tip Calculator
Thiengo Calopsita Tinycore - CPU, RAM monitor
Battery Aid Saver & Manager GameRaven
Polaris Office Call Utils
Colorful Note CallSticker - заметки звонка

Links

Country flag icons used in the sample are taken from www.icondrawer.com

License

The MIT License (MIT)

Copyright (c) 2014 Oleksandr Melnykov

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Comments
  • Feat/recyclerview

    Feat/recyclerview

    I've added a new FloatingActionButton class that mimics the behavior of the original one but works with the upcoming RecyclerView, which is not an AbsListView.

    opened by stoyicker 21
  • Updated sample and demo GIF, FAB uses elevation and ripple on API 21+, support for RecyclerView

    Updated sample and demo GIF, FAB uses elevation and ripple on API 21+, support for RecyclerView

    My previous pull request for RecyclerView support was replaced with this one.

    I also updated the sample to use AppCompat, so Material theming is used (and supports KitKat and below) along with the ripple effect and elevation on the FAB. The demo GIF was updated to reflect that.

    The FAB will use the elevation API instead of the shadow drawable on API 21. It will have a ripple selector on Lollipop and above also. I made another attribute (fab_colorRipple) that can be used to customize the color of the ripple so it can be seen over the color of the FAB, it defaults to white. I made the references to Holo Blue use Material Blue instead.

    opened by afollestad 18
  • Not smooth animation for a list view with items of different height

    Not smooth animation for a list view with items of different height

    If items of a list view have different height, then animation to show/hide FAB when scrolling isn't smooth sometimes. I think it is due to assumption in getListViewScrollY method that all items have the same height.

    opened by alexey-rabets 13
  • Button covers listview items

    Button covers listview items

    When the number of ListView items is at the point where they fill all/most of the screen, but still fit within the screen so no scrolling is yet possible/activated the button covers the bottom list items. Since, one of the main features of this particular FAB library is that the FAB hides when scrolling I would suggest attaching to swipe up/down motions instead of onScrollDown() and onScrollUp().

    opened by leo-k 12
  • SnackBar Interaction.

    SnackBar Interaction.

    I can't seem to figure out how to set the fabs to push up/down on a SnackBar show/hide.

    I read it's setMovement...

    However I can't get it to work.

    Thanks, Jon.

    opened by JonathanMerritt 10
  • Bug: Library uses NineOldAndroids, which doesn't handle animation well on GB in this case (button still clickable when being hidden)

    Bug: Library uses NineOldAndroids, which doesn't handle animation well on GB in this case (button still clickable when being hidden)

    On GB, when you use the animation as used on NineOldAndroids, you need to know that if a View moves from point A to point B using an animation, it's actually still on point A. It's not the library's fault. That's how it works on GB. Animations don't really change the view itself.

    This means that when you hide the floating action button, and then click when it was a moment ago, it's still being clicked.

    What you need to do is to ditch this library, add a normal translateAnimation, and when it's done its animation, hide the view (using setVisibility(View.GONE) ). When you need to show it again, you will set its visibility back.

    Another possible approach is to play with its margins values instead of an animation. That's ok for simple layouts, but could cause bad performance on complex ones.

    Another possible approach is to never show any animation, and just add a footer at the bottom that's large enough to be below the floating action item.

    opened by AndroidDeveloperLB 10
  • FloatingActionButton and LoaderManager.LoaderCallbacks

    FloatingActionButton and LoaderManager.LoaderCallbacks

    Hello, First of all allow me to thank you. This custom view is amazing :) I was trying to implement it in my app to check how it works and I encountered an issue. If I populate the ListView (or GridView in my case), using a LoaderManager, there might be an IndexOutOfBounds exception when calculating scroll Y if the list hasn't finished populating yet.

    I tried attaching the view to the GridView in onLoadFinished and that seems to work only if there is a small amount of data to populate.

    I'm trying to solve this right now, but if you have any lead, that would be awesome!

    And thanks again.

    EDIT: I added a check if (mAdapter.getCount() != 0) in onLoadFinished() before attaching the GridView to the FloatButton.... this way I make sure there is info in the adapter once the attached method gets called. I hope its stable enough...

    opened by 0xMineGo800m 8
  • How does overriding the Onscrollistener work?

    How does overriding the Onscrollistener work?

    How can I make the action bar and my tab bar hide when the float button hides..

    I use a RecyclerView. I don't understand the documentation and I couldn't find examples. Nice library by the way!

    opened by RichardLindhout 7
  • two FAB's attached to same listview

    two FAB's attached to same listview

    If i attach two fabs to the same list view only one listens the onScroll so only one hides when scrolling. Is there a way to attach both of them to onScroll? Thanks

    question 
    opened by nmrainho 7
  • OvalShape class not found while in edit mode

    OvalShape class not found while in edit mode

    I'm getting

    java.lang.ClassNotFoundException: android.graphics.drawable.shapes.OvalShape
    

    exception while editing layout in Android Studio 0.8.11.

    Anyone else experiencing this or should we really modify createDrawable method to add isInEditMode() modification?

    wontfix 
    opened by ViliusKraujutis 7
  • Work with lists of different height rows

    Work with lists of different height rows

    • Allow custom OnScrollListeners to be attached to list view;
    • Work properly with list of different height rows;
    • Ignore tiny shakes of fingers, by using min_significant_scroll

    Fix #21 and fixes #22

    opened by ViliusKraujutis 7
  • java.lang.NoSuchFieldError: FloatingActionButton_fab_colorNormal

    java.lang.NoSuchFieldError: FloatingActionButton_fab_colorNormal

    Exception Details java.lang.NoSuchFieldError: FloatingActionButton_fab_colorNormal   at com.melnykov.fab.FloatingActionButton.initAttributes(FloatingActionButton.java:112)   at com.melnykov.fab.FloatingActionButton.init(FloatingActionButton.java:103)   at com.melnykov.fab.FloatingActionButton.(FloatingActionButton.java:72)   at java.lang.reflect.Constructor.newInstance(Constructor.java:423)   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) Copy stack to clipboard

    opened by RaylanXL 0
  • Why the attacheToxxView requires an object, rather interface or android base class.

    Why the attacheToxxView requires an object, rather interface or android base class.

    The base class limited application of lib. Because it requires a special base object, that restricts java class design.

    Can it work with interface or android base class like ScrollView or etc?

    opened by securealex 0
  • FloatingActionButton removeAttachedScrollview

    FloatingActionButton removeAttachedScrollview

    Is there a way to remove the attachedScrollview? so my floatingactionbutton isn't listening anymore to the scrollview programaticly.

    I need to add the scrollview in the beginning of launching the activity. but if the user presses a button the floatingactionbutton need to stop listening to the scoll.

    opened by vanlooverenkoen 0
Owner
Oleksandr Melnykov
Oleksandr Melnykov
Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Sanyam Mehta 5 Aug 15, 2022
A simple Floating Action Button that shows an anchored Navigation View

Floating Navigation View A simple Floating Action Button that shows an anchored Navigation View and was inspired by Menu Material Fixed created by Tom

André Mion 1.3k Nov 18, 2022
Kotlin Expanding Floating Action button

Kotlin-Expanding-Floating-Action_button Home Screen As you can see there is only a siongle floating button with + icon Expanding Fab button When we cl

Akshay Teli 0 Nov 3, 2021
Floating Action Button But Moveable And Expandalbe

MeFab todo add the maven bacge here Floating Action Button but MOVEABLE and EXPA

Hussien Fahmy 4 Nov 11, 2022
➕ An efficient and beaufitul Multi Float action button library based on Twitter implemented in Jetpack Compose 🚀

Multi Float Action Button ➕ An efficient and beaufitul Multi Float action button library based on Twitter implemented in Jetpack Compose ?? Including

Geovani Amaral 8 Oct 15, 2022
Base on android-process-button this is the advanced version of the android-process-button.

Rock Button release log Base on android-process-button this is the advanced version of the android-process-button ##Main Features ActionProcessButton

MDCCLXXVI KPT 119 Nov 25, 2022
Android Floating ActionButton with a progress indicator ring

FabProgress Android Circular floating action button with intergrated progress indicator ring As per material design docs Demo: Demo apk HOW TO ADD TO

Kurt Mbanje 779 Nov 28, 2022
Android Circular Progress Button

?? Before using this library, read information below ?? This library is not more supported. If you want to add new feature or fix a bug, grab source

Dmytro Danylyk 5.6k Nov 22, 2022
Circle button widget for Android

DEPRECATED This library is deprecated and no new development is taking place. Consider using a FAB(Floating action button) instead. E.g. the Android D

Markus Hintersteiner 1.5k Nov 26, 2022
FButton - a flat button library for Android

FButton FButton is a custom Button of Android with "Flat UI" concept. FButton's design get inspiration from designmono. This library is very small and

Le Van Hoang 1.4k Nov 17, 2022
Android button which moves in eight direction.

Moving Button Android button which moves in eight direction. Preview Sample Demo You can download demo movie file here : demo.mov It's also on Youtube

Leonardo Taehwan Kim 131 Nov 16, 2022
Button for android with animations for transition and error states.

Transition Button Android Preview Expand animation: Shake animation: Installation Gradle dependencies { implementation 'com.royrodriguez:transitionbu

Roy Rodriguez 128 Nov 7, 2022
[] An Android library for an expandable button menu

ExpandableButtonMenu ExpandableButtonMenu is an Android library which implements an expandable button that can be used as a substitute of a fixed size

Lemon Labs 325 Nov 14, 2022
A cute widget of Switch Button for you to create beautiful and friendly UI.

SwitchButton To get a quick preview, you can get Demo apk in Google Play or Directly download. This project provides you a convenient way to use and c

kyleduo 4.6k Nov 18, 2022
A download button with pretty cool animation

ArrowDownloadButton A download button with pretty cool animation, this is an implemention of https://dribbble.com/shots/2012292-Download-Animation Enj

Rongchan Liu 967 Oct 16, 2022
Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK).

HoldingButton Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK). Getting s

Artem Hluhovskyi 593 Nov 25, 2022
This is a Material Design loading button

This is a library project with a custom view that implements concept of Send Comment (https://dribbble.com/shots/1986254-Send-Comment-Shoppr) made by

DevinShine 295 Jul 31, 2022
comtomize view submit button which you use for submit operation or download operation and so on.

This is library project with a custom view that implements concept of Submit Button (https://dribbble.com/shots/1426764-Submit-Button?list=likes&offse

ZhangLei 129 Feb 5, 2021
A raised button that lowers down to 0dp of elevation

RaiflatButton A raised button that lowers down to 0dp of elevation. From my blog post: https://rubensousa.github.io/2016/10/raiflatbutton It behaves l

Rúben Sousa 328 Sep 11, 2022