circularprogressview.md

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

Circular Progress View

🙈 _Gif_shots

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

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

{% code title="build.gradle" %}

// Check the badge above to replace the version number :)
implementation 'com.kishannareshpal:circularprogressview:{version.number}'

{% endcode %}

🐌 Now, let's get started

🤡 Custom xml attributes for you!!

Add the view to your xml layout file.

{% code title="activity_main.xml" %}

<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" />

{% endcode %}

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`.

🥢 Here is a list of all available 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

{% code title="MainActivity.java" %}

CircularProgressView cpv = findViewById(R.id.cpv);

{% endcode %}

// You can color the background, the stroke and 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")); */

// For choosing where the progressStroke is placed with:
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 the total.
int downloadedBytes = 1230; // downloaded 1230 bytes out of the total of 349022;
int p = CircularProgressView.calcProgressValuePercentageOf(downloadedBytes, totalBytes)
cpv.setProgress(p, true);