Giter VIP home page Giter VIP logo

circularseekbar's Introduction

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:

circularseekbar's People

Contributors

jonathan-livly avatar mictab avatar tankery avatar tejada avatar ttpho avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

circularseekbar's Issues

Render issue at 360°/max on Andorid 8.0 / O

steps:

  • compile sample app (in this repo)
  • install on android 8 (have tried emulator and nexus6p)
  • drag the pointer on either the 2nd or 3rd examples ('circular, negative enabled' and 'square, negative enabled') 360°

result:
the blue progress highlight follows the pointer while it is dragged 0-359 but disappears when 360 is reached.

note:
works ok on older android (eg 7.0/nougat or 4.4/kitkat etc)

Error groovy.lang.MissingPropertyException

I'm getting this error any one has the fix?
Caused by: groovy.lang.MissingPropertyException: Could not get unknown property 'ossrhUsername' for Credentials [username: null] of type org.gradle.internal.credentials.DefaultPasswordCredentials_Decorated.

Using circle style 'butt' start and end progress are difficult to reach

I am having issue with sliding the seekbar to progress 0 or progress 100 (the ends of the seekbar). When I get close to the ends, around 3-5 or 95-97, the seekbar stops tracking my finger and just stops. I can get to 0 or 100 progress, but I have to carefully take a few attempts to slide it into place.

Any ideas what is causing this?

Here is my xml:

<me.tankery.lib.circularseekbar.CircularSeekBar android:id="@+id/wellnessQViewQSeekBar" android:layout_width="match_parent" android:layout_height="match_parent" app:cs_circle_color="@color/white" app:cs_circle_progress_color="#02CFD5" app:cs_circle_stroke_width="40dp" app:cs_circle_style="butt" app:cs_end_angle="40" app:cs_lock_enabled="false" app:cs_max="100" app:cs_move_outside_circle="true" app:cs_start_angle="90" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

how to move pointer outside the circle

I have a requirement like adding image drawable to the pointer and that drawable is outside the circle. I need to move the drawable to change progress. I did changes to add drawable instead of pointer circle, but how to move this drawable outside the circle. I tried like this

canvas.drawBitmap(bitmap,
mPointerPositionXY[0] , mPointerPositionXY[1] ,
mPaint);

This is showing the bitmap but i need to set this drawable outside the circle.

From the code, i just got the radius till the circle border.

Please help me.
Thanks in advance

Endless Seekbar

Is there any way to make the seekbar endless? Without a start or beginning, just the degree of turn and the direction per second?

Progress 0 looks like it has progress

When setting the progress to 0, it looks like the progress is 1 or a very small number. Any way to make it not visible at all?

Besides changing the color of the progress to gray and back to blue when I need it.

Screenshot 2019-05-09 at 16 52 26

How to adjust the thickness of lines?

F23F2189-19AD-4496-AFD5-C8FFFA0DC526
i made adjustments cs_pointer_color、cs_pointer_halo_color、cs_pointer_halo_color_ontouch,discover the horizontal line at the endpoint of the drawn line. I would like to make the line bold and display it more clearly. Is there any property that can be modified

Problem when set app:cs_max and app:cs_progress

I am using your library to make a music player app. And i got trouble when use app:cs_max and app:cs_progress while using data binding
Cannot find a setter for \u003cme.tankery.lib.circularseekbar.CircularSeekBar app:cs_max\u003e that accepts parameter type \u0027java.lang.Integer\u0027\n\nIf a binding adapter provides the setter, check that the adapter is annotated correctly and that the parameter type matches.
How can I solve this problem?
Thanks!

User interaction when CircularSeekBar is created in a Fragment

Your code does not support user interaction when the CSB is in a Fragment. Once the Fragment gets recreated by the system, the user loses control of the MotionEvent and the progress stops. Maybe consider to put the MotionEvent, mUserIsMovingPointer, mPointerPosition, mStartAngle in the Bundle in onSaveInstanceState() and then restore it if needed in onRestoreInstanceState(Parcelable state)

Seek bar jumping backwards near end

Hello,

Great library! Just one issue, I noticed that sometimes near the end the seek bar is jumping backwards, I'm using it with MediaPlayer, here is my code:

fun setupSeekBar(audioSeekBar: CircularSeekBar) {
    audioSeekBar.setOnSeekBarChangeListener(object : CircularSeekBar.OnCircularSeekBarChangeListener {

        override fun onProgressChanged(seekBar: CircularSeekBar, progress: Float, b: Boolean) {
            logger.logError("progress: $progress max: ${seekBar.max}")
        }

        override fun onStartTrackingTouch(seekBar: CircularSeekBar) {
            model.getMediaPlayer().seekTo(seekBar.progress.toInt())
        }

        override fun onStopTrackingTouch(seekBar: CircularSeekBar) {}
    })
}


fun setupAudioProgressBar(progressBar: CircularSeekBar, handler: Handler) {
    progressBar.let {
        it.max = model.getMediaPlayer().duration.toFloat()
        val interval: Long = 100
        val statusChecker = object : Runnable {
            override fun run() {
                it.progress = model.getMediaPlayer().currentPosition.toFloat()
                handler.postDelayed(this, interval)
            }
        }

        statusChecker.run()
    }
}

and here are logs of progress and max:
(in the beginning progress is always increasing)
progress: 5112.0 max: 5400.0
progress: 5256.0 max: 5400.0
progress: 5328.0 max: 5400.0
progress: 5256.0 max: 5400.0

How can i increase pointer radius to show progress over the pointer?

Hi,
i just learning the custom views by doing changes and updates. can you tell me how to increase pointer redius to show the progress in pointer. please! am trying many ways, the text , i put that. but in between the short width and height, the text showing overlape amoung them... can u explain me please :)

Work with ints instead of floats

Is it possible to use this seekbar discretely or with integer values instead of floats. It sounds like its possible from reading the readme file but I cant see or figure out how to

Implement incrementProgressBy for move step by step?

Please add feature incrementProgressBy ()

Example

.setMax(8);
.incrementProgressBy(1);

I solved this feature, using Math.floor() and force change progress value:

if progress is 0.3 up to 1
if progress is 3.4 up to 4
....

    seekBar.setOnSeekBarChangeListener(new CircularSeekBar.OnCircularSeekBarChangeListener() {
        @Override
        public void onProgressChanged(CircularSeekBar circularSeekBar, float progress, boolean fromUser) {
            String message = String.format("Progress changed to %.2f, fromUser %s", progress, fromUser);
            Log.d("Main", message);
            if (progress>0) circularSeekBar.setProgress( (float) Math.floor(progress));
        }
}

Sometimes progress value is jumped from 0 to 100.

The current thumb is at value of 0. When changing the seek bar speedy, the value jumps to 100. I suspect the following code block.

else if (lockAtEnd && lockEnabled) {
mProgress = mMax; // Suspected here.
recalculateAll();
invalidate();
if (mOnCircularSeekBarChangeListener != null) {
mOnCircularSeekBarChangeListener.onProgressChanged(this, mProgress, true);
}
}

bar scale

Do you think it's possible to have sort of scale attached to the bar ?
just to indicate the actual progress being selected

Circular progressbar crashed

I am notable to get progress value.
In override fun onProgressChanged(
circularSeekBar: CircularSeekBar?,
progress: Float,
fromUser: Boolean
) {

        }

I am trying to show toast but app getting crashed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.