CircularProgressIndicator

Simple but customizable view for displaying progress

<img src="art/1_1.png" width="30%" /> <img src="art/1_2.png" width="30%" /> <img src="art/1_3.png" width="30%" />

With custom colors

<img src="art/colors_1.png" width="30%" /> <img src="art/colors_2.png" width="30%" />

With or without dot

<img src="art/dot_yes.png" width="30%" /> <img src="art/dot_no.png" width="30%" />

With custom progress text (more examples here)

<img src="art/prefix_yes.png" width="30%" /> <img src="art/suffix_yes.png" width="30%" /> <img src="art/prefix_suffix.png" width="30%" />

With clockwise direction

<img src="art/direction-clockwise.png" width="30%" />

With custom start angle (details here)

<img src="art/angle-45.png" width="30%" /> <img src="art/angle-333.png" width="30%" />

With custom progress cap (details here)

<img src="art/cap-round.png" width="30%" /> <img src="art/cap-butt.png" width="30%" />

With different progress foreground and background rings' width

<img src="art/background-width-1.png" width="30%" /> <img src="art/background-width-2.png" width="30%" />

With background filling enabled/disabled

<img src="art/background-filling-1.png" width="30%" /> <img src="art/background-filling-2.png" width="30%" /> <img src="art/background-filling-3.png" width="30%" />

With gradients [linear, sweep and radial] (details here)

<img src="art/gradient_linear.png" width="30%" /> <img src="art/gradient_sweep.png" width="30%" /> <img src="art/gradient_radial.png" width="30%" />

How to use

Add view to your layout:

<antonkozyriatskyi.circularprogressindicator.CircularProgressIndicator
        android:id="@+id/circular_progress"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        app:direction="clockwise"
        app:dotColor="?colorPrimary"
        app:dotWidth="16dp"
        app:drawDot="true"
        app:enableProgressAnimation="true"
        app:formattingPattern="&#37;d"
        app:progressBackgroundColor="?colorAccent"
        app:progressBackgroundStrokeWidth="8dp"
        app:progressCap="round"
        app:progressColor="?colorPrimary"
        app:progressStrokeWidth="16dp"
        app:startAngle="270"
        app:textColor="#fffc59"
        app:textSize="14sp"
        app:fillBackground="false"
        app:gradientType="linear"
        app:gradientEndColor="@color/colorAccent" />

Since all attributes have default values, you can specify none of them. Thus following code also works:

<antonkozyriatskyi.circularprogressindicator.CircularProgressIndicator
    android:id="@+id/circular_progress"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:layout_marginBottom="8dp"
    android:layout_marginTop="8dp" />

Than find it in code and set progress:

CircularProgressIndicator circularProgress = findViewById(R.id.circular_progress);

// you can set max and current progress values individually
circularProgress.setMaxProgress(10000);
circularProgress.setCurrentProgress(5000);
// or all at once
circularProgress.setProgress(5000, 10000);

// you can get progress values using following getters
circularProgress.getProgress() // returns 5000
circularProgress.getMaxProgress() // returns 10000

Attributes

| Description | XML | Java | Default value | | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | | Progress color | app:progressColor | setter: setProgressColor(color)<br/>getter: getProgressColor() | #3f51b5 | | Progress background color | app:progressBackgroundColor | setter: setProgressBackgroundColor(color)<br/>getter: getProgressBackgroundColor() | #e0e0e0 | | Width of progress stroke | app:progressStrokeWidth | setters: setProgressStrokeWidthDp(widthInDp) or setProgressStrokeWidthPx(widthInPx)<br/>getter: getProgressStrokeWidth() (returns width in pixels) | 8dp | | Width of progress background stroke | app:progressBackgroundStrokeWidth | setters: setProgressBackgroundStrokeWidthDp(widthInDp) or setProgressBackgroundStrokeWidthPx(widthInPx)<br/>getter: getProgressBackgroundStrokeWidth() (returns width in pixels) | same as progress width | | Whether to draw dot. true or false | app:drawDot | setter: setShouldDrawDot(shoulDrawDot)<br/>getter: isDotEnabled() | true | | Dot color | app:dotColor | setter: setDotColor(dotColor)<br/>getter: getDotColor() | same as progress color | | Dot width | app:dotWidth | setters: setDotWidthDp(widthInDp) or setDotWidthPx(widthInPx)<br/>getter: getDotWidth() (returns width in pixels) | same as progress stroke width | | Progress text size | app:textSize | setters: setTextSizeSp(sizeInSp) or setTextSizePx(sizeInPx)<br/>getter: getTextSize() (returns size in pixels) | 24sp | | Progress text color | app:textColor | setter: setTextColor(textColor)<br/>getter: getTextColor() | same as progress color | | Formatting pattern to be used in PatternProgressTextAdapter. Checkout Formatting progress text section. | app:formattingPattern | setter: setProgressTextAdapter(progressTextAdapter)<br/>getter: getProgressTextAdapter() | not specified | | Direction of the progress arc (clockwise or counterclockwise) | app:direction | setter: setDirection(direction)<br/>getter: getDirection() | counterclockwise | | Start angle. Checkout Start angle section. | app:startAngle | setter: setStartAngle(startAngle)<br/>getter: getStartAngle() | 270 | | Progress cap | app:progressCap | setter: setProgressStrokeCap(cap)<br/>getter: getProgressStrokeCap() | CAP_ROUND | | Progress animation | app:enableProgressAnimation | setter: setAnimationEnabled(enableAnimation)<br/>getter: isAnimationEnabled()