CircularFillableLoaders
Realize a beautiful circular fillable loaders to be used for splashscreen 🌊
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
- Basic implementation:
val circularFillableLoaders = findViewById<CircularFillableLoaders>(R.id.circularFillableLoaders)
circularFillableLoaders.progress = 65
- Customizing colors:
circularFillableLoaders.apply {
progress = 75
borderWidth = 10f
borderColor = Color.BLACK
fillColor = Color.RED
}
- Animating progress:
ObjectAnimator.ofInt(circularFillableLoaders, "progress", 0, 100)
.apply {
duration = 3000
interpolator = DecelerateInterpolator()
start()
}
Getting Started
- Add the JitPack repository to your project's
build.gradle
:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
- Add the dependency to your app's
build.gradle
:
dependencies {
implementation 'com.github.lopspower:CircularFillableLoaders:x.y.z'
}
- 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" />
- 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 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 CopilotREADME
CircularFillableLoaders
This is an Android project allowing to realize a beautiful circular fillable loaders to be used for splashscreen for example.
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.
Properties | Type | Default |
---|---|---|
app:cfl_progress | integer | 0 |
app:cfl_border | boolean | true |
app:cfl_border_width | dimension | 4dp |
app:cfl_wave_color | color | BLACK |
app:cfl_wave_amplitude | float | 0.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.
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
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