Time Picker in Android using Jetpack Compose

Last Updated : 18 Apr, 2025

In Android, a Time Picker is a modern UI element, used in applications like Alarm and Reminders, that requires users to select a particular time for performing a particular task. It is a user interface control for selecting the time in either 24-hour format or 12-hour (AM/PM) mode.

In this article, we will show you how you could implement a Time Picker in Android using Jetpack Compose. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. While choosing the template, select Empty Activity.

Step 2: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

MainActivity.kt:

Kotlin

package com.geeksforgeeks.demo

import android.app.TimePickerDialog
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import java.util.*

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                TimePickerContent()
            }
        }
    }
}

@Composable
fun TimePickerContent() {
    // Accessing the current Android context
    val context = LocalContext.current

    // Get the current time using Calendar
    val calendar = Calendar.getInstance()
    val hour = calendar[Calendar.HOUR_OF_DAY]
    val minute = calendar[Calendar.MINUTE]

    // Mutable state to store the selected time as a string
    var selectedTime by remember { mutableStateOf("") }

    // Creating a TimePickerDialog in 12-hour format
    val timePickerDialog = TimePickerDialog(
        context,
        { _, selectedHour: Int, selectedMinute: Int ->
            // Convert 24-hour to 12-hour format
            val hour12 = if (selectedHour % 12 == 0) 12 else selectedHour % 12
            val amPm = if (selectedHour < 12) "AM" else "PM"

            // Format time with leading zeros for minutes
            selectedTime = String.format("%d:%02d %s", hour12, selectedMinute, amPm)
        },
        hour,   // Current hour
        minute, // Current minute
        false   // false = 12-hour format
    )

    // Layout for the UI elements
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp), // Padding around the column
        verticalArrangement = Arrangement.Center, // Center elements vertically
        horizontalAlignment = Alignment.CenterHorizontally // Center elements horizontally
    ) {
        // Button to show the Time Picker Dialog
        Button(
            onClick = { timePickerDialog.show() },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF0F9D58)) // Green button
        ) {
            Text(text = "Open Time Picker", color = Color.White)
        }

        // Spacer for vertical spacing
        Spacer(modifier = Modifier.height(50.dp))

        // Display the selected time, or a fallback message
        Text(
            text = if (selectedTime.isNotEmpty()) "Selected Time:\n$selectedTime" else "No time selected",
            fontSize = 24.sp,
            textAlign = TextAlign.Center
        )
    }
}