CountDown Timer with CircularProgressIndicator

Question

I try to add a countdown timer with a circular progress indicator (from material design components) into my app but I have problems with the setting of the initial value of the circular progress indicator.

Here are the relevant parts of my code I have wrote:

countDownTimer = object : CountDownTimer(60000, 1000) {

                    override fun onTick(millisUntilFinished: Long) {
                        binding.apply {
                            countDownTimer.text =  (millisUntilFinished / 1000).toString()
                            progressIndicator.progress = (millisUntilFinished / 1000).toInt()
                        }
                    }
                    override fun onFinish() {
                        // if 60 secs are finished, then we stop the record
                        stopRecording()
                    }
                }

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|center">

            <TextView
                android:id="@+id/count_down_timer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:textSize="20sp"
                android:textStyle="bold"
                android:background="@color/black"
                android:textColor="@color/white"
                tools:text="60"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

            <com.google.android.material.progressindicator.CircularProgressIndicator
                android:id="@+id/progress_indicator"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:indicatorColor="@color/navajowhite"
                app:trackCornerRadius="10dp"
                app:indicatorSize="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/count_down_timer"
                android:layout_margin="10dp"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

I let starting the counter from 60 secs to 0. But I think that the progress value of my circular progress indicator is wrong. Because its initial start looks like this ( I created a sketch to show you the initial state of circular progress indicator when the counter starts) :

As you can see, the circle is not complete. What you can not see is that the "track" of the circular progress indicator decrements from this until 0 is reached. So, somehow the decrementing of the circular progress indicator works. But the starting point is wrong.

What I want is an initial start that should look like this:

What I am doing wrong here ?

Answer 1

Your progress isn't calculated correctly.

progressIndicator.progress = (millisUntilFinished / 1000).toInt()

If millisUntilFinished == 59000, you will end up with a progress of 59. You should be calculating a percentage here instead of this.