SmoothProgressBar

A small Android library allowing you to have a smooth and customizable horizontal or circular indeterminate ProgressBar

4,507

1,006

4,507

View on GitHub

Top Related Projects

NumberProgressBar

6,067

A beautiful, slim Android ProgressBar.

CircleProgress

3,811

CircleProgress, DonutProgress, ArcProgress

awesome-android-ui

50,228

A curated list of awesome Android UI/UX libraries

Quick Overview

SmoothProgressBar is an Android library that provides a smooth and customizable horizontal progress bar. It offers a more visually appealing alternative to the standard Android ProgressBar, with fluid animations and various customization options.

Pros

Smooth, fluid animations for progress updates
Highly customizable appearance (colors, speed, interpolator, etc.)
Easy integration with existing Android projects
Supports both determinate and indeterminate progress modes

Cons

Limited to horizontal progress bars only
May require additional performance considerations for complex animations
Not part of the official Android SDK, requiring external dependency management

Code Examples

Basic usage in XML layout:

<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
    android:id="@+id/progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:spb_color="#FF0000"
    app:spb_sections_count="4"
    app:spb_speed="2.0"
    app:spb_stroke_width="4dp"
    app:spb_stroke_separator_length="4dp"/>

Programmatically creating and customizing a SmoothProgressBar:

SmoothProgressBar progressBar = new SmoothProgressBar(context);
progressBar.setSmoothProgressDrawableBackgroundColor(Color.TRANSPARENT);
progressBar.setSmoothProgressDrawableColor(Color.RED);
progressBar.setSmoothProgressDrawableStrokeWidth(dpToPx(4));
progressBar.setSmoothProgressDrawableSeparatorLength(dpToPx(8));
progressBar.setSmoothProgressDrawableReversed(false);
progressBar.setSmoothProgressDrawableMirrorMode(false);

Updating progress and switching between determinate and indeterminate modes:

SmoothProgressBar progressBar = findViewById(R.id.progressbar);

// Set determinate mode and update progress
progressBar.setIndeterminate(false);
progressBar.setProgress(50);

// Switch to indeterminate mode
progressBar.setIndeterminate(true);

Getting Started

Add the dependency to your build.gradle file:

dependencies {
    implementation 'com.github.castorflex.smoothprogressbar:library:1.1.0'
}

Add the SmoothProgressBar to your layout XML:

<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
    android:id="@+id/progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"/>

Customize the progress bar in your Java/Kotlin code:

SmoothProgressBar progressBar = findViewById(R.id.progressbar);
progressBar.setColor(Color.RED);
progressBar.setSpeed(2.0f);

Competitor Comparisons

NumberProgressBar

6,067

A beautiful, slim Android ProgressBar.

Pros of NumberProgressBar

Displays numerical progress alongside the bar
Offers more customization options for colors and styles
Provides a circular progress bar variant

Cons of NumberProgressBar

Less smooth animation compared to SmoothProgressBar
Larger file size and potentially higher resource usage
Limited to showing discrete progress steps

Code Comparison

SmoothProgressBar:

SmoothProgressBar progressBar = (SmoothProgressBar) findViewById(R.id.progressbar);
progressBar.setIndeterminate(true);

NumberProgressBar:

NumberProgressBar bnp = (NumberProgressBar) findViewById(R.id.numberbar1);
bnp.setProgress(50);
bnp.setMax(100);

Key Differences

SmoothProgressBar focuses on fluid, indeterminate progress animations
NumberProgressBar emphasizes precise, numerical progress representation
SmoothProgressBar is better suited for unknown duration tasks
NumberProgressBar is ideal for tasks with known progress percentages

Use Cases

SmoothProgressBar:

Loading screens with unknown durations
Network operations without clear progress indicators

NumberProgressBar:

File downloads with known file sizes
Step-by-step processes with defined stages

Both libraries offer Android developers options for displaying progress, with SmoothProgressBar prioritizing aesthetics and NumberProgressBar focusing on precise progress representation.

CircleProgress

3,811

CircleProgress, DonutProgress, ArcProgress

Pros of CircleProgress

Offers a circular progress indicator, which can be visually appealing for certain designs
Provides customization options for colors, stroke width, and animation speed
Includes a demo app for easy testing and visualization

Cons of CircleProgress

Less actively maintained, with fewer recent updates
Limited to circular progress indicators, lacking variety in shapes
Smaller community and fewer stars on GitHub, potentially indicating less widespread adoption

Code Comparison

SmoothProgressBar:

SmoothProgressBar progressBar = (SmoothProgressBar) findViewById(R.id.progressbar);
progressBar.setProgressiveStartSpeed(2);
progressBar.setProgressiveStopSpeed(3);
progressBar.setColors(getResources().getIntArray(R.array.colors));

CircleProgress:

CircleProgress circleProgress = (CircleProgress) findViewById(R.id.circle_progress);
circleProgress.setProgress(75);
circleProgress.setMaxValue(100);
circleProgress.setProgressColor(Color.BLUE);
circleProgress.setProgressWidth(10);

Both libraries offer easy-to-use progress indicators for Android applications. SmoothProgressBar focuses on horizontal progress bars with smooth animations, while CircleProgress specializes in circular progress indicators. The choice between them depends on the specific design requirements and visual preferences of the project.

Android-SpinKit

8,614

Android loading animations

Pros of Android-SpinKit

Offers a wider variety of animation styles (8 different types)
Provides more customization options for colors and sizes
Includes a demo app for easy visualization of different styles

Cons of Android-SpinKit

Slightly larger library size due to more complex animations
May require more processing power for some of the more intricate animations
Less focused on smooth transitions between progress states

Code Comparison

SmoothProgressBar:

SmoothProgressBar progressBar = (SmoothProgressBar) findViewById(R.id.progressbar);
progressBar.setProgressiveStartSpeed(2);
progressBar.setProgressiveStopSpeed(3);
progressBar.setColors(getResources().getIntArray(R.array.colors));

Android-SpinKit:

ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress);
SpinKitView spinKitView = new SpinKitView(this);
Sprite doubleBounce = new DoubleBounce();
spinKitView.setIndeterminateDrawable(doubleBounce);
progressBar.setIndeterminateDrawable(doubleBounce);

Both libraries offer easy-to-use progress bar implementations for Android applications. SmoothProgressBar focuses on providing a smooth, customizable horizontal progress bar with interpolated animations. Android-SpinKit, on the other hand, offers a variety of loading spinner animations with extensive customization options. The choice between the two depends on the specific design requirements and the type of progress indicator needed in the application.

AVLoadingIndicatorView

9,745

DEPRECATED

Pros of AVLoadingIndicatorView

Offers a wider variety of animation styles (26 different indicators)
Provides more customization options for colors and sizes
Includes a demo app for easy visualization of different styles

Cons of AVLoadingIndicatorView

Larger library size due to more complex animations
May have higher performance overhead for some animations
Less focused on smooth transitions between progress states

Code Comparison

SmoothProgressBar:

SmoothProgressBar progressBar = (SmoothProgressBar) findViewById(R.id.progressbar);
progressBar.setProgressiveStartSpeed(2);
progressBar.setProgressiveStopSpeed(3.4f);
progressBar.setColors(getResources().getIntArray(R.array.colors));

AVLoadingIndicatorView:

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

Both libraries provide easy-to-use progress indicators for Android applications. SmoothProgressBar focuses on creating smooth, continuous progress bars with customizable colors and speeds. AVLoadingIndicatorView offers a wider range of animation styles, making it more suitable for projects requiring diverse loading indicators. However, this comes at the cost of a larger library size and potentially higher performance overhead. The choice between the two depends on the specific needs of the project, with SmoothProgressBar being more appropriate for simple, performance-critical applications, and AVLoadingIndicatorView better suited for projects requiring visual variety.

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 elements
Categorized for easy navigation and discovery

Cons of awesome-android-ui

Not a standalone library, requires integration of multiple dependencies
May lead to increased app size due to multiple UI libraries
Potential compatibility issues between different UI components

Code comparison

SmoothProgressBar:

SmoothProgressBar progressBar = (SmoothProgressBar) findViewById(R.id.progressbar);
progressBar.setColor(Color.parseColor("#FF4081"));
progressBar.setIndeterminate(true);

awesome-android-ui (example using one of its listed libraries):

CircleProgressBar circleProgressBar = (CircleProgressBar) findViewById(R.id.circleProgressbar);
circleProgressBar.setProgress(65);
circleProgressBar.setProgressColor(Color.BLUE);

Summary

SmoothProgressBar is a focused library for creating smooth progress bars, while awesome-android-ui is a curated list of various Android UI libraries. SmoothProgressBar offers a specific solution for progress indicators, whereas awesome-android-ui provides a wide range of UI options but requires more effort to implement and maintain. The choice between the two depends on whether you need a single progress bar solution or a comprehensive collection of UI components for your Android project.

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

Description

Small library allowing you to make a smooth indeterminate progress bar. You can either user your progress bars and set this drawable or use directly the SmoothProgressBarView.

Demo:

Sample app available on the Play Store

SmoothProgressBar

How does it work

I wrote a blog post about that.

Integration

SmoothProgressBar (min API 7):

CircularProgressBar (min API 14):

The lib is now on Maven Central. All you have to do is add it on your gradle build:

dependencies {
    // of course, do not write x.x.x but the version number
    implementation 'com.github.castorflex.smoothprogressbar:library:x.x.x'
    // or
    implementation 'com.github.castorflex.smoothprogressbar:library-circular:x.x.x'
}

You can find the last stable version on Gradle Please

Or you can try the latest snapshots:

repositories {
    maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
}

dependencies {
    implementation 'com.github.castorflex.smoothprogressbar:library:1.4.0-SNAPSHOT'
    implementation 'com.github.castorflex.smoothprogressbar:library-circular:1.4.0-SNAPSHOT'
}

If you really want (or have) to use Eclipse, please look at the forks.

Usage

Use directly SmoothProgressBar:

<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:spb_sections_count="4"
    app:spb_color="#FF0000"
    app:spb_speed="2.0"
    app:spb_stroke_width="4dp"
    app:spb_stroke_separator_length="4dp"
    app:spb_reversed="false"
    app:spb_mirror_mode="false"
    app:spb_progressiveStart_activated="true"
    app:spb_progressiveStart_speed="1.5"
    app:spb_progressiveStop_speed="3.4"
    />

<fr.castorflex.android.circularprogressbar.CircularProgressBar
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:cpb_color="#FFee44"
    app:cpb_colors="@array/mycolors"
    app:cpb_rotation_speed="1.0"
    app:cpb_sweep_speed="1.0"
    app:cpb_stroke_width="4dp"
    app:cpb_min_sweep_angle="10"
    app:cpb_max_sweep_angle="300"
    />

Or use styles:

<style name="AppTheme">
    <item name="spbStyle">@style/GNowProgressBar</item>
    <item name="cpbStyle">@style/CircularThemeProgressBar</item>
</style>

<style name="GNowProgressBar" parent="SmoothProgressBar">
    <item name="spb_stroke_separator_length">0dp</item>
    <item name="spb_sections_count">2</item>
    <item name="spb_speed">1.7</item>
    <item name="spb_progressiveStart_speed">2</item>
    <item name="spb_progressiveStop_speed">3.4</item>
    <item name="spb_interpolator">spb_interpolator_acceleratedecelerate</item>
    <item name="spb_mirror_mode">true</item>
    <item name="spb_reversed">true</item>
    <item name="spb_colors">@array/gplus_colors</item>
    <item name="spb_progressiveStart_activated">true</item>
</style>

<style name="CircularThemeProgressBar" parent="android:Widget.Holo.ProgressBar">
        <item name="cpb_color">@color/cpb_default_color</item>
        <item name="cpb_stroke_width">@dimen/cpb_default_stroke_width</item>
        <item name="cpb_min_sweep_angle">@integer/cpb_default_min_sweep_angle</item>
        <item name="cpb_max_sweep_angle">@integer/cpb_default_max_sweep_angle</item>
        <item name="cpb_sweep_speed">@string/cpb_default_sweep_speed</item>
        <item name="cpb_rotation_speed">@string/cpb_default_rotation_speed</item>
</style>

You can find more styles in the sample app

Or instantiate a SmoothProgressDrawable/CircularProgressDrawable and set it to your ProgressBar

mProgressBar.setIndeterminateDrawable(new SmoothProgressDrawable.Builder(context)
    .color(0xff0000)
    .interpolator(new DecelerateInterpolator())
    .sectionsCount(4)
    .separatorLength(8)         //You should use Resources#getDimensionPixelSize
    .strokeWidth(8f)            //You should use Resources#getDimension
    .speed(2f)                 //2 times faster
    .progressiveStartSpeed(2)
    .progressiveStopSpeed(3.4f)
    .reversed(false)
    .mirrorMode(false)
    .progressiveStart(true)
    .progressiveStopEndedListener(mListener) //called when the stop animation is over
    .build());
    
mProgressBar.setIndeterminateDrawable(new CircularProgressDrawable
    .Builder(this)
    .colors(getResources().getIntArray(R.array.gplus_colors))
    .sweepSpeed(1f)
    .strokeWidth(mStrokeWidth)
    .style(CircularProgressDrawable.Style.ROUNDED)
    [ ... ]
    .build();

You can also set many colors for one bar (see G+ app)

via xml (use the app:spb_colors attribute with a integer-array reference for that)
programmatically (use SmoothProgressDrawable.Builder#colors(int[]) method).

License

Copyright 2014 Antoine Merle

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.

Badges

CI master:

CI dev:

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