> For the complete documentation index, see [llms.txt](https://kishannareshpal.gitbook.io/circularprogressview/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kishannareshpal.gitbook.io/circularprogressview/master.md).

# Circular Progress View

## 🙈 Gif-shots

![](/files/-M1qZmjrTA4d9jpu4UOO)

![](/files/-M1qZmKlJeB5TXW6s3Y9)

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

[![API](https://img.shields.io/badge/API-14%2B-brightgreen.svg?style=flat)](https://android-arsenal.com/api?level=14)[ ![Download](https://api.bintray.com/packages/kishannareshpal/maven/circularprogressview/images/download.svg)](https://bintray.com/kishannareshpal/maven/circularprogressview/_latestVersion)

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

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

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

![](/files/-M1qZntrO2gjqQrlOhBV)

| **XML Attributes**                 | **Description**                                                                                                                                                                                                                                                                                                                                                                 | **Data Type** | **Possible Values**                                                                   | **Default Value**                 | **Is Required?** |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------- | --------------------------------- | ---------------- |
| progressType                       | <p><strong>Determinate indicators</strong> display how long a process will take. They should be used when the process completion rate can be detected.</p><p><strong>Indeterminate indicators</strong> 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.</p> | enum          | <ul><li><strong>determinate</strong></li><li><strong>indeterminate</strong></li></ul> | **indeterminate**                 | NO               |
| progressStrokeColor                | the color of the progress stroke indicator                                                                                                                                                                                                                                                                                                                                      | color         | n/a                                                                                   | <p>#000000<br>(black)</p>         | NO               |
| backgroundColor                    | the color between the stroke indicator                                                                                                                                                                                                                                                                                                                                          | color         | n/a                                                                                   | <p>#FF000000<br>(transparent)</p> | NO               |
| borderColor                        | a light color used to highlight the stroke indicator path                                                                                                                                                                                                                                                                                                                       | color         | n/a                                                                                   | <p>#FF000000<br>(transparent)</p> | 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          | <ul><li>outside</li><li>inside</li><li>center</li></ul>                               | inside                            | NO               |

&#x20;\* It is required when you set either `determinateProgressValue` or `determinateProgressValuePercentage`.&#x20;

### 🥢 Methods:

| **Return type** | **Method & Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| boolean         | <p><strong><code>isIndeterminate()</code></strong></p><p>Returns whether the progress type is <strong>ProgressType.INDETERMINATE</strong></p>                                                                                                                                                                                                                                                                                                                                                                                                              |
| void            | <p><strong><code>setBackgroundColor(int colorInt)</code></strong></p><p>Changes the current backgroundColor to the specified one.</p>                                                                                                                                                                                                                                                                                                                                                                                                                      |
| void            | <p><strong><code>setBorderColor(int colorInt)</code></strong></p><p>Changes the current borderColor to the specified one.</p>                                                                                                                                                                                                                                                                                                                                                                                                                              |
| void            | <p><strong><code>setProgressStrokeColor(int colorInt)</code></strong></p><p>Change the stroke color of the progress.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| void            | <p><strong><code>setStrokePlacement(StrokePlacement strokePlacement)</code></strong></p><p>Change the stroke position to be either <strong>StrokePlacement.OUTSIDE,</strong> <strong>StrokePlacement.INSIDE</strong> or <strong>StrokePlacement.CENTER.</strong></p>                                                                                                                                                                                                                                                                                       |
| void            | <p><strong><code>setProgressType(ProgressType progressType)</code></strong></p><p>Change the progress type to be either <strong>ProgressType.DETERMINATE, ProgressType.INDETERMINATE.</strong></p>                                                                                                                                                                                                                                                                                                                                                         |
| void            | <p><strong><code>pauseIndeterminateAnimation(boolean hideStroke)</code></strong></p><p>Pauses the indeterminate stroke animation to the current position. If <strong>hideStroke is true</strong> it will hide the stroke automatically when paused.</p><p><strong><code>resumeIndeterminateAnimation()</code></strong></p><p>Resumes the paused indeterminate stroke animation.</p><p><strong><code>toggleIndeterminateAnimation()</code></strong></p><p>Toggles the indeterminate animation.</p>                                                          |
| void            | <p><strong><code>pauseIndeterminateAnimation()</code></strong></p><p>Resumes the paused indeterminate stroke animation.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                |
| void            | <p><strong><code>setRange(int maximumProgressValue)</code></strong></p><p>Sets the maximum allowed progress value. Should be > 0</p>                                                                                                                                                                                                                                                                                                                                                                                                                       |
| void            | <p><strong><code>setProgress(float progressPercentage, boolean animated)</code></strong></p><p>Sets the current progress value by the percentage. If <strong>animated is true</strong> it will animate the progress change.</p><p><strong><code>setProgress(float progressPercentage)</code></strong></p><p>Sets the current progress value by the percentage, without animating the change.</p><p>💡 Use this static method<strong><code>(float) calcProgressValuePercentageOf(int value, int maxValue)</code></strong>to get the progressPercentage.</p> |

### 🏃🏾‍♂️ Lets see it in action

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

```java
// 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")); */
```

![](/files/-M1qZoWXRF3EcG1HmogO)

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

![](/files/-M1qcN23bi7B7g7ELN5T)

```java
// 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);
```
