Android TimePicker Dialog In Kotlin

Android TimePicker Dialog is a sub class of AlertDialog , containing an timepicker Widget for selecting time , the time can be selected in  hours and minute format .

TimePicker Dialog has two mode spinner and clock ,Lets see an example .

XML Layout

1. Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
2. Add Button to your layout file

file : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity"
        android:gravity="center_horizontal">

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:id="@+id/selectedTime"
              android:textSize="22sp"
              android:gravity="center"/>

    <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Select Time"
            android:id="@+id/selectTime"/>

</LinearLayout>

TImePicker Dialog

1. TimePickerDialog :  Creates a new time picker dialog for the given date.
2. TimeFormat : TimePickerDialog has a boolena is24HourView , whether to show 24 hour view or AM/PM .true to show 24Hr View , false to show AM/PM View
3. TimePickerDialog.OnTimeSetListener is used to listen time select event .when user selects date onTimeSet callback is called .

val mTimePicker: TimePickerDialog
val mcurrentTime = Calendar.getInstance()
val hour = mcurrentTime.get(Calendar.HOUR_OF_DAY)
val minute = mcurrentTime.get(Calendar.MINUTE)

mTimePicker = TimePickerDialog(this, object : TimePickerDialog.OnTimeSetListener {
 override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
  selectedTime.setText(String.format("%d : %d", hourOfDay, minute))
 }
}, hour, minute, false)

TimePickerDialog Style .

accentColor of basetheme is applied to DialogHeader and button .

TimePickerDialog Mode .

TimePicker Dialog has two mode clock and spinner. use android:timePickerMode property to set the mode

file: style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:timePickerStyle">@style/MyTimePickerTheme</item>
    </style>

    <style name="MyTimePickerTheme" parent="android:Widget.Material.Light.TimePicker">
        <item name="android:timePickerMode">clock</item>
    </style>

</resources>

1. Clock Mode

<item name="android:timePickerMode">clock</item>

2. Spinner Mode

<item name="android:timePickerMode">spinner</item>

Activity

1. Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
2. Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml). 
3. On Button Click show TimePickerDialog.

file : MainActivity.kt

package com.tutorialsbuzz.androidtimepicker

import android.app.TimePickerDialog
import android.os.Bundle
import android.widget.TimePicker
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
import java.util.*

class MainActivity : AppCompatActivity() {

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

        val mTimePicker: TimePickerDialog
        val mcurrentTime = Calendar.getInstance()
        val hour = mcurrentTime.get(Calendar.HOUR_OF_DAY)
        val minute = mcurrentTime.get(Calendar.MINUTE)

        mTimePicker = TimePickerDialog(this, object : TimePickerDialog.OnTimeSetListener {
            override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
                selectedTime.setText(String.format("%d : %d", hourOfDay, minute))
            }
        }, hour, minute, false)
        
        selectTime.setOnClickListener({ v ->
            mTimePicker.show()
        })

    }
}

DOWNLOAD CODE