CircularProgressIndicator

Additional

Language
Java
Version
1.2.0 (Sep 2, 2018)
Created
Apr 8, 2018
Updated
Sep 2, 2018
Owner
Anton (antonKozyriatskyi)
Contributors
repitch
Anton (antonKozyriatskyi)
2
Activity
Badge
Generate
Download
Source code

Announcement

CircularProgressIndicator

Simple but customizable view for displaying progress

With custom colors

With or without dot

With custom progress text (more examples here)

With clockwise direction

With custom start angle (details here)

With custom progress cap (details here)

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:progressColor="@color/colorPrimary"
    app:progressBackgroundColor="#efefefef"
    app:progressStrokeWidth="8dp"
    app:drawDot="true"
    app:dotColor="@color/colorAccent"
    app:dotWidth="16dp"
    app:textSize="24sp"
    app:textColor="@color/colorPrimaryDark" />

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)getter: getProgressColor()

#3f51b5
Progress background color app:progressBackgroundColor setter: setProgressBackgroundColor(color)getter: getProgressBackgroundColor()

#e0e0e0
Width of progress stroke app:progressStrokeWidth setters: setProgressStrokeWidthDp(widthInDp) or setProgressStrokeWidthPx(widthInPx)getter: getProgressStrokeWidth() (returns width in pixels)

8dp
Whether to draw dot. true or false app:drawDot setter: setShouldDrawDot(shoulDrawDot)getter: isDotEnabled()

true
Dot color app:dotColor setter: setDotColor(dotColor)getter: getDotColor()

same as progress color
Dot width app:dotWidth setters: setDotWidthDp(widthInDp) or setDotWidthPx(widthInPx)getter: getDotWidth() (returns width in pixels)

same as progress stroke width
Progress text size app:textSize setters: setTextSizeSp(sizeInSp) or setTextSizePx(sizeInPx)getter: getTextSize() (returns size in pixels)

24sp
Progress text color app:textColor setter: setTextColor(textColor)getter: getTextColor()

same as progress color
Formatting pattern to be used in PatternProgressTextAdapter. Checkout Formatting progress text section. app:formattingPattern setter: setProgressTextAdapter(progressTextAdapter)getter: getProgressTextAdapter()

not specified
Direction of the progress arc (clockwise or counterclockwise) app:direction setter: setDirection(direction)getter: getDirection()

counterclockwise
Start angle. Checkout Start angle section. app:startAngle setter: setStartAngle(startAngle)getter: getStartAngle()

270
Progress cap app:progressCap setter: setProgressStrokeCap(cap)getter: getProgressStrokeCap()

CAP_ROUND
Progress animation app:enableProgressAnimation setter: setAnimationEnabled(enableAnimation)getter: isAnimationEnabled()

true


PatternProgressTextAdapter supports formatting progress using Java's formatting patterns. For example, if you want to display progress with two digits for the fractional part, you can use %.2f pattern and set it via

  • attribute: If you don't want to use string resource - you have to use unicode for percent sign (app:formattingPattern="&#37;.2f"&#37;) instead of sign itself:
    <string name="pattern">%.2f</string>
    app:formattingPattern="@string/pattern" that refers to a string resource


  • or PatternProgressTextAdapter: circularProgress.setProgressTextAdapter(new PatternProgressTextAdapter("%.2f"));

Here is the example of TimeTextAdapter by repitch that displays text in format of 'HH.MM.SS'

private static final CircularProgressIndicator.ProgressTextAdapter TIME_TEXT_ADAPTER = new CircularProgressIndicator.ProgressTextAdapter() {
        @Override
        public String formatText(double time) {
            int hours = (int) (time / 3600);
            time %= 3600;
            int minutes = (int) (time / 60);
            int seconds = (int) (time % 60);
            StringBuilder sb = new StringBuilder();
            if (hours < 10) {
                sb.append(0);
            }
            sb.append(hours).append(":");
            if (minutes < 10) {
                sb.append(0);
            }
            sb.append(minutes).append(":");
            if (seconds < 10) {
                sb.append(0);
            }
            sb.append(seconds);
            return sb.toString();
        }
    };

If you don't want any text to be displayed - just create your own ProgressTextAdapter that returns an empty string.