FABProgressCircle

Material progress circle around any FloatingActionButton. 100% Guidelines.

1,247

181

1,247

View on GitHub

Top Related Projects

CircularProgressBar

1,726

Create circular ProgressBar in Android ⭕

awesome-android-ui

50,228

A curated list of awesome Android UI/UX libraries

CircularReveal

2,428

Lollipop ViewAnimationUtils.createCircularReveal for everyone 4.0+

Quick Overview

FABProgressCircle is an Android library that extends the Floating Action Button (FAB) with a customizable progress circle. It allows developers to add visual feedback to FAB interactions, enhancing the user experience in Android applications.

Pros

Easy integration with existing FAB implementations
Customizable appearance and animation properties
Smooth and visually appealing animations
Compatible with Android 4.0 (API level 14) and above

Cons

Limited to circular progress indicators only
May require additional layout considerations in complex UI designs
Potential performance impact on older devices with multiple animations
Not actively maintained (last update was in 2017)

Code Examples

Basic usage:

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action" />

</com.github.jorgecastilloprz.FABProgressCircle>

// In your Activity or Fragment
fabProgressCircle.show()

Customizing appearance:

fabProgressCircle.setProgressColor(ContextCompat.getColor(this, R.color.accent))
fabProgressCircle.setProgressBarInset(2)
fabProgressCircle.setProgressBarThickness(4)

Handling completion:

fabProgressCircle.beginFinalAnimation()
fabProgressCircle.setOnFinalFabAnimationEndListener {
    // Perform action after animation completes
}

Getting Started

Add the dependency to your build.gradle file:

dependencies {
    implementation 'com.github.jorgecastilloprz:fabprogresscircle:1.01@aar'
}

Include the FABProgressCircle in your layout XML:

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action" />

</com.github.jorgecastilloprz.FABProgressCircle>

Use the FABProgressCircle in your Activity or Fragment:

val fabProgressCircle: FABProgressCircle = findViewById(R.id.fabProgressCircle)
fabProgressCircle.show()
// Perform your async task
// When complete:
fabProgressCircle.beginFinalAnimation()

Competitor Comparisons

circular-progress-button

5,744

Android Circular Progress Button

Pros of circular-progress-button

More customizable with various states (progress, success, error)
Supports both indeterminate and determinate progress
Includes text within the button, making it more versatile

Cons of circular-progress-button

Less focused on the Floating Action Button (FAB) design
May require more setup and configuration
Not specifically optimized for circular progress around FABs

Code Comparison

FABProgressCircle:

FABProgressCircle fabProgressCircle = (FABProgressCircle) findViewById(R.id.fabProgressCircle);
fabProgressCircle.show();

circular-progress-button:

CircularProgressButton circularButton = (CircularProgressButton) findViewById(R.id.circularButton);
circularButton.setProgress(50); // 0-100 for determinate progress
circularButton.setIndeterminateProgressMode(true); // For indeterminate progress

FABProgressCircle focuses on adding a progress circle around an existing FAB, while circular-progress-button provides a more comprehensive button with built-in progress functionality. The latter offers more states and customization options but may require more setup. FABProgressCircle is simpler to implement for adding progress to FABs, while circular-progress-button is better suited for general button progress scenarios.

CircularProgressBar

1,726

Create circular ProgressBar in Android ⭕

Pros of CircularProgressBar

More customization options for the progress bar appearance
Supports both determinate and indeterminate progress modes
Easier to integrate into existing layouts without requiring a FloatingActionButton

Cons of CircularProgressBar

Lacks built-in animation for transitioning between states
Does not offer specific integration with FloatingActionButton
May require more manual setup for complex use cases

Code Comparison

FABProgressCircle:

fabProgressCircle.attachListener(object : CircleProgressView.OnFABProgressAnimationEndListener {
    override fun onFABProgressAnimationEnd() {
        // Handle animation end
    }
})
fabProgressCircle.show()

CircularProgressBar:

circularProgressBar.apply {
    progress = 65f
    progressMax = 100f
    progressBarColor = Color.BLACK
    backgroundProgressBarColor = Color.GRAY
}

Both libraries offer circular progress indicators, but they serve slightly different purposes. FABProgressCircle is specifically designed to work with FloatingActionButtons, providing a seamless way to show progress around FABs. CircularProgressBar, on the other hand, is a more general-purpose progress indicator that can be used in various layouts and offers more customization options for the progress bar itself.

FABProgressCircle excels in its simplicity and integration with FABs, while CircularProgressBar provides more flexibility for different use cases and layouts. The choice between the two depends on the specific requirements of your project and whether you need a progress indicator specifically for FABs or a more versatile solution.

Android-SpinKit

8,614

Android loading animations

Pros of Android-SpinKit

Offers a wide variety of loading animations (12 different styles)
Supports both programmatic and XML implementation
Highly customizable with options for color, size, and speed

Cons of Android-SpinKit

Larger library size due to multiple animation styles
May require more setup and configuration for specific use cases
Not specifically designed for FAB integration

Code Comparison

FABProgressCircle:

FABProgressCircle fabProgressCircle = (FABProgressCircle) findViewById(R.id.fabProgressCircle);
fabProgressCircle.show();
fabProgressCircle.beginFinalAnimation();

Android-SpinKit:

ProgressBar progressBar = (ProgressBar)findViewById(R.id.spin_kit);
Sprite doubleBounce = new DoubleBounce();
progressBar.setIndeterminateDrawable(doubleBounce);

Summary

Android-SpinKit provides a diverse set of loading animations suitable for various Android applications, while FABProgressCircle focuses specifically on integrating progress indicators with Floating Action Buttons. Android-SpinKit offers more flexibility in terms of animation styles but may require more setup. FABProgressCircle provides a simpler implementation for FAB-specific progress indicators. Choose based on your specific needs: general-purpose loading animations (Android-SpinKit) or FAB-integrated progress (FABProgressCircle).

AVLoadingIndicatorView

9,745

DEPRECATED

Pros of AVLoadingIndicatorView

Offers a wide variety of loading indicator styles (over 30)
Supports both determinate and indeterminate progress indicators
Easy to customize colors and sizes of indicators

Cons of AVLoadingIndicatorView

Larger library size due to multiple indicator styles
May require more setup and configuration for specific use cases
Less focused on integrating with Floating Action Buttons (FABs)

Code Comparison

FABProgressCircle:

FABProgressCircle fabProgressCircle = (FABProgressCircle) findViewById(R.id.fabProgressCircle);
fabProgressCircle.show();
fabProgressCircle.beginFinalAnimation();

AVLoadingIndicatorView:

AVLoadingIndicatorView avi = (AVLoadingIndicatorView) findViewById(R.id.avi);
avi.show();
avi.setIndicator("BallPulseIndicator");
avi.setIndicatorColor(Color.BLUE);

Summary

FABProgressCircle is specifically designed for integrating progress indicators with Floating Action Buttons, offering a focused solution for this use case. It provides a clean and simple API for showing progress and completing animations.

AVLoadingIndicatorView, on the other hand, offers a broader range of loading indicator styles and is more versatile in its application. It can be used in various contexts throughout an app, not just with FABs. However, this versatility comes at the cost of a larger library size and potentially more complex setup for specific use cases.

Choose FABProgressCircle for seamless FAB integration, or AVLoadingIndicatorView for a wider variety of indicator styles across your app.

awesome-android-ui

50,228

A curated list of awesome Android UI/UX libraries

Pros of awesome-android-ui

Comprehensive collection of UI libraries and components
Regularly updated with new and trending UI resources
Categorized for easy navigation and discovery

Cons of awesome-android-ui

Not a standalone library, requires additional implementation
May include outdated or deprecated libraries
No direct code examples or implementation guidance

Code comparison

FABProgressCircle provides a specific implementation for a progress circle around a Floating Action Button:

FABProgressCircle fabProgressCircle = (FABProgressCircle) findViewById(R.id.fabProgressCircle);
fabProgressCircle.show();

awesome-android-ui doesn't provide direct code examples, as it's a curated list of UI libraries. Users would need to refer to individual library documentation for implementation details.

Summary

FABProgressCircle is a focused library for adding progress indicators to Floating Action Buttons, while awesome-android-ui is a comprehensive collection of various UI libraries and components. FABProgressCircle offers a specific solution with direct implementation, whereas awesome-android-ui provides a wide range of options but requires additional research and integration efforts. Choose FABProgressCircle for a quick and specific FAB progress implementation, or use awesome-android-ui as a starting point to explore diverse UI options for your Android project.

CircularReveal

2,428

Lollipop ViewAnimationUtils.createCircularReveal for everyone 4.0+

Pros of CircularReveal

Offers a more versatile circular reveal animation that can be applied to various UI elements, not limited to FABs
Provides smoother animations with customizable interpolators
Supports both circular reveal and hide animations

Cons of CircularReveal

Requires more setup and configuration compared to FABProgressCircle's simpler implementation
May have higher performance overhead due to its more complex animations
Less focused on progress indication, which is FABProgressCircle's primary feature

Code Comparison

FABProgressCircle:

FABProgressCircle fabProgressCircle = (FABProgressCircle) findViewById(R.id.fabProgressCircle);
fabProgressCircle.show();
// ... perform task
fabProgressCircle.beginFinalAnimation();

CircularReveal:

View myView = findViewById(R.id.my_view);
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
float finalRadius = (float) Math.hypot(cx, cy);
Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.start();

CircularReveal offers more flexibility in terms of animation parameters, while FABProgressCircle provides a simpler API focused on progress indication for FABs. The choice between the two depends on the specific use case and desired level of customization.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

FABProgressCircle

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:

Youtube FABProgressCircle video

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

Sample video from Google

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:1.01@aar'
}

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

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.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot