{"id":36987,"date":"2024-11-01T09:53:52","date_gmt":"2024-11-01T09:53:52","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=36987"},"modified":"2024-11-01T11:42:42","modified_gmt":"2024-11-01T11:42:42","slug":"kotlin-android-app-development-course-creating-the-stopwatch-feature-of-a-clock-app","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/36987\/","title":{"rendered":"kotlin android app development course, creating the stopwatch feature of a clock app"},"content":{"rendered":"

<\/p>\n

Implementing a stopwatch feature while creating a clock app in Android development is a very useful exercise. In this article, we will detail how to create a stopwatch feature using Kotlin. We will set up the overall app structure, design the UI of the stopwatch, and implement its basic functionality.<\/p>\n

1. Project Setup<\/h2>\n

Open Android Studio and create a new project. Set the project name to “StopwatchApp” and choose Kotlin as the language. Set the Minimum SDK to API 21 (Lollipop) or higher.<\/p>\n

1.1. Adding Gradle Dependencies<\/h3>\n

No special libraries are needed to implement the UI elements of the stopwatch, but we will use ViewModel<\/code> and LiveData<\/code> to manage the UI state. Therefore, add the following dependencies to the build.gradle<\/code> file.<\/p>\n

implementation \"androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0\"\nimplementation \"androidx.lifecycle:lifecycle-livedata-ktx:2.4.0\"<\/code><\/pre>\n
2. UI Design<\/h2>\n
The UI of the stopwatch consists mainly of TextView<\/code> and Button<\/code>. Open the activity_main.xml<\/code> file and design the UI as follows.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:orientation=\"vertical\"\n    android:gravity=\"center\">\n\n    <TextView\n        android:id=\"@+id\/tvStopwatch\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:textSize=\"48sp\"\n        android:text=\"00:00:00\"\n        android:layout_marginBottom=\"20dp\"\/>\n\n    <Button\n        android:id=\"@+id\/btnStart\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Start\"\/>\n\n    <Button\n        android:id=\"@+id\/btnStop\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Stop\"\/>\n\n    <Button\n        android:id=\"@+id\/btnReset\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Reset\"\/>\n\n<\/LinearLayout><\/code><\/pre>\n
3. Implementing Logic<\/h2>\n
Open the MainActivity.kt file and implement the logic of the stopwatch. We will utilize CountDownTimer<\/code> to count the time of the stopwatch.<\/p>\n
3.1. Creating ViewModel<\/h3>\n
Create a ViewModel class to manage the state of the stopwatch. This will allow us to store UI-related data.<\/p>\n
class StopwatchViewModel : ViewModel() {\n    private var timer: CountDownTimer? = null\n    private var time = 0L\n    private val _formattedTime = MutableLiveData()\n\n    val formattedTime: LiveData get() = _formattedTime\n\n    private fun updateTime() {\n        val hours = (time \/ 3600000) % 24\n        val minutes = (time \/ 60000) % 60\n        val seconds = (time \/ 1000) % 60\n        _formattedTime.value = String.format(\"%02d:%02d:%02d\", hours, minutes, seconds)\n    }\n\n    fun start() {\n        timer = object : CountDownTimer(Long.MAX_VALUE, 1000) {\n            override fun onTick(millisUntilFinished: Long) {\n                time += 1000\n                updateTime()\n            }\n\n            override fun onFinish() {}\n        }.start()\n    }\n\n    fun stop() {\n        timer?.cancel()\n    }\n\n    fun reset() {\n        stop()\n        time = 0\n        updateTime()\n    }\n}<\/code><\/pre>\n
3.2. Implementing MainActivity<\/h3>\n
Now, in the MainActivity.kt file, we will handle button click events using the ViewModel.<\/p>\n
class MainActivity : AppCompatActivity() {\n    private lateinit var viewModel: StopwatchViewModel\n    private lateinit var tvStopwatch: TextView\n    private lateinit var btnStart: Button\n    private lateinit var btnStop: Button\n    private lateinit var btnReset: Button\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_main)\n\n        viewModel = ViewModelProvider(this).get(StopwatchViewModel::class.java)\n        tvStopwatch = findViewById(R.id.tvStopwatch)\n        btnStart = findViewById(R.id.btnStart)\n        btnStop = findViewById(R.id.btnStop)\n        btnReset = findViewById(R.id.btnReset)\n\n        viewModel.formattedTime.observe(this, { time ->\n            tvStopwatch.text = time\n        })\n\n        btnStart.setOnClickListener {\n            viewModel.start()\n        }\n\n        btnStop.setOnClickListener {\n            viewModel.stop()\n        }\n\n        btnReset.setOnClickListener {\n            viewModel.reset()\n        }\n    }\n}<\/code><\/pre>\n
4. Running and Testing the App<\/h2>\n
Now let’s run the app and test the stopwatch feature. Pressing the start button will start the stopwatch, the stop button will halt the time, and the reset button will reset the time.<\/p>\n
5. Improvements<\/h2>\n
While the basic stopwatch functionality is implemented, the following additional features can be improved and implemented:<\/p>\n