Search code examples
androidxmlandroid-animationcountdowntimer

Circular Progress Bar ( for a countdown timer )


Ok so I have a countdown timer of 15 seconds that works perfectly fine and I'd like to make a custom circular progress bar for that timer.

I want to create a full circle that gets "slices of the pie (circle)" taken out as the timer goes down until there is no longer a circle.

I'd prefer to make the shapes myself than use pre-made images because I'd like the quality to be good on any phone. How would I go about this? Thanks!


Solution

  • I found this example very good: http://mrigaen.blogspot.it/2013/12/create-circular-progress-bar-in-android.html

    So I created my progress bar in this way

    <ProgressBar
        android:id="@+id/barTimer"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/circular_progress_bar" />
    

    Then I made a function for the countdown where:

    private void startTimer(final int minuti) {
        countDownTimer = new CountDownTimer(60 * minuti * 1000, 500) {
            // 500 means, onTick function will be called at every 500 milliseconds
    
            @Override
            public void onTick(long leftTimeInMilliseconds) {
                long seconds = leftTimeInMilliseconds / 1000;
                int barVal= (barMax) - ((int)(seconds/60*100)+(int)(seconds%60));
                barTimer.setProgress(barVal);
                textTimer.setText(String.format("%02d", seconds/60) + ":" + String.format("%02d", seconds%60));
                // format the textview to show the easily readable format
    
            }
            @Override
            public void onFinish() {
                if(textTimer.getText().equals("00:00")){
                    textTimer.setText("STOP");          
                }
                else{
                    textTimer.setText("2:00");
                }
            }
        }.start();
    
    }
    

    UPDATE

    private void startTimer(final int minuti) {
        countDownTimer = new CountDownTimer(60 * minuti * 1000, 500) {
            // 500 means, onTick function will be called at every 500 milliseconds
    
            @Override
            public void onTick(long leftTimeInMilliseconds) {
                long seconds = leftTimeInMilliseconds / 1000;
                barTimer.setProgress((int)seconds);
                textTimer.setText(String.format("%02d", seconds/60) + ":" + String.format("%02d", seconds%60));
                // format the textview to show the easily readable format
    
            }
            @Override
            public void onFinish() {
                if(textTimer.getText().equals("00:00")){
                    textTimer.setText("STOP"); 
                }
                else{
                    textTimer.setText("2:00");
                    barTimer.setProgress(60*minuti);
                }
            }
        }.start();
    
    }