Skip to content

kishannareshpal/CircularProgressView

Repository files navigation

description
An easy to use, and highly customisable progress view, that is circular for Android!

Circular Progress View

🙈 Gif-shots

​🌶 Want to use it in your project? Here's how to install:

API Download

Add the library to the dependencies { ... } section of your app level build.gradle file:

// Check the badge above to replace the version :)
implementation 'com.kishannareshpal:circularprogressview:<version>'

🐌 Now, let's get started

🤡 Custom xml attributes for you!!

Add the view to your xml layout file.

<com.kishannareshpal.circularprogressview.CircularProgressView
        xmlns:cpv="http://schemas.android.com/apk/res-auto"
        android:id="@+id/progress"
        android:layout_width="48dp"
        android:layout_height="48dp"
        cpv:progressType="determinate"
        cpv:progressStrokeColor="@color/blue" />

XML Attributes Description Data Type Possible Values Default Value Is Required?
progressType

Determinate indicators display how long a process will take. They should be used when the process completion rate can be detected.

Indeterminate indicators express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.

enum
  • determinate
  • indeterminate
indeterminate NO
progressStrokeColor the color of the progress stroke indicator color n/a #000000
(black)
NO
backgroundColor the color between the stroke indicator color n/a #FF000000
(transparent)
NO
borderColor a light color used to highlight the stroke indicator path color n/a #FF000000
(transparent)
NO
determinateProgressValue sets the current progress value based on the provided maxDeterminateProgressValue* float n/a n/a NO
determinateProgressValuePercentage sets the current progress value by percentage based on the provided maxDeterminateProgressValue* float n/a n/a NO
maxDeterminateProgressValue* the maximum value of the progress indicator. Corresponds to 100%. float n/a n/a YES*
progressStrokePlacement sets where the stroke indicator should be placed. enum
  • outside
  • inside
  • center
inside NO
\* It is required when you set either `determinateProgressValue` or `determinateProgressValuePercentage`.

🥢 Methods:

Return type Method & Description
boolean

isIndeterminate()

Returns whether the progress type is ProgressType.INDETERMINATE

void

setBackgroundColor(int colorInt)

Changes the current backgroundColor to the specified one.

void

setBorderColor(int colorInt)

Changes the current borderColor to the specified one.

void

setProgressStrokeColor(int colorInt)

Change the stroke color of the progress.

void

setStrokePlacement(StrokePlacement strokePlacement)

Change the stroke position to be either StrokePlacement.OUTSIDE, StrokePlacement.INSIDE or StrokePlacement.CENTER.

void

setProgressType(ProgressType progressType)

Change the progress type to be either ProgressType.DETERMINATE, ProgressType.INDETERMINATE.

void

pauseIndeterminateAnimation(boolean hideStroke)

Pauses the indeterminate stroke animation to the current position. If hideStroke is true it will hide the stroke automatically when paused.

resumeIndeterminateAnimation()

Resumes the paused indeterminate stroke animation.

toggleIndeterminateAnimation()

Toggles the indeterminate animation.

void

pauseIndeterminateAnimation()

Resumes the paused indeterminate stroke animation.

void

setRange(int maximumProgressValue)

Sets the maximum allowed progress value. Should be > 0

void

setProgress(float progressPercentage, boolean animated)

Sets the current progress value by the percentage. If animated is true it will animate the progress change.

setProgress(float progressPercentage)

Sets the current progress value by the percentage, without animating the change.

💡 Use this static method(float) calcProgressValuePercentageOf(int value, int maxValue)to get the progressPercentage.

### 🏃🏾‍♂️ Lets see it in action
CircularProgressView cpv = findViewById(R.id.cpv);
// You can color the background, the stroke or the border.
// Multiple colors for gradient.
int[] gradientColors = new int[] {
    Color.parseColor("#ff9100"), // orange
    Color.parseColor("#ff1744") // red
};

cpv.setBackgroundColor(Color.parseColor("#ffcdd2")); // light red
cpv.setBorderColor(Color.parseColor("#ffebee")); // lighter red
cpv.setProgressStrokeColor(gradientColors); // a gradient of red and orange

// Or pass just a single color for a solid progressStrokeColor.
/* cpv.setProgressStrokeColor(Color.parseColor("#ff1744")); */

// Choose where the progressStroke should be positioned:
cpv.setStrokePlacement(StrokePlacement.OUTSIDE);
/* cpv.setStrokePlacement(StrokePlacement.CENTER); */
/* cpv.setStrokePlacement(StrokePlacement.INSIDE); */

// Lets suppose you are downloading a file, and you want to show a progress:
cpv.setProgressType(ProgressType.DETERMINATE)

int totalBytes = 349022; // the maximum value of the progress
cpv.setRange(totalBytes);

// Update the progress using:
cpv.setProgress(10.0f, true) // 10% of the maximum value of the progress.

// Or if you want to update the progress using a value out of total.
int downloadedBytes = 1230; // downloaded 1230 bytes out of the total of 349022;
int p = CircularProgressView.calcProgressValuePercentageOf(downloadedBytes, totalBytes)
cpv.setProgress(p, true);

About

An Android view library for an easy to use and customizable circular progress indicator.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages