TimePicker in Kotlin

The Android TimePicker is a user interface component that allows users to select a specific time in either a 24-hour format or an AM/PM format. It ensures users input valid times within an application. TimePicker provides two display modes:

1. Clock Mode: Displays an analog clock-style interface for time selection.
2. Spinner Mode: Presents hour and minute values in a scrollable spinner format.

Ways to Implement TimePicker in Android

You can implement TimePicker in two ways:

1. XML Layout: Define the TimePicker directly in the layout file.
2. Programmatically: Dynamically create and configure the TimePicker in a Kotlin file.

In this article, we'll focus on using the TimePicker widget within the XML layout for better clarity and structure.

Important attributes of TimePicker

Steps of Implementing TimePicker

Step 1: Create a new project in Android Studio

Below are the steps to be followed:

1. Click on File, then New => New Project.
2. After that include the Kotlin support and click on next.
3. Select the minimum SDK as per convenience and click next button.
4. Then select the Empty activity => next => finish.

Step 2: Adding TimePicker widget in Layout file

We can use android:timePickerMode to choose which the mode for the TimePicker. The possible values are "clock" and "spinner". This article demonstrate how to implement both type of modes.

activity_main.xml:

Design UI:

Step 3: Access the TimePicker in MainActivity.kt file

First of all, we declare two variables textView and timePicker to access the widgets from the XML layout using their id's.

val textView = findViewById(R.id.textView)
val timePicker = findViewById(R.id.timePicker)

Then, we set the setOnTimeChangedListener(), to detect when the time is changed

timePicker.setOnTimeChangedListener { view, hourOfDay, minute ->
 // your code here
}

MainActivity.kt:

Output: