• Stars
    star
    1,683
  • Rank 26,573 (Top 0.6 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created over 8 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create circular ProgressBar in Android ⭕

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.

Properties Type Default
app:cpb_progress integer 0
app:cpb_progress_max integer 100
app:cpb_indeterminate_mode boolean false
app:cpb_progressbar_color color BLACK
app:cpb_progressbar_color_start color cpb_progressbar_color
app:cpb_progressbar_color_end color cpb_progressbar_color
app:cpb_progressbar_color_direction left_to_right, right_to_left, top_to_bottom or bottom_to_top left_to_right
app:cpb_progressbar_width dimension 7dp
app:cpb_background_progressbar_color color GRAY
app:cpb_background_progressbar_color_start color GRAY
app:cpb_background_progressbar_color_end color GRAY
app:cpb_background_progressbar_color_direction left_to_right, right_to_left, top_to_bottom or bottom_to_top left_to_right
app:cpb_background_progressbar_width dimension 3dp
app:cpb_round_border boolean false
app:cpb_start_angle float 0f (=top)
app:cpb_progress_direction to_right or to_left to_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.

More Repositories

1

CircularImageView

Create circular ImageView in Android in the simplest way possible
Kotlin
1,944
star
2

CircularFillableLoaders

Realize a beautiful circular fillable loaders to be used for splashscreen 🌊
Java
1,220
star
3

BestAndroidGists

Find best Android Gist 🔥
884
star
4

RxAnimation

Simple way to animate your views on Android with Rx 🚀
Kotlin
594
star
5

AndroidWebServer

Android Web Server (NanoHttpd)
Java
434
star
6

CleanRxArchitecture

Clean Rx Kotlin Architecture sample on GitHub Api 🚀
Kotlin
386
star
7

LazyDatePicker

LazyDatePicker an alternative to the native Android Date Picker 📅
Java
372
star
8

RateBottomSheet

To help to promote your android app by prompting users to rate your app in a BottomSheet ⭐️
Kotlin
307
star
9

GradientView

Create gradient view in Android in the simplest way possible 🌈
Kotlin
198
star
10

HFRecyclerView

Add Header and/or Footer in your RecyclerView in the simplest way possible.
Kotlin
171
star
11

CircleView

Create circular view in android (change color, border & shadow) ⚫
Kotlin
166
star
12

Biometric

The easiest way is to use the new version of Biometric under AndroidX 🔒
Kotlin
141
star
13

PokeCardCompose

PokeCard Compose is a demo app 100% write in Compose, Flow and Koin based on MVI Clean Architecture 🐱⚡️
Kotlin
114
star
14

SaveInsta

Example dynamic update of your theme based on a main color
Java
85
star
15

AutoScrollTextView

Sample Android application show how to set auto scroll in text view in android.
Java
51
star
16

FavoriteAndroidLibrary

My Farorite Android Library
49
star
17

MyToast

Custom Toast on Android
Java
39
star
18

DualShot

With DualShot you take two photos with the front and the back camera, and share both of them in a single image.
Java
23
star
19

WebSideMVC

Structure MVC for Web Side in PHP
PHP
1
star