Dynamic TimePicker in Kotlin

Android TimePicker is a user interface control for selecting the time in either 12-hour (AM/PM) or 24-hour format. It is used to ensure that users pick a valid time for the day in our application. In android, TimePicker is available in two modes - clock and spinner. In this article, we will be learning to create a TimePicker widget programmatically in Kotlin.

Step by Step Implementation

Step 1: Create a new project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note: Select Kotlin as the programming language.

Step 2: Modify activity_main.xml file

In this file, we use the LinearLayout, which is going to be accessed in the Kotlin file. Also set the attribute of the Layout like id, orientation and gravity etc.

activity_main.xml:

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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">


</LinearLayout>

Step 3: Create TimePicker in MainActivity.kt file

First, we declare two variables textView and timePicker to create the widgets.

val textView = TextView(this)
val timePicker = TimePicker(this)

we define layout parameters and set then to the textview and timepicker

val layoutParams = LinearLayout.LayoutParams(
    ViewGroup.LayoutParams.WRAP_CONTENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
)
layoutParams.setMargins(100)

timePicker.layoutParams = layoutParams
textView.layoutParams = layoutParams

then, we call the setOnTimeChangedListener() to update the textview based on the time picked by user

timePicker.setOnTimeChangedListener { view, hour, minute ->
    ...
    val message = "$hour : $min $amPm"
    textView.text = message
    ...
}

and, we should add them into the Linearlayout using

val linearLayout: LinearLayout = findViewById(R.id.main)
linearLayout.addView(timePicker)
linearLayout.addView(textView)

MainActivity.kt:

Kotlin

package org.geeksforgeeks.demo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import android.view.ViewGroup
import android.widget.LinearLayout
import android.widget.TextView
import android.widget.TimePicker
import androidx.core.view.setMargins

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // create textView from XML file
        val textView = TextView(this)
        // create TimePicker programmatically
        val timePicker = TimePicker(this)

        val layoutParams = LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
        layoutParams.setMargins(100)

        timePicker.layoutParams = layoutParams
        textView.layoutParams = layoutParams
        textView.textSize = 24f

        timePicker.setOnTimeChangedListener { _, hour, minute ->
            var hour1 = hour
            var amPm = ""

            // AM PM decider logic
            when {
                hour1 == 0 -> {
                    hour1 += 12
                    amPm = "AM"
                }
                hour1 == 12 -> {
                    amPm = "PM"
                }
                hour1 > 12 -> {
                    hour1 -= 12
                    amPm = "PM"
                }
                else -> {
                    amPm = "AM"
                }
            }
            val hour2 = if (hour1 < 10) "0$hour1" else hour1
            val min = if (minute < 10) "0$minute" else minute

            // display format of time
            val message = "$hour2 : $min $amPm"
            textView.text = message
            textView.visibility = ViewGroup.VISIBLE
        }
        val linearLayout: LinearLayout = findViewById(R.id.main)
        linearLayout.addView(timePicker)
        linearLayout.addView(textView)
    }
}

Output:

Create Quiz