Material progress circle around any FloatingActionButton. 100% Guidelines.

Overview

FABProgressCircle

Build Status Android Arsenal Maven Central

Android library to provide a material progress circle around your FloatingActionButton. This component is compatible with any existent FAB.

Demo Screenshot

Demo Screenshot2

Sample app:

Get it on Google Play

Youtube FABProgressCircle video

FABProgressCircle follows material guidelines at 100%. Links to Google samples of this behavior:

How to use

You can use the FABProgressCircle to wrap any existent FAB. Here you have an example wrapping the Google FloatingActionButton from the brand new Design Support Library.

<com.github.jorgecastilloprz.FABProgressCircle
    android:id="@+id/fabProgressCircle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

  <!-- You can change it with the fab from the library you want to use -->
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/ic_upload"
      app:rippleColor="@color/fab_ripple"
      app:elevation="@dimen/fab_elevation"
      app:borderWidth="0dp"
      />

</com.github.jorgecastilloprz.FABProgressCircle>

To show the progress circle, call the show() method into the normal click/touch listener of your fab:

fabView.setOnClickListener(new View.OnClickListener() {
  @Override public void onClick(View view) {
    fabProgressCircle.show();
    startYourAsynchronousJob();
  }
});

The progress animation will be indeterminate at the beginning, as you can't really know how long is the asynchronous call going to take to complete.

IMPORTANT: The animation will start playing everytime the user clicks on the button. Developers should control the potential spam click in their fab buttons, to not allow the users to click on it if the asynchronous task and the progress animation are already running / playing at that very moment. I rather leaving that behavior to every dev using this library.

To play the completion animation, you will need to call:

fabProgressCircle.beginFinalAnimation();

When the completion animation is displayed, the fab gets transformed to its final appearance, and it becomes not clickable anymore. This behavior is intentional. If you want your fab to get clickable again (to be able to repeat the process), check custom attribute app:reusable="true" in the custom attributes list. If something happens to the asynchronous task running (some kind of error), you can always stop the animation by doing:

fabProgressCircle.hide();

For listening to the completion animation, your class needs to implement the FABProgressListener interface:

fabProgressCircle.attachListener(this);

If you do that, the following method call will be dispatched at the right time. The Snackbar creation is just an example:

@Override public void onFABProgressAnimationEnd() {
    Snackbar.make(fabProgressCircle, R.string.cloud_upload_complete, Snackbar.LENGTH_LONG)
        .setAction("Action", null)
        .show();
}

Custom Attributes

Even if i want the component to respect material guidelines, you can customize some parameters to adapt it a little bit for your application UI/UX. Here they are:

  • app:arcColor="@color/progressArcColor": Sets the color for the arc, and for the final aspect of the FAB (after the transform animation).
  • app:arcWidth="@dimen/arcStrokeWidth": Stroke width for the progress circle.
  • app:finalIcon="@drawable/ic_done": By default, this library uses the typical ic_done icon at the end of the animation. Normally i would rather not to change it, but feel free to do it if you need to.
  • app:reusable="true": By default, the FAB gets locked when the final animation finishes. Use this attr to allow using the FAB multiple times. A new fadeout anim will be played after completion, and the component will get reset to it's initial state.
  • app:circleSize="normal" or app:circleSize="mini": Normally you will not use this attribute, as the default size for the circle is the normal one. But if you are working with a mini sized FAB, you will need to use it.
  • app:roundedStroke="true": Use this one to have a rounded stroke on both progress circle heads. You will not really notice the difference for the default arcStrokeWidth, but you will if you are using a higher width to get some cool effects.

Of course, anyone of the custom attrs can be used with resource references (@dimen, @color, @integer ...) or just literal values. Dont forget to add the namespace declaration to your xml file. You can change the namespace name from app to anything you want.

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

Code sample

<com.github.jorgecastilloprz.FABProgressCircle
    android:id="@+id/fabProgressCircle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:arcColor="#00ffff"
    app:arcWidth="7dp"
    app:finalIcon="@drawable/ic_bookmark_complete"
    >

  <android.support.design.widget.FloatingActionButton
      ...
      />

</com.github.jorgecastilloprz.FABProgressCircle>

Remember that the FAB customization / configuration depends on the FAB library, not on this one. This is just a component used to wrap it visually. I created it by this way to make it totally compatible with any fab library you might be using into your app.

Mini Size

Mini size is totally supported, so feel free to use the app:fabSize="mini" custom attribute on the Google FAB, or the corresponding mini custom attribute of the fab library you are using. IMPORTANT: You will need to add the custom attribute app:circleSize="mini" to the FABProgressCircle to get this feature working on properly.

Demo Screenshot3

Supported most used FAB libraries

Known issues

  • Still not compatible with complex fab modes like the FloatingActionsMenu from the futuresimple library. I will work on that as soon as possible.
  • Not tested for makovkastar library hidding / showing mode when attached to some ListView / RecyclerView. But it will pretty much fail (i think).

Pull requests to solve the above stated issues will be very welcome.

Contributions

Feel free to send Pull Requests to this repository if you feel that it lacks some functionality. I will be pleased to accept or discuss about them. However, Material Design guidelines will be required.

Add it to your project

If you are working with gradle, add the dependency to your build.gradle file:

dependencies{
    compile 'com.github.jorgecastilloprz:fabprogresscircle:[email protected]'
}

if you are working with maven, do it into your pom.xml

<dependency>
    <groupId>com.github.jorgecastilloprz</groupId>
    <artifactId>fabprogresscircle</artifactId>
    <version>1.01</version>
    <type>aar</type>
</dependency>

Developed By

Add me to Linkedin

License

Copyright 2015 Jorge Castillo Pérez

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.
Comments
  • BeginAnimation turns FAB into white

    BeginAnimation turns FAB into white

    This is my code

    <com.github.jorgecastilloprz.FABProgressCircle
                android:id="@+id/fabProgressCircle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="15dp"
                android:layout_marginTop="150dp"
                android:visibility="invisible"
                app:arcColor="#ffffff"
                app:finalIcon="@drawable/ic_done"
                app:arcWidth="2dp">
    
                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/file_start"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_colorNormal="@color/accent"
                    fab:fab_colorPressed="@color/accentDark"
                    fab:fab_icon="@drawable/start_lock"
                    fab:fab_size="normal" />
            </com.github.jorgecastilloprz.FABProgressCircle>
    

    When ever I am calling the method, progress.beginAnimation() the entire FAB turns into solid white color. No drawable is put in it to indicate completion.

    Can someone please help to solve this?

    opened by aritraroy 3
  • Remove

    Remove "allowBackup" from AndroidManifest

    There is no reason allowBackup="true" should be set in the AndroidManifest. This will cause the manifest merger build step to fail if an application specifies allowBackup="false".

    opened by bryanstern 1
  • Elevation attribute not working

    Elevation attribute not working

    As the tittle says, the elevation attribute of the Google FAB and FABProgressCircle are not working. If I use the Google FAB alone, the attribute works as expected.

    opened by amiguels 0
  • Add support for custom animation duration

    Add support for custom animation duration

    Add support for custom duration for complete / shrink / grow / rotation animation

    Add setter and getter for property Add option to not show final icon Add option to modify the visibility duration of the final icon

    Move all file in one package to protect access of internal classes Change app gradle to depends on local library project Update README

    opened by kmenager 0
  • fix: Fix complete icon not showing

    fix: Fix complete icon not showing

    Don't set the margins of the complete view in code but instead set size of the complete icon in XML. Content size of a FAB should always be 24dp, regardless of its size.

    Seems like setting the padding does somethings strange. Although you set the padding on all sides, the icons gets moved to the lower right (and out of the view), hence the icon is not visible. Honestly, I don't know why this is happening but setting the size of the icon in XML instead seems like an easy solution. Maybe even easier then setting a padding in code in the first place? Let me know what you think!

    opened by fnberta 0
  • call show and hide in row

    call show and hide in row

    Maybe is bug. I called

    fabProgressCircle.show();
    fabProgressCircle.hide();
    

    its stay show.. xml code :

    <com.github.jorgecastilloprz.FABProgressCircle
            android:id="@+id/fabProgressCircle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom">
    
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:tint="@android:color/white"
                app:reusable="true"
                app:srcCompat="@drawable/ic_arrow_forward_black_24dp" />
    
    </com.github.jorgecastilloprz.FABProgressCircle>
    
    

    any solution?

    opened by marko995 1
Owner
Jorge Castillo
Senior Sofware Engineer @47deg
Jorge Castillo
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
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
Android Buttons With Built-in Progress Meters.

Description Android Buttons With Built-in Progress Meters. Wiki Home Screenshots User Guide Integration The lib is available on Maven Central, you can

Dmytro Danylyk 3k Nov 20, 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
Sometimes, we need to show a label above an ImageView or any other views. Well, LabelView will be able to help you. It's easy to implement as well!

LabelView Sometimes, we need to show a label above an ImageView or any other views. Well, LabelXXView will be able to help you. It's easy to implement

Jingwei 1.9k Nov 3, 2022
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. Customi

Zendesk 6.4k Nov 21, 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
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
Material progress circle around any FloatingActionButton. 100% Guidelines.

FABProgressCircle Android library to provide a material progress circle around your FloatingActionButton. This component is compatible with any existe

Jorge Castillo 1.3k Nov 21, 2022
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.

Material Design Dimens Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library. Dimens Pattern: R.di

Dmitry Malkovich 1.4k Nov 21, 2022
A layout that creates a loading-like progress around it's child ( circle ) on touch, inspired from Destiny's ( PS4 ) accept mechanism

HoldToLoadLayout HoldToLoadLayout is a view group that can contain a single child. It draws your child to middle of layout, and performs loading wheel

Melih Aksoy 79 Feb 8, 2022
Animate a strike over any image to indicate on/off states. As seen in the Material Guidelines.

StrikedImageView Animate a strike over any image to indicate on/off states. As seen in the Material Guidelines. Gradle allprojects { repositories

null 9 Sep 21, 2022
Custom circular SeekBar (Circle, Semi-circle, and Ellipse) View/Widget for Android

CircularSeekBar Android CircularSeekBar Custom View/Widget This is a custom circular SeekBar. It can be used to create SeekBars that are: -Full Circle

Matt Joseph 463 Nov 26, 2022
📱 Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.

Material NavigationView for Android ?? ?? Android Library to implement Rich, Beautiful Material Navigation View for your project with Material Design

Shreyas Patil 199 Nov 10, 2022
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.

TextFieldBoxes A new Material Design text field that comes in a box, based on Google Material Design guidelines. ???? 中文看这里 UPDATE NOTICE 1.4.5 Releas

Mark Wang 769 Nov 11, 2022
A FloatingActionButton subclass that shows a counter badge on right top corner

CounterFab A FloatingActionButton subclass that shows a counter badge on right top corner It's also used by Louvre library. Installation Include the l

André Mion 733 Nov 22, 2022
🚀🌆🏙 Display differences or animate progress between 2 images or Composables with overlay and customization options, zoom, pan gestures, and progress to observe properties for animating before-after progress

Compose Before-After Composables to display Images, or Composables as before and after composables to display differences or animate progress between

Smart Tool Factory 55 Nov 22, 2022
An implementation of tap targets from the Material Design guidelines for feature discovery.

TapTargetView An implementation of tap targets from Google's Material Design guidelines on feature discovery. Min SDK: 14 JavaDoc Installation TapTar

Keepsafe 5.2k Nov 30, 2022
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Material Bottom Navigation Library Lightweight Bottom Navigation library component inspired by the Google Material Design Guidelines at https://www.go

Alessandro Crugnola 1.4k Nov 10, 2022
An implementation of tap targets from the Material Design guidelines for feature discovery.

TapTargetView An implementation of tap targets from Google's Material Design guidelines on feature discovery. Min SDK: 14 JavaDoc Installation TapTar

Keepsafe 5.2k Nov 24, 2022