Convert Figma logo to code with AI

lopspower logoCircularFillableLoaders

Realize a beautiful circular fillable loaders to be used for splashscreen 🌊

1,223
164
1,223
2

Top Related Projects

Android loading animations

DEPRECATED

A curated list of awesome Android UI/UX libraries

a simple loadingview for android with animation

Render After Effects animations natively on Android and iOS, Web, and React Native

Quick Overview

CircularFillableLoaders is an Android library that provides a customizable circular progress view with a liquid fill effect. It allows developers to create visually appealing loading indicators or progress bars with smooth animations and various customization options.

Pros

  • Easy to implement and integrate into Android projects
  • Highly customizable with options for colors, border width, and animation speed
  • Smooth and visually appealing liquid fill animation
  • Lightweight library with minimal impact on app performance

Cons

  • Limited to circular shape, may not fit all design requirements
  • Requires API level 11 or higher, potentially limiting compatibility with older devices
  • Documentation could be more comprehensive, especially for advanced customization
  • No built-in support for indeterminate progress states

Code Examples

  1. Basic implementation:
val circularFillableLoaders = findViewById<CircularFillableLoaders>(R.id.circularFillableLoaders)
circularFillableLoaders.progress = 65
  1. Customizing colors:
circularFillableLoaders.apply {
    progress = 75
    borderWidth = 10f
    borderColor = Color.BLACK
    fillColor = Color.RED
}
  1. Animating progress:
ObjectAnimator.ofInt(circularFillableLoaders, "progress", 0, 100)
    .apply {
        duration = 3000
        interpolator = DecelerateInterpolator()
        start()
    }

Getting Started

  1. Add the JitPack repository to your project's build.gradle:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle:
dependencies {
    implementation 'com.github.lopspower:CircularFillableLoaders:x.y.z'
}
  1. Add the CircularFillableLoaders view to your layout XML:
<com.mikhaellopez.circularfillableloaders.CircularFillableLoaders
    android:id="@+id/circularFillableLoaders"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cfl_border="true"
    app:cfl_border_width="12dp"
    app:cfl_progress="80"
    app:cfl_wave_amplitude="0.06"
    app:cfl_wave_color="#3f51b5" />
  1. Initialize and use the view in your Activity or Fragment:
val circularFillableLoaders = findViewById<CircularFillableLoaders>(R.id.circularFillableLoaders)
circularFillableLoaders.progress = 65

Competitor Comparisons

Android loading animations

Pros of Android-SpinKit

  • Offers a wider variety of loading animations (8 different styles with multiple variations)
  • Supports both programmatic and XML implementation
  • Includes a demo app for easy visualization of different styles

Cons of Android-SpinKit

  • May have a slightly larger footprint due to the variety of animations
  • Requires more setup code for custom styles
  • Less focused on a specific animation type (circular loaders)

Code Comparison

CircularFillableLoaders:

CircularFillableLoaders circularFillableLoaders = (CircularFillableLoaders)findViewById(R.id.circularFillableLoaders);
circularFillableLoaders.setProgress(65);
circularFillableLoaders.setAmplitudeRatio(0.1f);

Android-SpinKit:

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

Both libraries offer easy-to-use implementations, but Android-SpinKit requires slightly more code for custom animations. CircularFillableLoaders focuses on a specific type of loader, while Android-SpinKit provides more variety. The choice between them depends on the specific project requirements and desired visual style.

DEPRECATED

Pros of AVLoadingIndicatorView

  • Offers a wide variety of loading indicator styles (29 different types)
  • Supports both determinate and indeterminate progress indicators
  • Easy to customize colors and sizes of indicators

Cons of AVLoadingIndicatorView

  • More complex implementation due to the variety of options
  • Larger library size compared to CircularFillableLoaders
  • May require more setup time to choose and configure the desired indicator

Code Comparison

CircularFillableLoaders:

CircularFillableLoaders circularFillableLoaders = (CircularFillableLoaders)findViewById(R.id.circularFillableLoaders);
circularFillableLoaders.setProgress(65);
circularFillableLoaders.setAmplitudeRatio(0.1f);

AVLoadingIndicatorView:

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

Both libraries provide easy-to-use loading indicators for Android applications. CircularFillableLoaders focuses on a single, customizable circular loader with a water-fill effect, while AVLoadingIndicatorView offers a diverse range of indicator styles. CircularFillableLoaders is simpler to implement but less versatile, whereas AVLoadingIndicatorView provides more options but may require more setup time. The choice between the two depends on the specific needs of the project and the desired visual style.

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 contributions from the community
  • Covers a wide range of UI elements and design patterns

Cons of awesome-android-ui

  • Not a standalone library, requires additional implementation
  • May overwhelm developers with too many options
  • Inconsistent quality across different linked libraries

Code comparison

CircularFillableLoaders:

CircularFillableLoaders circularFillableLoaders = (CircularFillableLoaders)findViewById(R.id.yourCircularFillableLoaders);
circularFillableLoaders.setProgress(65);
circularFillableLoaders.setAmplitudeRatio(0.1f);

awesome-android-ui: No direct code comparison available as it's a curated list, not a library.

Summary

CircularFillableLoaders is a specific library for creating circular progress indicators, while awesome-android-ui is a curated list of various Android UI libraries and components. CircularFillableLoaders offers a focused solution for a particular UI element, making it easier to implement if that's the specific need. On the other hand, awesome-android-ui provides a broader range of options and resources for developers looking to enhance their app's UI, but requires more effort to navigate and implement the chosen libraries.

a simple loadingview for android with animation

Pros of LoadingView

  • Offers a wider variety of loading animations and styles
  • Provides more customization options for colors, sizes, and shapes
  • Includes both circular and linear loading views

Cons of LoadingView

  • May have a steeper learning curve due to more complex API
  • Potentially higher resource usage with more elaborate animations
  • Less focused on a specific loading style, which might be overwhelming for simple use cases

Code Comparison

LoadingView:

LVCircularRing loadingView = new LVCircularRing(context);
loadingView.setViewColor(Color.parseColor("#ff0000"));
loadingView.setBarWidth(5);
loadingView.startAnim();

CircularFillableLoaders:

CircularFillableLoaders circularFillableLoaders = findViewById(R.id.circularFillableLoaders);
circularFillableLoaders.setColor(Color.parseColor("#ff0000"));
circularFillableLoaders.setAmplitudeRatio(0.1f);
circularFillableLoaders.setProgress(80);

Both libraries offer easy-to-use APIs for creating loading animations, but LoadingView provides more options for customization and animation types. CircularFillableLoaders focuses specifically on circular fill animations, making it simpler for that particular use case. The code examples demonstrate that both libraries allow for color customization and animation control, with LoadingView requiring explicit animation start, while CircularFillableLoaders uses a progress-based approach.

Render After Effects animations natively on Android and iOS, Web, and React Native

Pros of Lottie-Android

  • Supports complex animations created in Adobe After Effects
  • Extensive customization options and runtime manipulation
  • Large community and active development

Cons of Lottie-Android

  • Larger library size and potential performance overhead
  • Steeper learning curve for creating and integrating animations
  • Requires external tools (After Effects) for creating animations

Code Comparison

CircularFillableLoaders:

CircularFillableLoaders circularFillableLoaders = (CircularFillableLoaders)findViewById(R.id.yourCircularFillableLoaders);
circularFillableLoaders.setProgress(65);
circularFillableLoaders.setAmplitudeRatio(0.1f);

Lottie-Android:

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation(R.raw.your_animation);
animationView.setProgress(0.5f);
animationView.playAnimation();

CircularFillableLoaders is a simpler library focused on creating circular progress indicators with a water fill effect. It's lightweight and easy to implement but limited in functionality.

Lottie-Android offers more versatility, supporting a wide range of complex animations. It's better suited for projects requiring intricate, designer-created animations but comes with a larger footprint and more complex implementation.

The code comparison shows that both libraries allow for easy progress setting, but Lottie-Android provides more advanced animation control and loading options.

Convert Figma logo designs to code with AI

Visual Copilot

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

Try Visual Copilot

README

CircularFillableLoaders

sample

Platform API Maven Central Twitter

This is an Android project allowing to realize a beautiful circular fillable loaders to be used for splashscreen for example.

Android app on Google Play

USAGE

To make a circular fillable loaders add CircularFillableLoaders in your layout XML and add CircularFillableLoaders library in your project or you can also grab it via Gradle:

implementation 'com.mikhaellopez:circularfillableloaders:1.4.0'

XML

<com.mikhaellopez.circularfillableloaders.CircularFillableLoaders
    android:id="@+id/circularFillableLoaders"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/your_logo"
    app:cfl_border="true"
    app:cfl_border_width="12dp"
    app:cfl_progress="80"
    app:cfl_wave_amplitude="0.06"
    app:cfl_wave_color="#3f51b5" />

You must use the following properties in your XML to change your CircularFillableLoaders.

PropertiesTypeDefault
app:cfl_progressinteger0
app:cfl_borderbooleantrue
app:cfl_border_widthdimension4dp
app:cfl_wave_colorcolorBLACK
app:cfl_wave_amplitudefloat0.05f (between 0.00f and 0.10f)

JAVA

CircularFillableLoaders circularFillableLoaders = (CircularFillableLoaders)findViewById(R.id.yourCircularFillableLoaders);
// Set Progress
circularFillableLoaders.setProgress(60);
// Set Wave and Border Color
circularFillableLoaders.setColor(Color.RED);
// Set Border Width
circularImageView.setBorderWidth(10 * getResources().getDisplayMetrics().density);
// Set Wave Amplitude (between 0.00f and 0.10f)
circularFillableLoaders.setAmplitudeRatio(0.08);

SUPPORT ❤️

Find this library useful? Support it by joining stargazers for this repository ⭐️
And follow me for my next creations 👍

LICENCE

CircularFillableLoaders by Lopez Mikhael is licensed under a Apache License 2.0. Based on a work at https://github.com/gelitenight/WaveView.