How to create circular progress bar(pie chart) like indicator - Android

前端 未结 5 2001
北恋
北恋 2020-12-08 08:05

Now I have a horizontal progress bar which is updated programmatically via ProgressBar setProgress method:



        
相关标签:
5条回答
  • 2020-12-08 08:43

    Try this piece of code to create circular progress bar(pie chart). pass it integer value to draw how many percent of filling area. :)

    private void circularImageBar(ImageView iv2, int i) {
    
        Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(b); 
        Paint paint = new Paint();
    
            paint.setColor(Color.parseColor("#c4c4c4"));
            paint.setStrokeWidth(10);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawCircle(150, 150, 140, paint);
            paint.setColor(Color.parseColor("#FFDB4C"));
            paint.setStrokeWidth(10);   
            paint.setStyle(Paint.Style.FILL);
            final RectF oval = new RectF();
            paint.setStyle(Paint.Style.STROKE);
            oval.set(10,10,290,290);
            canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
            paint.setStrokeWidth(0);    
            paint.setTextAlign(Align.CENTER);
            paint.setColor(Color.parseColor("#8E8E93")); 
            paint.setTextSize(140);
            canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); 
            iv2.setImageBitmap(b);
    }
    
    0 讨论(0)
  • 2020-12-08 08:44

    Save yourself some time and before re-inventing the wheel (or the progress indicator), check if the one at http://github.com/Sage42/AndroidViewUtils works for you. Just add it to your project and have fun. It is customizable and offers options for Counting Up or Counting Down as well.

    I forgot to add that the visuals looks almost exactly like the sample image from your question.

    0 讨论(0)
  • 2020-12-08 08:49

    For a circular progress bar, use:

    style="?android:attr/progressBarStyle"
    

    More details can be found here: What's the meaning of android:progressBarStyle attribute in ProgressBar?

    As for setting its progress: the circular progress bar will keep spinning. Simply hide it after it's no longer needed.

    Or you could implement something custom: show a TextView next to it and update it instead of using Progressbar.setProgress.

    Step 0: setText("0%");
    Step 1 (2 seconds later): setText("3%");
    Step 2 (4 seconds later): setText("9%"); etc.
    
    0 讨论(0)
  • 2020-12-08 09:01

    Even though it's an old question, I hope this answer can help future viewers.

    Check out this library - https://github.com/lzyzsd/CircleProgress

    For a simple circular progress, dynamic or static, this lib is pretty straightforward and has many attributes for easy customizability (like stroke width, start angle, inside background, text color, etc). For the UI which the OP wanted to achieve, this library would be perfect.

    0 讨论(0)
  • 2020-12-08 09:08

    You can either make a custom view (e.g. PieProgressView) or a custom Drawable (e.g. PieProgressDrawable). I took the custom view approach but either is perfectly viable.

    A quick look at the source for Android's ProgressView yields a wildly complex implementation. Obviously, they are covering all their bases, but you don't have to write something that complex. We really only need two things:

    1. A member to keep track of the current progress.
    2. A method to draw the pie based on the current progress.

    Number one is easy, just keep a member field that tracks the current percentage of the pie to draw. Number 2 is a bit more complicated but, luckily, we can do it with the standard Canvas draw methods.

    Conveniently, Android's Canvas class provides a drawArc() method. You can use this to get your Pie effect. Assuming we stored our percentage in a member field called mPercent as a float between 0 and 1, an onDraw() method might look like this:

    @Override
    protected void onDraw(Canvas canvas) {
    
        final float startAngle = 0f;
        final float drawTo = startAngle + (mPercent * 360);
    
        // Rotate the canvas around the center of the pie by 90 degrees
        // counter clockwise so the pie stars at 12 o'clock.
        canvas.rotate(-90f, mArea.centerX(), mArea.centerY());
        canvas.drawArc(mArea, startAngle, drawTo, true, mPaint);
    
        // Draw inner oval and text on top of the pie (or add any other
        // decorations such as a stroke) here..
        // Don't forget to rotate the canvas back if you plan to add text!
        ...
    }
    

    Here's what the completed view looks like in a sample app:

    PieProgressView in action!

    Edit

    Since posting, I've decided there's really no reason you need to implement a custom view. You can simply use a drawable and it's level property to do exactly what is needed. I made a gist with the full drawable.

    0 讨论(0)
提交回复
热议问题