-5

I need to make a custom progress bar that looks like this: enter image description here

I'd love some advice for the best way to do this. thanks!

Orit Malki
  • 58
  • 6
  • 3
    Please show us what you have tried so far – Gennadii Saprykin Jul 03 '18 at 08:10
  • https://stackoverflow.com/questions/21333866/how-to-create-a-circular-progressbar-in-android-which-rotates-on-it – Gowthaman M Jul 03 '18 at 08:16
  • 2
    *the best way to do this* is probably by typing code. – 2Dee Jul 03 '18 at 08:22
  • 1
    what is it with everyone spreading hate? it's a fellow coder asking a question.. stop being so mean and try to help.. isn't it why this site exist? – JozeRi Jul 03 '18 at 08:32
  • @JozeRi a *fellow coder* needs to code to be a coder. There is no code in this question. And no, *this* is **not** why the site exists, this ain't no free coding service. More about this in ... you guesses it, the same (very) old page everyone seems to think is not for them: [the help section](https://stackoverflow.com/help/on-topic). Enjoy the read, it's a good one. – 2Dee Jul 03 '18 at 08:44

2 Answers2

2

https://github.com/lzyzsd/CircleProgress

There are already many libraries providing these type of progressbar. Check above one.

   allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

app level gradle.

dependencies {
    compile 'com.github.lzyzsd:circleprogress:1.2.1'
}

In your layout

 <com.github.lzyzsd.circleprogress.DonutProgress
        android:layout_marginLeft="50dp"
        android:id="@+id/donut_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:donut_progress="30"/>

See https://github.com/lzyzsd/CircleProgress for all available customizations.

Khemraj Sharma
  • 57,232
  • 27
  • 203
  • 212
1
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int x = canvas.getWidth();
    int y = canvas.getHeight();

    float left      = x/2 ;
    float top       = y/2 ;
    float right     = x/2 ;
    float bottom    = y/2 ;

    mRectF.left     = left;
    mRectF.top      = top;
    mRectF.right    = right;
    mRectF.bottom   = bottom;

    mPaint.setStrokeWidth(strokeWidth);
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(Color.WHITE);



    mPaint.setShader(null);
    canvas.drawCircle(x/2,y/2, strokeWidth* 1.5f,mPaint);
    mPaint.setStyle(Paint.Style.STROKE);


    mPaint.setShader(createGradient());
    canvas.drawArc(mRectF,0,360,false, mPaint);


    Shader mGradient = createGradient();
    mMatrix.setRotate(-90f, x / 2 , y / 2 );
    mGradient.setLocalMatrix(mMatrix);
    mPaint.setShader(mGradient);
    canvas.drawArc(mRectF,ANGLE_START,currentAngle,false, mPaint);

}
timmyB
  • 39
  • 5