tankery / CircularSeekBar

Custom circular SeekBar (Circle, Semi-circle, and Ellipse) for Android
Apache License 2.0
376 stars 60 forks source link
android circularseekbar custom-view ui

CircularSeekBar

Build Status GitHub release Maven Central

Rich feature Circular SeekBar (Circle, Semi-circle, and Ellipse) for Android.

This library is based on CircularSeekBar of Matt Joseph (devadvance). But the original author seems to have stopped maintaining (last commit was in 2016), so I decide to take it up by myself.

I made it build on Android Studio (Gradle), then fix & add more features to the library.

CircularSeekBar Screenshot

The features I add

  1. Support float progress, instead of integer only.
  2. Refactor the name of the attributes, to avoid conflicts.
  3. Disable the seek pointer, make it work like a circular progress bar.
  4. Some other bug fixes for Matt's CircularSeekBar.
  5. Customize the shape of progress end (butt, round, square)
  6. Use a arc to represent the pointer, you can custom the arc angle.
  7. Negative progress support.
  8. Other small features.

Setup

Gradle

dependencies {
    implementation 'me.tankery.lib:circularSeekBar:1.4.2'
}

Source

Copy sources and attrs.xml in module circularSeekBar to your project.

Old style Java fan? Checkout version v1.3.2, which is the latest version that still using Java.

Usage

CircularSeekBar support following attributes:

app:cs_circle_style = "butt|round|square"
app:cs_progress = "integer"
app:cs_max = "integer"
app:cs_negative_enabled = "boolean"
app:cs_move_outside_circle = "boolean"
app:cs_maintain_equal_circle = "boolean"
app:cs_use_custom_radii = "boolean"
app:cs_lock_enabled = "boolean"
app:cs_circle_x_radius = "dimension"
app:cs_circle_y_radius = "dimension"
app:cs_circle_stroke_width = "dimension"
app:cs_disable_pointer = "boolean"
app:cs_pointer_stroke_width = "dimension"
app:cs_pointer_halo_width = "dimension"
app:cs_pointer_halo_border_width = "dimension"
app:cs_circle_fill = "color"
app:cs_circle_color = "color"
app:cs_circle_progress_color = "color"
app:cs_pointer_color = "color"
app:cs_pointer_halo_color = "color"
app:cs_pointer_halo_color_ontouch = "color"
app:cs_pointer_alpha_ontouch = "integer"
app:cs_pointer_angle = "float"
app:cs_start_angle = "float"
app:cs_end_angle = "float"
app:cs_disable_progress_glow = "boolean"
app:cs_hide_progress_when_empty = "boolean"

Apply custom Paint

val dashWidth = 16.0f
val dashGap = dashWidth / 2.0f
circularSeekBar?.applyCustomCirclePaint {
    it.pathEffect = DashPathEffect(floatArrayOf(dashWidth, dashGap), 0.0f)
}

Appreciation

This library is based on CircularSeekBar of Matt Joseph (devadvance). But the original author seems to have stopped maintaining (last commit was in 2016), so I decide to take it up by myself. Thanks to Matt for the work!

Automation

This part provides general solution to any types of libraries: