Custom circular image progress bar with transparent background

Question

I have circular picture of timer:

I want to create circular progress bar which would consist of this picture, which would make it slowly empty like a clock until full disappearance (like an animation).

for example, after half of the time I will define it's appear as:

Right now I'm doing it in this way: I put the timer image as image on the screen, and over it I put regular circle progress bar with color as the background color which hides the image (and so I get the desired effect).

but now I have problem when I have few colors in the background of the app, because I can't to make the progress bar with the same color as the background, so I looking for new way to make it, like custom progress bar that consist from the timer image with transparent background.

please help me how to change my code to get it:

ProgressBar XML:
<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:progress="100"
    android:rotation="90"
    style="?android:progressBarStyleHorizontal"
    android:progressDrawable="@drawable/prog_blue"/>

Prog_blue (the drawable of the progressBar) - blue is the background color of the app:

<?xml version="1.0" encoding="utf-8"?>
<scale
    android:fromDegrees="270"
    android:pivotX="50%"
    android:pivotY="50%"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <shape
        android:shape="ring"
        android:innerRadiusRatio="2.7"
        android:thickness="23dp"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
            android:startColor="@color/prog_blue"
            android:endColor="@color/prog_blue"
            android:type="sweep"
            android:useLevel="false"/>
    </shape>
</scale>

Answer 1

you can create custom View To achieve that

here My Code :

ClockProgressBar.java

 import android.animation.ValueAnimator;
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Path;
 import android.support.annotation.Nullable;
 import android.util.AttributeSet;
 import android.view.View;


 public class ClockProgressBar extends View {
 Paint tickPaint;
 private int shortTickLen=10;
 private int longTickLen=20;
 private int finalWidth=0;
 private int finalHeight=0;
 private int r=0;
 private Path ticksPath;
 int tickNumbers=60;
 private ValueAnimator animator;

 public ClockProgressBar(Context context) {
    super(context);
    ini();
 }

 public ClockProgressBar(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    ini();
 }

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    drawIntervals(canvas);

 }

void drawIntervals(Canvas canvas){


    double cX = getX()+finalWidth/2;
    double cY = getY()+finalHeight/2;
    ticksPath=new Path();
    for ( int i=1; i<= tickNumbers; i++){
        int len = shortTickLen;
        if ( i % 15 == 0 ){
            len = longTickLen;
        }else if ( i % 5 == 0 ){
            len = longTickLen;
        }
        double di = (double)i;
        double angleFrom12 = di/60.0*2.0*Math.PI;
        double angleFrom3 = Math.PI/2.0-angleFrom12;
        ticksPath.moveTo(
                (float)(cX+Math.cos(angleFrom3)*r),
                (float)(cY-Math.sin(angleFrom3)*r)
        );

        ticksPath.lineTo(
                (float)(cX+Math.cos(angleFrom3)*(r-len)),
                (float)(cY-Math.sin(angleFrom3)*(r-len))
        );
    }
    canvas.drawPath(ticksPath,tickPaint);


}

void ini(){
    tickPaint=new Paint();
    tickPaint.setStrokeCap(Paint.Cap.BUTT);
    tickPaint.setStrokeJoin(Paint.Join.ROUND);
    tickPaint.setAntiAlias(true);
    tickPaint.setStyle(Paint.Style.STROKE);
    tickPaint.setStrokeWidth(8);
    tickPaint.setStrokeMiter(2f);
    tickPaint.setColor(Color.BLACK);


}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    finalWidth = getMeasuredWidth() / 2;
    finalHeight = getMeasuredWidth() / 2;
    r = (finalWidth / 2);
    setMeasuredDimension(finalWidth, finalHeight );
}

public void startAnimation(){
     animator = ValueAnimator.ofInt(60, 0);
    animator.setDuration(5000);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        public void onAnimationUpdate(ValueAnimator animation) {
            tickNumbers= (int) animation.getAnimatedValue();
            invalidate();
        }
    });
    animator.setRepeatCount(Integer.MAX_VALUE);
    animator.start();
}
public void stopAnimation(){
    if (animator!=null){
        animator.cancel();
    }
    setVisibility(GONE);

}




  }

and use it in xml

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<<Your Package Name>.ClockProgressBar
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/progress"/>

</LinearLayout>

and call it in you activity and use startAnimation() and stopAnimation() to show and dismiss the View

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ClockProgressBar progressBar=findViewById(R.id.progress);
    progressBar.startAnimation();
}
}

final result:

hope it helps