Como criar um Cronômetro em Kotlin
Android Kotlin

Como criar um Cronômetro em Kotlin





Nesse tutorial vou descrever Como criar um Cronômetro em Kotlin para que você entenda assim um pouco de CounterDownTime e ProgressBar,

Primeiramente vamos criar um projeto vazio(empty).

Se você ainda não sabe como criar um projeto então veja Como criar um projeto no Android Studio.

Logo depois de ter criado o projeto vamos criar nossa ProgressBar da mesma forma assim como criamos o arquivo Drawable resource file no tutorial sobre Como criar um Background no Android Studio para o nosso arquivo com o nome de pb_timer.xml.

pb_timer

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="30.0"
            android:useLevel="true">
            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">
            <shape
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thicknessRatio="30.0"
                android:useLevel="true">
                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />
                <gradient
                    android:centerColor="#FFF"
                    android:endColor="#FFF"
                    android:startColor="#FFF"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
</layer-list>

Então após fazer o nosso layout da ProgressBar vamos então fazer o layout do nosso projeto alterando o arquivo activity_main.xml e assim fazer as seguintes mudanças.





activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="#333"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Cronômetro"
        android:textColor="#FFF"
        android:textSize="40sp"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent" />
    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:indeterminate="false"
        android:progress="100"
        android:id="@+id/progressBar"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/pb_timer"
        android:secondaryProgress="100"/>
    <TextView
        android:id="@+id/tvTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00:00:00"
        android:textColor="#FFF"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@id/progressBar"
        app:layout_constraintEnd_toEndOf="@id/progressBar"
        app:layout_constraintStart_toStartOf="@id/progressBar"
        app:layout_constraintTop_toTopOf="@id/progressBar" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent">
        <Button
            android:id="@+id/btnStart"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Start"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Logo depois de ter deixado certinho nosso layout do projeto vamos começar a programar.





Vamos usar a função CountDownTimer para fazer a contagem em nosso aplicativo.

Para começar a programar vamos então alterar o arquivo MainActivity para que fique de acordo com o seguinte código.

MainActivity

class MainActivity : AppCompatActivity() {
    val time: Long = 1000000000L
    var timer = Timer(time)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btnStart.setOnClickListener {
            initTimer()
        }
    }
    private fun initTimer(){
        if(btnStart.text == "Start") start()
        else stop()
    }
    private fun start(){
        btnStart.text = "Stop"
        timer.start()
    }
    private fun stop(){
        btnStart.text = "Start"
        timer.cancel()
    }
    inner class Timer(miliis:Long) : CountDownTimer(miliis,1){
        var millisUntilFinished:Long = 0
        override fun onFinish() {
        }
        override fun onTick(millisUntilFinished: Long) {
            this.millisUntilFinished = millisUntilFinished
            val passTime = time - millisUntilFinished
            val f = DecimalFormat("00")
            val hour = passTime / 3600000 % 24
            val min = passTime / 60000 % 60
            val sec = passTime / 1000 % 60
            tvTime.text = f.format(hour) + ":" + f.format(min) + ":" + f.format(sec)
            val tic: Float = 100f/60f * sec
            progressBar.progress = tic.toInt()
        }
    }
}

Agora é só compilar e executar nosso projeto e teremos um cronômetro como o seguinte.

Você também pode clonar o nosso repositório com o seguinte comando.

[[email protected] ~]$ git clone https://github.com/uware-com-br/cronometro

Enfim espero poder ter ajudado com este tutorial sobre Como criar um Cronômetro em Kotlin.





Rodrigo Leutz
Desenvolvedor Web e Android ( Kotlin e Java )
https://uware.com.br