From 8637d98df8e91b151cf17efb031cfcaa1cc8524e Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Tue, 9 Jul 2024 11:19:50 +0100 Subject: [PATCH 1/5] Adding advanced examples --- .../snippets/components/TimePickers.kt | 138 +++++++++++++++++- 1 file changed, 134 insertions(+), 4 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt index cdf11101..71759e76 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt @@ -16,13 +16,27 @@ package com.example.compose.snippets.components +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.AccessTime +import androidx.compose.material.icons.filled.EditCalendar import androidx.compose.material3.AlertDialog import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.material3.TimeInput @@ -37,6 +51,8 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import androidx.compose.ui.window.Dialog +import androidx.compose.ui.window.DialogProperties import java.text.SimpleDateFormat import java.util.Calendar import java.util.Locale @@ -46,6 +62,7 @@ import java.util.Locale fun TimePickerExamples() { var showDialExample by remember { mutableStateOf(false) } var showInputExample by remember { mutableStateOf(false) } + var showAdvancedExample by remember { mutableStateOf(false) } var selectedTime: TimePickerState? by remember { mutableStateOf(null) } @@ -60,16 +77,19 @@ fun TimePickerExamples() { ) { Button(onClick = { showDialExample = true - showInputExample = false }) { Text("Dial time picker") } Button(onClick = { - showDialExample = false showInputExample = true }) { Text("Input time picker") } + Button(onClick = { + showAdvancedExample = true + }) { + Text("Time picker with custom dialog") + } if (selectedTime != null) { val cal = Calendar.getInstance() cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour) @@ -85,7 +105,7 @@ fun TimePickerExamples() { showDialExample -> DialExample( onDismiss = { showDialExample = false }, onConfirm = { - time -> + time -> selectedTime = time showDialExample = false }, @@ -93,11 +113,19 @@ fun TimePickerExamples() { showInputExample -> InputExample( onDismiss = { showInputExample = false }, onConfirm = { - time -> + time -> selectedTime = time showInputExample = false }, ) + showAdvancedExample -> AdvancedExample( + onDismiss = { showAdvancedExample = false }, + onConfirm = { + time -> + selectedTime = time + showAdvancedExample = false + }, + ) } } @@ -153,6 +181,57 @@ fun InputExample( } // [END android_compose_components_input] +@OptIn(ExperimentalMaterial3Api::class) +// [START android_compose_components_advanced] +@Composable +fun AdvancedExample( + onConfirm: (TimePickerState) -> Unit, + onDismiss: () -> Unit, +) { + + val currentTime = Calendar.getInstance() + + val timePickerState = rememberTimePickerState( + initialHour = currentTime.get(Calendar.HOUR_OF_DAY), + initialMinute = currentTime.get(Calendar.MINUTE), + is24Hour = true, + ) + + /** Determines whether the time picker is dial or input */ + var showDial by remember { mutableStateOf(true) } + + /** The icon used for the icon button that switches from dial to input */ + val toggleIcon = if (showDial) { + Icons.Filled.EditCalendar + }else{ + Icons.Filled.AccessTime + } + + AdvancedTimePickerDialog( + onDismiss = { onDismiss() }, + onConfirm = { onConfirm(timePickerState) }, + toggle = { + IconButton(onClick = { showDial = !showDial }) { + Icon( + imageVector = toggleIcon, + contentDescription = "Time picker type toggle", + ) + } + }, + ) { + if (showDial) { + TimePicker( + state = timePickerState, + ) + }else{ + TimeInput( + state = timePickerState, + ) + } + } +} +// [END android_compose_components_advanced] + // [START android_compose_components_timepickerdialog] @Composable fun TimePickerDialog( @@ -176,3 +255,54 @@ fun TimePickerDialog( ) } // [END android_compose_components_timepickerdialog] + +// [START android_compose_components_advanceddialog] +@Composable +fun AdvancedTimePickerDialog( + title: String = "Select Time", + onDismiss: () -> Unit, + onConfirm: () -> Unit, + toggle: @Composable () -> Unit = {}, + content: @Composable () -> Unit, +) { + Dialog( + onDismissRequest = onDismiss, + 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 = onDismiss) { Text("Cancel") } + TextButton(onClick = onConfirm) { Text("OK") } + } + } + } + } +} +// [END android_compose_components_advanceddialog] \ No newline at end of file From 6aab7a9649f7a633815ac9a0d33764cad42d704b Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Tue, 9 Jul 2024 10:29:34 +0000 Subject: [PATCH 2/5] Apply Spotless --- .../snippets/components/TimePickers.kt | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt index 71759e76..3187f3a6 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt @@ -105,7 +105,7 @@ fun TimePickerExamples() { showDialExample -> DialExample( onDismiss = { showDialExample = false }, onConfirm = { - time -> + time -> selectedTime = time showDialExample = false }, @@ -113,7 +113,7 @@ fun TimePickerExamples() { showInputExample -> InputExample( onDismiss = { showInputExample = false }, onConfirm = { - time -> + time -> selectedTime = time showInputExample = false }, @@ -121,7 +121,7 @@ fun TimePickerExamples() { showAdvancedExample -> AdvancedExample( onDismiss = { showAdvancedExample = false }, onConfirm = { - time -> + time -> selectedTime = time showAdvancedExample = false }, @@ -203,7 +203,7 @@ fun AdvancedExample( /** The icon used for the icon button that switches from dial to input */ val toggleIcon = if (showDial) { Icons.Filled.EditCalendar - }else{ + } else { Icons.Filled.AccessTime } @@ -223,7 +223,7 @@ fun AdvancedExample( TimePicker( state = timePickerState, ) - }else{ + } else { TimeInput( state = timePickerState, ) @@ -293,9 +293,11 @@ fun AdvancedTimePickerDialog( style = MaterialTheme.typography.labelMedium ) content() - Row(modifier = Modifier - .height(40.dp) - .fillMaxWidth()) { + Row( + modifier = Modifier + .height(40.dp) + .fillMaxWidth() + ) { toggle() Spacer(modifier = Modifier.weight(1f)) TextButton(onClick = onDismiss) { Text("Cancel") } @@ -305,4 +307,4 @@ fun AdvancedTimePickerDialog( } } } -// [END android_compose_components_advanceddialog] \ No newline at end of file +// [END android_compose_components_advanceddialog] From 29c0ca702a9a37e703fbce854e2eea890f452f96 Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Tue, 9 Jul 2024 13:35:20 +0100 Subject: [PATCH 3/5] Adding advanced examples --- .../java/com/example/compose/snippets/components/TimePickers.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt index 71759e76..fe4ff0f4 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt @@ -305,4 +305,4 @@ fun AdvancedTimePickerDialog( } } } -// [END android_compose_components_advanceddialog] \ No newline at end of file +// [END android_compose_components_advanceddialog] From 2361d5f1f8f00727a8c6c7cbc2ab9556c441627b Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Tue, 9 Jul 2024 14:36:50 +0100 Subject: [PATCH 4/5] Rename AdvancedTimePickerExample --- .../com/example/compose/snippets/components/TimePickers.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt index 3187f3a6..5180a1bd 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt @@ -118,7 +118,7 @@ fun TimePickerExamples() { showInputExample = false }, ) - showAdvancedExample -> AdvancedExample( + showAdvancedExample -> AdvancedTimePickerExample( onDismiss = { showAdvancedExample = false }, onConfirm = { time -> @@ -184,7 +184,7 @@ fun InputExample( @OptIn(ExperimentalMaterial3Api::class) // [START android_compose_components_advanced] @Composable -fun AdvancedExample( +fun AdvancedTimePickerExample( onConfirm: (TimePickerState) -> Unit, onDismiss: () -> Unit, ) { From dd66d5aba2af758403b00e990096ec18b2fe932e Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Mon, 22 Jul 2024 14:06:33 +0100 Subject: [PATCH 5/5] Rename AdvancedTimePickerExample --- .../com/example/compose/snippets/components/TimePickers.kt | 3 +++ 1 file changed, 3 insertions(+) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt index 5180a1bd..129cbb05 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt @@ -144,6 +144,7 @@ fun DialExample( is24Hour = true, ) + // For information on how to implement a time picker dialog, see the "Dialogs for time pickers" guide. TimePickerDialog( onDismiss = { onDismiss() }, onConfirm = { onConfirm(timePickerState) } @@ -170,6 +171,7 @@ fun InputExample( is24Hour = true, ) + // For information on how to implement a time picker dialog, see the "Dialogs for time pickers" guide. TimePickerDialog( onDismiss = { onDismiss() }, onConfirm = { onConfirm(timePickerState) } @@ -207,6 +209,7 @@ fun AdvancedTimePickerExample( Icons.Filled.AccessTime } + // For information on how to implement a time picker dialog, see the "Dialogs for time pickers" guide. AdvancedTimePickerDialog( onDismiss = { onDismiss() }, onConfirm = { onConfirm(timePickerState) },