TimePickerDialog in jetpack compose

Question

I have this code from the material3 documentation for compose:

import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Button
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TimeInput
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope

var showTimePicker by remember { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
val snackScope = rememberCoroutineScope()

Box(propagateMinConstraints = false) {
    Button(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showTimePicker = true }
    ) { Text("Set Time") }
    SnackbarHost(hostState = snackState)
}

if (showTimePicker) {
    TimePickerDialog(
        onCancel = { showTimePicker = false },
        onConfirm = {
        val cal = Calendar.getInstance()
        cal.set(Calendar.HOUR_OF_DAY, state.hour)
        cal.set(Calendar.MINUTE, state.minute)
        cal.isLenient = false
        snackScope.launch {
            snackState.showSnackbar("Entered time: ${formatter.format(cal.time)}")
        }
        showTimePicker = false
    },
) {
    TimeInput(state = state)
}
}

Pretty straightforward right? But android studio is complaining about TimePickerDialog with:

<html>None of the following functions can be called with the arguments supplied:<br/>public constructor TimePickerDialog(context: Context!, listener: TimePickerDialog.OnTimeSetListener!, hourOfDay: Int, minute: Int, is24HourView: Boolean) defined in android.app.TimePickerDialog<br/>public constructor TimePickerDialog(context: Context!, themeResId: Int, listener: TimePickerDialog.OnTimeSetListener!, hourOfDay: Int, minute: Int, is24HourView: Boolean) defined in android.app.TimePickerDialog

With a bit of googling of found most of the example code regarding TimePickerDialog or DatePickerDialog weren't using the Picker dialogs as explained in the documentation above.

val mTimePickerDialog = TimePickerDialog(
    mContext,
    {_, mHour : Int, mMinute: Int ->
        mTime.value = "$mHour:$mMinute"
    }, mHour, mMinute, false
)

score 16 · Accepted Answer · edited Aug 14 '23 at 16:13

The TimePickerDialog is not included in the M3 package (1.1.0-beta01). You can use:

@Composable
fun TimePickerDialog(
    title: String = "Select Time",
    onCancel: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onCancel,
        properties = DialogProperties(
            usePlatformDefaultWidth = false
        ),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier = Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(
                        onClick = onCancel
                    ) { Text("Cancel") }
                    TextButton(
                        onClick = onConfirm
                    ) { Text("OK") }
                }
            }
        }
    }
}

Source code

Ah classic from Google! Documentation that only works in the future. — Sujit Poudel, Apr 02 '23 at 00:07
Looks like it's still not included in 1.2.0-alpha03 of compose-material3 :/ — Yash Garg, Jul 16 '23 at 13:17
I had created an issue and the official recommendation is to copy the code. https://issuetracker.google.com/issues/288311426 — Abhimanyu, Aug 14 '23 at 14:51
BTW, this code (as well as the linked Google Source code) has a bug, the toggle should be within the Row. Updating accordingly. — Abhimanyu, Aug 14 '23 at 16:13

TimePickerDialog in jetpack compose

1 Answers1