Cómo hacer Circle Custom Progress Bar en Android

Quiero una barra de progreso personalizada en forma de círculo, al igual que la aplicación de descarga Blazer en Google Play Shop.Espero que aparezca la siguiente captura de pantalla:

enter image description here

alguien me ayude a hacer eso?

Las mejores dos bibliotecas que encontré en la red están en github:

Espero que te ayude

Me he encontrado con el mismo problema y no encontré ninguna solución adecuada para mi caso, así que decidí ir por otro camino. Creé una clase dibujable personalizada. Dentro de esta clase, he creado 2 pinturas para línea de progreso y línea de fondo (con un trazo más grande). En primer lugar, configure startAngle y sweepAngle en el constructor:

mSweepAngle = 0; mStartAngle = 270; 

Aquí está el método onDraw de esta clase:

 @Override public void draw(Canvas canvas) { // draw background line canvas.drawArc(mRectF, 0, 360, false, mPaintBackground); // draw progress line canvas.drawArc(mRectF, mStartAngle, mSweepAngle, false, mPaintProgress); } 

Así que ahora todo lo que necesita hacer es configurar este dibujable como un fondo de la vista, en el cambio de hilo de fondo sweepAngle:

 mSweepAngle += 360 / totalTimerTime // this is mStep 

y llame directamente a InvalidateSelf () con algún intervalo (por ejemplo, cada 1 segundo o más si desea cambios de progreso sin problemas) en la vista que tiene este dibujable como fondo. ¡Eso es!

PD Lo sé, lo sé … por supuesto que quieres un poco más de código. Entonces aquí está todo flujo:

  1. Crear vista XML:

       
  2. Cree y configure la clase Custom Drawable (como describí anteriormente). No te olvides de configurar las pinturas para las líneas. Aquí pintar para línea de progreso:

     mPaintProgress = new Paint(); mPaintProgress.setAntiAlias(true); mPaintProgress.setStyle(Paint.Style.STROKE); mPaintProgress.setStrokeWidth(widthProgress); mPaintProgress.setStrokeCap(Paint.Cap.ROUND); mPaintProgress.setColor(colorThatYouWant); 

Lo mismo para la pintura de fondo (ajuste el ancho un poco más si lo desea)

  1. En clase dibujable, crea un método para actualizar (cálculo del paso descrito anteriormente)

     public void update() { mSweepAngle += mStep; invalidateSelf(); } 
  2. Establezca esta clase dibujable en YourTimerView (lo hice en tiempo de ejecución) – vea con @ + id / timer desde xml arriba:

    OurSuperDrawableClass superDrawable = new OurSuperDrawableClass(); YourTimerView.setBackgroundDrawable(superDrawable);

  3. Crear un hilo de fondo con vista ejecutable y de actualización:

     YourTimerView.post(new Runnable() { @Override public void run() { // update progress view superDrawable.update(); } }); 

Eso es ! Disfruta de tu genial barra de progreso. Aquí captura de pantalla del resultado si estás demasiado aburrido de esta cantidad de texto. enter image description here

Círculo Android Custom Progress Bar

para obtener más información sobre Cómo crear Circle Custom Progress Bar, vea este enlace

Paso 01 Debe crear un archivo xml en un archivo dibujable para configurar la apariencia de la barra de progreso. Así que estoy creando mi archivo xml como circular_progress_bar.xml.

 < ?xml version="1.0" encoding="UTF-8"?>               

Paso 02 Luego crea la barra de progreso en tu archivo xml Luego da el nombre del archivo xml en tu carpeta dibujable como la parth de android: progressDrawable

   

Paso 03 Visualiza la barra de progreso usando hilo

 package com.example.progress; import android.os.Bundle; import android.os.Handler; import android.app.Activity; import android.view.Menu; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ProgressBar; import android.widget.TextView; public class MainActivity extends Activity { private ProgressBar progBar; private TextView text; private Handler mHandler = new Handler(); private int mProgressStatus=0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); progBar= (ProgressBar)findViewById(R.id.progressBar); text = (TextView)findViewById(R.id.textView1); dosomething(); } public void dosomething() { new Thread(new Runnable() { public void run() { final int presentage=0; while (mProgressStatus < 63) { mProgressStatus += 1; // Update the progress bar mHandler.post(new Runnable() { public void run() { progBar.setProgress(mProgressStatus); text.setText(""+mProgressStatus+"%"); } }); try { Thread.sleep(50); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start(); } } 

Una lib muy útil para la barra de progreso personalizada en Android.

En tu archivo de diseño

  

y archivo Java

 CircularProgressBar progressBar = (CircularProgressBar) findViewById(R.id.mycustom_progressbar); progressBar.setTitle("Circular Progress Bar"); 

Pruebe este fragmento de código para crear una barra de progreso circular (gráfico circular). pase su valor entero para dibujar el porcentaje del área de llenado. 🙂

 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.setAntiAlias(true); 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); } 

He resuelto esta genial barra de progreso personalizado creando la vista personalizada. He redefinido el método onDraw () para dibujar círculos, arco lleno y texto en el canvas.

siguiente es la barra de progreso personalizada

 import android.annotation.TargetApi; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.graphics.Rect; import android.graphics.RectF; import android.os.Build; import android.util.AttributeSet; import android.view.View; import com.investorfinder.utils.UiUtils; public class CustomProgressBar extends View { private int max = 100; private int progress; private Path path = new Path(); int color = 0xff44C8E5; private Paint paint; private Paint mPaintProgress; private RectF mRectF; private Paint textPaint; private String text = "0%"; private final Rect textBounds = new Rect(); private int centerY; private int centerX; private int swipeAndgle = 0; public CustomProgressBar(Context context) { super(context); initUI(); } public CustomProgressBar(Context context, AttributeSet attrs) { super(context, attrs); initUI(); } public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initUI(); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); initUI(); } private void initUI() { paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(UiUtils.dpToPx(getContext(), 1)); paint.setStyle(Paint.Style.STROKE); paint.setColor(color); mPaintProgress = new Paint(); mPaintProgress.setAntiAlias(true); mPaintProgress.setStyle(Paint.Style.STROKE); mPaintProgress.setStrokeWidth(UiUtils.dpToPx(getContext(), 9)); mPaintProgress.setColor(color); textPaint = new Paint(); textPaint.setAntiAlias(true); textPaint.setStyle(Paint.Style.FILL); textPaint.setColor(color); textPaint.setStrokeWidth(2); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int viewWidth = MeasureSpec.getSize(widthMeasureSpec); int viewHeight = MeasureSpec.getSize(heightMeasureSpec); int radius = (Math.min(viewWidth, viewHeight) - UiUtils.dpToPx(getContext(), 2)) / 2; path.reset(); centerX = viewWidth / 2; centerY = viewHeight / 2; path.addCircle(centerX, centerY, radius, Path.Direction.CW); int smallCirclRadius = radius - UiUtils.dpToPx(getContext(), 7); path.addCircle(centerX, centerY, smallCirclRadius, Path.Direction.CW); smallCirclRadius += UiUtils.dpToPx(getContext(), 4); mRectF = new RectF(centerX - smallCirclRadius, centerY - smallCirclRadius, centerX + smallCirclRadius, centerY + smallCirclRadius); textPaint.setTextSize(radius * 0.5f); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawPath(path, paint); canvas.drawArc(mRectF, 270, swipeAndgle, false, mPaintProgress); drawTextCentred(canvas); } public void drawTextCentred(Canvas canvas) { textPaint.getTextBounds(text, 0, text.length(), textBounds); canvas.drawText(text, centerX - textBounds.exactCenterX(), centerY - textBounds.exactCenterY(), textPaint); } public void setMax(int max) { this.max = max; } public void setProgress(int progress) { this.progress = progress; int percentage = progress * 100 / max; swipeAndgle = percentage * 360 / 100; text = percentage + "%"; invalidate(); } public void setColor(int color) { this.color = color; } } 

En diseño XML

  

en actividad

 CustomProgressBar progressBar = (CustomProgressBar)findViewById(R.id.progress_bar); progressBar.setMax(9); progressBar.setProgress(5); 

Haría una nueva clase de vista y derivaría de la ProgressBar existente. Luego, anule la función onDraw. Necesitará hacer llamadas directas al canvas para esto, ya que es una combinación personalizada de drawText, drawArc y drawOval, un óvalo para el anillo exterior y las partes vacías, y un arco para el coloreado en partes. Es posible que también deba sobrescribir OnMeasure y onLayout. Luego, en su xml, haga referencia a esta vista por nombre de clase como este cuando quiera usarla.