DOCSEARCHbyAlgolia
Submit Docs

CircularProgressBar

repository·master·Indexed 23 days ago

https://github.com/lopspower/circularprogressbar

An Android library for implementing circular progress bars with support for gradients, animations, and indeterminate modes. It provides programmatic control via Kotlin and Java, as well as XML configuration for styling properties such as stroke width, colors, and progress direction.

Tokens
3.2K
Snippets
8
Records
10
Agent score
33%

What's inside CircularProgressBar

  2. Configure CircularProgressBar in XML

    master

    You can add the CircularProgressBar directly to your layout XML files. Use the app: namespace to customize its appearance and behavior.

    <com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:id:@+id/circularProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cpb_background_progressbar_color="#b6bbd8"
    app:cpb_background_progressbar_width="5dp"
    app:cpb_progress_direction="to_right"
    app:cpb_progressbar_color="#3f51b5"
    app:cpb_progressbar_width="10dp"
    app:cpb_round_border="false" />

  3. Use CircularProgressBar in Kotlin

    master

    Use the CircularProgressBar API in Kotlin to programmatically control progress, colors, gradients, and animations.

    val circularProgressBar = findViewById<CircularProgressBar>(R.id.yourCircularProgressbar)
circularProgressBar.apply {
    // Set Progress
    progress = 65f
    // or with animation
    setProgressWithAnimation(65f, 1000) // =1s

    // Set Progress Max
    progressMax = 200f

    // Set ProgressBar Color
    progressBarColor = Color.BLACK
    // or with gradient
    progressBarColorStart = Color.GRAY
    progressBarColorEnd = Color.RED
    progressBarColorDirection = CircularProgressBar.GradientDirection.TOP_TO_BOTTOM

    // Set background ProgressBar Color
    backgroundProgressBarColor = Color.GRAY
    // or with gradient
    backgroundProgressBarColorStart = Color.WHITE
    backgroundProgressBarColorEnd = Color.RED
    backgroundProgressBarColorDirection = CircularProgressBar.GradientDirection.TOP_TO_BOTTOM

    // Set Width
    progressBarWidth = 7f // in DP
    backgroundProgressBarWidth = 3f // in DP

    // Other
    roundBorder = true
    startAngle = 180f
    progressDirection = CircularProgressBar.ProgressDirection.TO_RIGHT
}

  4. Use CircularProgressBar in Java

    master

    Use the CircularProgressBar API in Java to programmatically control progress, colors, gradients, and animations.

    CircularProgressBar circularProgressBar = findViewById(R.id.yourCircularProgressbar);
// Set Progress
circularProgressBar.setProgress(65f);
// or with animation
circularProgressBar.setProgressWithAnimation(65f, 1000); // =1s

// Set Progress Max
circularProgressBar.setProgressMax(200f);

// Set ProgressBar Color
circularProgressBar.setProgressBarColor(Color.BLACK);
// or with gradient
circularProgressBar.setProgressBarColorStart(Color.GRAY);
circularProgressBar.setProgressBarColorEnd(Color.RED);
circularProgressBar.setProgressBarColorDirection(CircularProgressBar.GradientDirection.TOP_TO_BOTTOM);

// Set background ProgressBar Color
circularProgressBar.setBackgroundProgressBarColor(Color.GRAY);
// or with gradient
circularProgressBar.setBackgroundProgressBarColorStart(Color.WHITE);
circularProgressBar.setBackgroundProgressBarColorEnd(Color.RED);
circularProgressBar.setBackgroundProgressBarColorDirection(CircularProgressBar.GradientDirection.TOP_TO_BOTTOM);

// Set Width
circularProgressBar.setProgressBarWidth(7f); // in DP
circularProgressBar.setBackgroundProgressBarWidth(3f); // in DP

// Other
circularProgressBar.setRoundBorder(true);
circularProgressBar.setStartAngle(180f);
circularProgressBar.setProgressDirection(CircularProgressBar.ProgressDirection.TO_RIGHT);

  5. Handle Progress and Indeterminate Mode changes in Kotlin

    master

    Set listeners in Kotlin to react to progress changes or changes in the indeterminate mode state.

    circularProgressBar.onProgressChangeListener = { progress ->
    // Do something
}

circularProgressBar.onIndeterminateModeChangeListener = { isEnable ->
    // Do something
}

  6. Handle Progress and Indeterminate Mode changes in Java

    master

    Set listeners in Java to react to progress changes or changes in the indeterminate mode state.

    circularProgressBar.setOnIndeterminateModeChangeListener(isEnable -> {
    // Do something
    return Unit.INSTANCE;
});

 circularProgressBar.setOnProgressChangeListener(progress -> {
    // Do something
    return Unit.INSTANCE;
});

  7. Reference XML attributes for CircularProgressBar

    master

    The following attributes are available for customizing the CircularProgressBar in XML layouts:

    | Properties | Type | Default |
| ------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------ |
| `app:cpb_progress` | integer | 0 |
| `app:cpb_progress_max` | integer | 100 |
| `app:cpb_indeterminate_mode` | boolean | false |
| `app:cpb_progressbar_color` | color | BLACK |
| `app:cpb_progressbar_color_start` | color | cpb_progressbar_color |
| `app:cpb_progressbar_color_end` | color | cpb_progressbar_color |
| `app:cpb_progressbar_color_direction` | left_to_right, right_to_left, top_to_bottom or bottom_to_top | left_to_right |
| `app:cpb_progressbar_width` | dimension | 7dp |
| `app:cpb_background_progressbar_color` | color | GRAY |
| `app:cpb_background_progressbar_color_start` | color | GRAY |
| `app:cpb_background_progressbar_color_end` | color | GRAY |
| `app:cpb_background_progressbar_color_direction` | left_to_right, right_to_left, top_to_bottom or bottom_to_top | left_to_right |
| `app:cpb_background_progressbar_width` | dimension | 3dp |
| `app:cpb_round_border` | boolean | false |
| `app:cpb_start_angle` | float | 0f (=top) |
| `app:cpb_progress_direction` | to_right or to_left | to_right |

  8. Configure CircularProgressBar properties

    master

    The CircularProgressBar class provides several properties to customize the appearance and behavior of the progress bar. You can control the progress value, maximum value, stroke widths, colors (including gradients), and more.

    Progress and Limits

    • progress: The current progress value. Setting this triggers onProgressChangeListener.
    • progressMax: The maximum value for the progress. Defaults to 100f.

    Styling

    • progressBarWidth: The width of the foreground progress stroke.
    • backgroundProgressBarWidth: The width of the background stroke.
    • progressBarColor, progressBarColorStart, progressBarColorEnd: Sets the color or gradient for the progress bar.
    • progressBarColorDirection: Determines the direction of the color gradient.
    • backgroundProgressBarColor, backgroundProgressBarColorStart, backgroundProgressBarColorEnd: Sets the color or gradient for the background.
    • backgroundProgressBarColorDirection: Determines the direction of the background gradient.
    • roundBorder: A boolean that, when true, sets the stroke cap to ROUND for a smoother look.
    • startAngle: The starting angle for the progress arc.
    • progressDirection: The direction in which progress is drawn (ProgressDirection.TO_RIGHT or ProgressDirection.TO_LEFT).

    Modes and Listeners

    • indeterminateMode: When true, the progress bar enters an indeterminate state (looping animation).
    • onProgressChangeListener: A callback triggered when the progress value changes.
    • onIndeterminateModeChangeListener: A callback triggered when indeterminateMode changes.

  9. Animate progress with setProgressWithAnimation()

    master

    Use setProgressWithAnimation to smoothly transition the progress bar from its current value to a new value.

    Parameters

    • progress: The target progress value.
    • duration: (Optional) The animation duration in milliseconds.
    • interpolator: (Optional) A TimeInterpolator to control the animation curve.
    • startDelay: (Optional) Delay before the animation starts in milliseconds.

  10. Use ProgressDirection and GradientDirection enums

    master

    The CircularProgressBar uses two enums to define the direction of progress and color gradients.

    ProgressDirection

    Controls the direction of the progress arc:

    • ProgressDirection.TO_RIGHT (Value: 1)
    • ProgressDirection.TO_LEFT (Value: 2)

    GradientDirection

    Controls the direction of the linear gradient applied to the progress or background:

    • GradientDirection.LEFT_TO_RIGHT (Value: 1)
    • GradientDirection.RIGHT_TO_LEFT (Value: 2)
    • GradientDirection.TOP_TO_BOTTOM (Value: 3)
    • GradientDirection.BOTTOM_TO_END (Value: 4)
    enum class ProgressDirection(val value: Int) {
    TO_RIGHT(1),
    TO_LEFT(2)
}

enum class GradientDirection(val value: Int) {
    LEFT_TO_RIGHT(1),
    RIGHT_TO_LEFT(2),
    TOP_TO_BOTTOM(3),
    BOTTOM_TO_END(4)
}