Convert Figma logo to code with AI

lopspower logoCircularProgressBar

Create circular ProgressBar in Android ⭕

1,726
222
1,726
26

Top Related Projects

[Android] Round Corner Progress Bar Library for Android

A beautiful, slim Android ProgressBar.

Thirty-one different easing animation interpolators for Android.

Android loading animations

Quick Overview

CircularProgressBar is an Android library that provides a customizable circular progress bar. It allows developers to easily add circular progress indicators to their Android applications with various styles and animations.

Pros

  • Easy to implement and customize
  • Supports both determinate and indeterminate progress
  • Offers smooth animations and transitions
  • Highly configurable with numerous attributes

Cons

  • Limited to circular shape only
  • May require additional effort to integrate with complex layouts
  • Documentation could be more comprehensive
  • Some advanced features might require deeper understanding of custom views

Code Examples

  1. Basic implementation:
<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cpb_progress="65"
    app:cpb_progress_max="100"
    app:cpb_progress_direction="to_right"/>

This code adds a basic circular progress bar with 65% progress.

  1. Customizing appearance:
circularProgressBar.apply {
    progressBarColor = Color.BLACK
    backgroundProgressBarColor = Color.GRAY
    progressBarWidth = 7f
    backgroundProgressBarWidth = 3f
}

This example demonstrates how to customize the colors and widths of the progress bar programmatically.

  1. Adding animation:
circularProgressBar.setProgressWithAnimation(65f, 1000) // Duration 1000ms

This code animates the progress bar to 65% over a duration of 1 second.

Getting Started

  1. Add the dependency to your build.gradle file:
implementation 'com.mikhaellopez:circularprogressbar:3.1.0'
  1. Add the CircularProgressBar to your layout:
<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:id="@+id/circularProgressBar"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:cpb_progress="65"
    app:cpb_progress_max="100"
    app:cpb_background_progressbar_color="#b6bbd8"
    app:cpb_background_progressbar_width="10dp"
    app:cpb_progress_direction="to_right"
    app:cpb_progressbar_color="#3f51b5"
    app:cpb_progressbar_width="20dp"
    app:cpb_round_border="true" />
  1. Customize the progress bar programmatically if needed:
val circularProgressBar = findViewById<CircularProgressBar>(R.id.circularProgressBar)
circularProgressBar.apply {
    // Customize properties here
    progress = 65f
    setProgressWithAnimation(65f, 1000)
}

Competitor Comparisons

[Android] Round Corner Progress Bar Library for Android

Pros of RoundCornerProgressBar

  • Offers more customization options, including corner radius and background color
  • Supports multiple progress bars in a single view
  • Provides both horizontal and vertical progress bar orientations

Cons of RoundCornerProgressBar

  • Larger library size compared to CircularProgressBar
  • May have a steeper learning curve due to more configuration options
  • Less focused on circular progress bars specifically

Code Comparison

CircularProgressBar:

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

RoundCornerProgressBar:

val progressBar = RoundCornerProgressBar(context)
progressBar.progress = 65f
progressBar.max = 100f
progressBar.progressColor = Color.BLACK
progressBar.progressBackgroundColor = Color.GRAY
progressBar.radius = 10f

Both libraries offer simple ways to create and customize progress bars, but RoundCornerProgressBar provides more options for shape customization, while CircularProgressBar focuses specifically on circular progress indicators.

A beautiful, slim Android ProgressBar.

Pros of NumberProgressBar

  • Linear design may be more suitable for certain UI layouts
  • Includes a numeric percentage display by default
  • Simpler implementation for basic progress tracking

Cons of NumberProgressBar

  • Less visually striking compared to circular design
  • Limited customization options for appearance
  • Not as space-efficient for compact layouts

Code Comparison

NumberProgressBar:

<com.daimajia.numberprogressbar.NumberProgressBar
    android:id="@+id/number_progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

CircularProgressBar:

<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:id="@+id/circularProgressBar"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:cpb_progress="65"
    app:cpb_progressbar_color="#3f51b5"
    app:cpb_background_progressbar_color="#b6bbd8" />

CircularProgressBar offers more customization options in XML, allowing for easy styling of colors and sizes. NumberProgressBar's implementation is simpler but provides fewer built-in customization attributes.

Both libraries are easy to integrate into Android projects, but CircularProgressBar offers a more modern and flexible design approach. NumberProgressBar may be preferable for projects requiring a traditional, linear progress indicator with minimal setup.

Pros of discreteSeekBar

  • Offers a discrete seek bar with customizable steps and tick marks
  • Provides a more traditional Android-style slider interface
  • Supports both horizontal and vertical orientations

Cons of discreteSeekBar

  • Limited to linear progress representation
  • Less visually striking compared to circular progress bars
  • May require more screen space for effective display

Code Comparison

CircularProgressBar:

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

discreteSeekBar:

discreteSeekBar.apply {
    max = 100
    progress = 65
    numericTransformer = object : DiscreteSeekBar.NumericTransformer() {
        override fun transform(value: Int): Int = value * 2
    }
}

Summary

CircularProgressBar offers a visually appealing circular progress indicator, ideal for compact displays and modern UI designs. It excels in showing percentage-based progress.

discreteSeekBar provides a more traditional slider interface with discrete steps, suitable for scenarios where users need to select specific values within a range. It offers greater flexibility in terms of orientation and step customization.

The choice between these libraries depends on the specific UI requirements and user interaction needs of your application.

Thirty-one different easing animation interpolators for Android.

Pros of EasingInterpolator

  • Offers a wide variety of easing functions for animations
  • Lightweight and easy to integrate into existing projects
  • Provides smooth and natural-looking animations

Cons of EasingInterpolator

  • Limited to interpolation and easing, doesn't provide a complete progress bar solution
  • Requires more custom implementation for visual elements
  • May have a steeper learning curve for beginners

Code Comparison

CircularProgressBar:

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

EasingInterpolator:

val interpolator = EasingInterpolator(EasingProvider.CUBIC_OUT)
val animator = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f)
animator.interpolator = interpolator
animator.duration = 1000
animator.start()

CircularProgressBar focuses on creating and customizing a circular progress bar, while EasingInterpolator provides interpolation functions for general animation purposes. CircularProgressBar offers a more complete solution for progress indicators, whereas EasingInterpolator gives developers more control over animation timing and behavior across various UI elements.

Android loading animations

Pros of Android-SpinKit

  • Offers a wider variety of animation styles (12 different loading animations)
  • Provides more customization options for each animation type
  • Includes support for programmatically controlling animations

Cons of Android-SpinKit

  • Larger library size due to multiple animation styles
  • May require more setup and configuration for specific animations
  • Potentially higher performance overhead for complex animations

Code Comparison

CircularProgressBar:

<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cpb_progress="65"
    app:cpb_progressbar_color="#3f51b5"
    app:cpb_background_progressbar_color="#b6bbd8"
    app:cpb_progressbar_width="10dp" />

Android-SpinKit:

<com.github.ybq.android.spinkit.SpinKitView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/SpinKitView.Large.Circle"
    app:SpinKit_Color="@color/colorAccent" />

Both libraries offer easy-to-use XML implementations, but Android-SpinKit provides more animation styles through different style attributes. CircularProgressBar focuses specifically on circular progress bars with customizable properties, while Android-SpinKit offers a broader range of loading animations. The choice between the two depends on the specific requirements of your project and the desired visual style.

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

CircularProgressBar

sample

Platform API Maven Central Twitter

This is an Android project allowing to realize a circular ProgressBar in the simplest way possible.

Android app on Google Play

USAGE

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

implementation 'com.mikhaellopez:circularprogressbar:3.1.0'

XML

<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:id="@+id/circularProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cpb_background_progressbar_color="#b6bbd8"
    app:cpb_background_progressbar_width="5dp"
    app:cpb_progress_direction="to_right"
    app:cpb_progressbar_color="#3f51b5"
    app:cpb_progressbar_width="10dp"
    app:cpb_round_border="false" />

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

PropertiesTypeDefault
app:cpb_progressinteger0
app:cpb_progress_maxinteger100
app:cpb_indeterminate_modebooleanfalse
app:cpb_progressbar_colorcolorBLACK
app:cpb_progressbar_color_startcolorcpb_progressbar_color
app:cpb_progressbar_color_endcolorcpb_progressbar_color
app:cpb_progressbar_color_directionleft_to_right, right_to_left, top_to_bottom or bottom_to_topleft_to_right
app:cpb_progressbar_widthdimension7dp
app:cpb_background_progressbar_colorcolorGRAY
app:cpb_background_progressbar_color_startcolorGRAY
app:cpb_background_progressbar_color_endcolorGRAY
app:cpb_background_progressbar_color_directionleft_to_right, right_to_left, top_to_bottom or bottom_to_topleft_to_right
app:cpb_background_progressbar_widthdimension3dp
app:cpb_round_borderbooleanfalse
app:cpb_start_anglefloat0f (=top)
app:cpb_progress_directionto_right or to_leftto_right

KOTLIN

val circularProgressBar = findViewById<CircularProgressBar>(R.id.yourCircularProgressbar)
circularProgressBar.apply {
    // Set Progress
    progress = 65f
    // or with animation
    setProgressWithAnimation(65f, 1000) // =1s

    // Set Progress Max
    progressMax = 200f

    // Set ProgressBar Color
    progressBarColor = Color.BLACK
    // or with gradient
    progressBarColorStart = Color.GRAY
    progressBarColorEnd = Color.RED
    progressBarColorDirection = CircularProgressBar.GradientDirection.TOP_TO_BOTTOM

    // Set background ProgressBar Color
    backgroundProgressBarColor = Color.GRAY
    // or with gradient
    backgroundProgressBarColorStart = Color.WHITE
    backgroundProgressBarColorEnd = Color.RED
    backgroundProgressBarColorDirection = CircularProgressBar.GradientDirection.TOP_TO_BOTTOM

    // Set Width
    progressBarWidth = 7f // in DP
    backgroundProgressBarWidth = 3f // in DP

    // Other
    roundBorder = true
    startAngle = 180f
    progressDirection = CircularProgressBar.ProgressDirection.TO_RIGHT
}

Listener (in Kotlin)

circularProgressBar.onProgressChangeListener = { progress ->
    // Do something
}

circularProgressBar.onIndeterminateModeChangeListener = { isEnable ->
    // Do something
}

JAVA

CircularProgressBar circularProgressBar = findViewById(R.id.yourCircularProgressbar);
// Set Progress
circularProgressBar.setProgress(65f);
// or with animation
circularProgressBar.setProgressWithAnimation(65f, 1000); // =1s

// Set Progress Max
circularProgressBar.setProgressMax(200f);

// Set ProgressBar Color
circularProgressBar.setProgressBarColor(Color.BLACK);
// or with gradient
circularProgressBar.setProgressBarColorStart(Color.GRAY);
circularProgressBar.setProgressBarColorEnd(Color.RED);
circularProgressBar.setProgressBarColorDirection(CircularProgressBar.GradientDirection.TOP_TO_BOTTOM);

// Set background ProgressBar Color
circularProgressBar.setBackgroundProgressBarColor(Color.GRAY);
// or with gradient
circularProgressBar.setBackgroundProgressBarColorStart(Color.WHITE);
circularProgressBar.setBackgroundProgressBarColorEnd(Color.RED);
circularProgressBar.setBackgroundProgressBarColorDirection(CircularProgressBar.GradientDirection.TOP_TO_BOTTOM);

// Set Width
circularProgressBar.setProgressBarWidth(7f); // in DP
circularProgressBar.setBackgroundProgressBarWidth(3f); // in DP

// Other
circularProgressBar.setRoundBorder(true);
circularProgressBar.setStartAngle(180f);
circularProgressBar.setProgressDirection(CircularProgressBar.ProgressDirection.TO_RIGHT);

Listener (in Java)

circularProgressBar.setOnIndeterminateModeChangeListener(isEnable -> {
    // Do something
    return Unit.INSTANCE;
});

 circularProgressBar.setOnProgressChangeListener(progress -> {
    // Do something
    return Unit.INSTANCE;
});

SUPPORT ❤️

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

LICENCE

CircularProgressBar by Lopez Mikhael is licensed under a Apache License 2.0. Based on a work at Pedramrn/CircularProgressBar.