Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Time Picker Dialog in Android

  • Last Updated : 06 Jun, 2021

Android TimePicker is a user interface control for selecting the time in either 24-hour format or AM/PM mode. It is used to ensure that users pick the valid time for the day in our application. The time picker interface exists basically in two modes one is under XML layout and another is a dialog. In this discussion, it’s been demonstrated how to implement TimePicker Dialog in android. Refer to TimePicker in Kotlin for the TimePicker in the XML layout. Have a look at the following image to get an overview of the discussion.

Time Picker Dialog in Android using Kotlin

Steps to implement Time Picker Dialog in Android app

Step 1: Create an empty activity project

Create an empty activity Android Studio project and select Kotlin as the programming language. Android | How to Create/Start a New Project in Android Studio?

Step 2: Working with the activity_main.xml file

The main layout of the application contains a button and TextView to preview the picked time. To implement the same layout invoke the following code inside the activity_main.xml file.


<?xml version="1.0" encoding="utf-8"?>
        android:text="PICK TIME"
        app:layout_constraintTop_toTopOf="parent" />
        android:text="Preview picked time here"
        app:layout_constraintTop_toBottomOf="@+id/pick_time_button" />

Output UI:

Before Heading to implement the TimePicker dialog, understanding the dialog anatomy is important

Time Picker Dialog in Android

Step 3: Working with MainActivity.kt file

In the MainActivity.kt file the instance of TimePickerDialog which takes 5 parameters.

TimePickerDialog(Context, TimePickerDialogListener, DefaultHourOfDialog(Int), DefaultMinuteOfDialog(Int), is24HourView(boolean))

To implement TimePicker Dialog invoke the following code.


import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.TimePicker
class MainActivity : AppCompatActivity() {
    lateinit var previewSelectedTimeTextView: TextView
    // listener which is triggered when the
      // time is picked from the time picker dialog
    private val timePickerDialogListener: TimePickerDialog.OnTimeSetListener =
        object : TimePickerDialog.OnTimeSetListener {
            override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
                // logic to properly handle 
                  // the picked timings by user
                val formattedTime: String = when {
                    hourOfDay == 0 -> {
                        if (minute < 10) {
                            "${hourOfDay + 12}:0${minute} am"
                        } else {
                            "${hourOfDay + 12}:${minute} am"
                    hourOfDay > 12 -> {
                        if (minute < 10) {
                            "${hourOfDay - 12}:0${minute} pm"
                        } else {
                            "${hourOfDay - 12}:${minute} pm"
                    hourOfDay == 12 -> {
                        if (minute < 10) {
                            "${hourOfDay}:0${minute} pm"
                        } else {
                            "${hourOfDay}:${minute} pm"
                    else -> {
                        if (minute < 10) {
                            "${hourOfDay}:${minute} am"
                        } else {
                            "${hourOfDay}:${minute} am"
                previewSelectedTimeTextView.text = formattedTime
    override fun onCreate(savedInstanceState: Bundle?) {
        // instance of the UI elements
        val buttonPickTime: Button = findViewById<Button>(
        previewSelectedTimeTextView = findViewById<TextView>(
        // handle the pick time button to
          // open the TimePickerDialog
        buttonPickTime.setOnClickListener {
            val timePicker: TimePickerDialog = TimePickerDialog(
                // pass the Context
                // listener to perform task
                  // when time is picked
                // default hour when the time picker
                  // dialog is opened
                // default minute when the time picker
                  // dialog is opened
                // 24 hours time picker is 
                  // false (varies according to the region)
            // then after building the timepicker 
              // dialog show the dialog to user


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!