সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
সময় বাছাইকারীরা প্রায়ই ডায়ালগে উপস্থিত হয়। আপনি একটি ডায়ালগের তুলনামূলক জেনেরিক এবং ন্যূনতম বাস্তবায়ন ব্যবহার করতে পারেন, অথবা আপনি আরও নমনীয়তার সাথে একটি কাস্টম ডায়ালগ প্রয়োগ করতে পারেন।
টাইম পিকার স্টেট কিভাবে ব্যবহার করতে হয় সহ সাধারণভাবে ডায়ালগ সম্পর্কে আরও তথ্যের জন্য, টাইম পিকার গাইড দেখুন।
মৌলিক উদাহরণ
আপনার সময় চয়নকারীর জন্য একটি ডায়ালগ তৈরি করার সবচেয়ে সহজ উপায় হল একটি কম্পোজযোগ্য তৈরি করা যা AlertDialog প্রয়োগ করে। নিম্নলিখিত স্নিপেটটি এই পদ্ধতি ব্যবহার করে তুলনামূলকভাবে ন্যূনতম ডায়ালগের একটি উদাহরণ প্রদান করে:
DialWithDialogExample কম্পোজেবল TimePicker একটি ডায়ালগে মোড়ানো।
TimePickerDialog হল একটি কাস্টম কম্পোজযোগ্য যা নিম্নলিখিত পরামিতিগুলির সাথে একটি AlertDialog তৈরি করে:
onDismiss : একটি ফাংশন বলা হয় যখন ব্যবহারকারী ডায়ালগটি খারিজ করে দেয় (খারিজ বোতাম বা নেভিগেশন ব্যাক এর মাধ্যমে)।
onConfirm : একটি ফাংশন বলা হয় যখন ব্যবহারকারী "OK" বোতামে ক্লিক করেন।
content : একটি সংমিশ্রণযোগ্য যা ডায়ালগের মধ্যে সময় চয়নকারী প্রদর্শন করে।
AlertDialog এর মধ্যে রয়েছে:
"খারিজ" লেবেলযুক্ত একটি খারিজ বোতাম।
"ঠিক আছে" লেবেলযুক্ত একটি নিশ্চিত বোতাম।
টাইম পিকার কন্টেন্ট text প্যারামিটার হিসেবে পাস করা হয়েছে।
DialWithDialogExample বর্তমান সময়ের সাথে TimePickerState আরম্ভ করে এবং এটিকে TimePicker এবং onConfirm ফাংশনে পাস করে।
চিত্র 1. একটি সতর্কতা ডায়ালগে একটি সময় চয়নকারী।
উন্নত উদাহরণ
এই স্নিপেট জেটপ্যাক কম্পোজে একটি কাস্টমাইজযোগ্য সময় পিকার ডায়ালগের একটি উন্নত বাস্তবায়ন প্রদর্শন করে।
@ComposablefunAdvancedTimePickerExample(onConfirm:(TimePickerState)->Unit,onDismiss:()->Unit,){valcurrentTime=Calendar.getInstance()valtimePickerState=rememberTimePickerState(initialHour=currentTime.get(Calendar.HOUR_OF_DAY),initialMinute=currentTime.get(Calendar.MINUTE),is24Hour=true,)/** Determines whether the time picker is dial or input */varshowDialbyremember{mutableStateOf(true)}/** The icon used for the icon button that switches from dial to input */valtoggleIcon=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,)}}}@ComposablefunAdvancedTimePickerDialog(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")}}}}}}
AdvancedTimePickerExample কম্পোজেবল একটি কাস্টমাইজযোগ্য সময় পিকার ডায়ালগ তৈরি করে।
এটি AlertDialog চেয়ে বেশি নমনীয়তার জন্য একটি Dialog কম্পোজযোগ্য ব্যবহার করে।
ডায়লগটিতে একটি কাস্টমাইজযোগ্য শিরোনাম এবং ডায়াল এবং ইনপুট মোডগুলির মধ্যে স্যুইচ করার জন্য একটি টগল বোতাম রয়েছে৷
প্রস্থ এবং উচ্চতা উভয়ের জন্য IntrinsicSize.Min সহ, Surface ডায়ালগে আকৃতি এবং উচ্চতা প্রয়োগ করে।
Column এবং Row লেআউট ডায়ালগের গঠন উপাদান প্রদান করে।
উদাহরণটি showDial ব্যবহার করে পিকার মোড ট্র্যাক করে।
একটি IconButton মোডগুলির মধ্যে টগল করে, সেই অনুযায়ী আইকন আপডেট করে।
showDial অবস্থার উপর ভিত্তি করে ডায়ালগ বিষয়বস্তু TimePicker এবং TimeInput মধ্যে স্যুইচ করে।
এই উন্নত বাস্তবায়ন একটি অত্যন্ত কাস্টমাইজযোগ্য এবং পুনঃব্যবহারযোগ্য টাইম পিকার ডায়ালগ প্রদান করে যা আপনার অ্যাপের বিভিন্ন ব্যবহারের ক্ষেত্রে মানিয়ে নিতে পারে।
এই পৃষ্ঠার কন্টেন্ট ও কোডের নমুনাগুলি Content License-এ বর্ণিত লাইসেন্সের অধীনস্থ। Java এবং OpenJDK হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2025-08-28 UTC-তে শেষবার আপডেট করা হয়েছে।
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2025-08-28 UTC-তে শেষবার আপডেট করা হয়েছে।"],[],[],null,["[Time pickers](/develop/ui/compose/components/time-pickers) often appear in dialogs. You can use a relatively generic and\nminimal implementation of a dialog, or you can implement a custom dialog with\nmore flexibility.\n\nFor more information on dialogs in general, including how to use the time picker\nstate, see the [Time pickers guide](/develop/ui/compose/components/time-pickers).\n\nBasic example\n\nThe most straightforward way to create a dialog for your time picker is to\ncreate a composable that implements [`AlertDialog`](/reference/kotlin/androidx/compose/material3/package-summary#AlertDialog(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.DialogProperties)). The following snippet\nprovides an example of a relatively minimal dialog using this approach:\n\n\n```kotlin\n@Composable\nfun DialWithDialogExample(\n onConfirm: (TimePickerState) -\u003e Unit,\n onDismiss: () -\u003e Unit,\n) {\n val currentTime = Calendar.getInstance()\n\n val timePickerState = rememberTimePickerState(\n initialHour = currentTime.get(Calendar.HOUR_OF_DAY),\n initialMinute = currentTime.get(Calendar.MINUTE),\n is24Hour = true,\n )\n\n TimePickerDialog(\n onDismiss = { onDismiss() },\n onConfirm = { onConfirm(timePickerState) }\n ) {\n TimePicker(\n state = timePickerState,\n )\n }\n}\n\n@Composable\nfun TimePickerDialog(\n onDismiss: () -\u003e Unit,\n onConfirm: () -\u003e Unit,\n content: @Composable () -\u003e Unit\n) {\n AlertDialog(\n onDismissRequest = onDismiss,\n dismissButton = {\n TextButton(onClick = { onDismiss() }) {\n Text(\"Dismiss\")\n }\n },\n confirmButton = {\n TextButton(onClick = { onConfirm() }) {\n Text(\"OK\")\n }\n },\n text = { content() }\n )\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt#L294-L337\n```\n\n\u003cbr /\u003e\n\nNote the key points in this snippet:\n\n1. The `DialWithDialogExample` composable wraps [`TimePicker`](/develop/ui/compose/components/time-pickers) in a dialog.\n2. `TimePickerDialog` is a custom composable that creates an `AlertDialog` with the following parameters:\n - `onDismiss`: A function called when the user dismisses the dialog (via the dismiss button or navigation back).\n - `onConfirm`: A function called when the user clicks the \"OK\" button.\n - `content`: A composable that displays the time picker within the dialog.\n3. The `AlertDialog` includes:\n - A dismiss button labeled \"Dismiss\".\n - A confirm button labeled \"OK\".\n - The time picker content passed as the `text` parameter.\n4. The `DialWithDialogExample` initializes the `TimePickerState` with the current time and passes it to both the `TimePicker` and the `onConfirm` function.\n\n**Figure 1.** A time picker in an AlertDialog.\n\nAdvanced example\n\nThis snippet demonstrates an advanced implementation of a customizable time\npicker dialog in Jetpack Compose.\n\n\n```kotlin\n@Composable\nfun AdvancedTimePickerExample(\n onConfirm: (TimePickerState) -\u003e Unit,\n onDismiss: () -\u003e Unit,\n) {\n\n val currentTime = Calendar.getInstance()\n\n val timePickerState = rememberTimePickerState(\n initialHour = currentTime.get(Calendar.HOUR_OF_DAY),\n initialMinute = currentTime.get(Calendar.MINUTE),\n is24Hour = true,\n )\n\n /** Determines whether the time picker is dial or input */\n var showDial by remember { mutableStateOf(true) }\n\n /** The icon used for the icon button that switches from dial to input */\n val toggleIcon = if (showDial) {\n Icons.Filled.EditCalendar\n } else {\n Icons.Filled.AccessTime\n }\n\n AdvancedTimePickerDialog(\n onDismiss = { onDismiss() },\n onConfirm = { onConfirm(timePickerState) },\n toggle = {\n IconButton(onClick = { showDial = !showDial }) {\n Icon(\n imageVector = toggleIcon,\n contentDescription = \"Time picker type toggle\",\n )\n }\n },\n ) {\n if (showDial) {\n TimePicker(\n state = timePickerState,\n )\n } else {\n TimeInput(\n state = timePickerState,\n )\n }\n }\n}\n\n@Composable\nfun AdvancedTimePickerDialog(\n title: String = \"Select Time\",\n onDismiss: () -\u003e Unit,\n onConfirm: () -\u003e Unit,\n toggle: @Composable () -\u003e Unit = {},\n content: @Composable () -\u003e Unit,\n) {\n Dialog(\n onDismissRequest = onDismiss,\n properties = DialogProperties(usePlatformDefaultWidth = false),\n ) {\n Surface(\n shape = MaterialTheme.shapes.extraLarge,\n tonalElevation = 6.dp,\n modifier =\n Modifier\n .width(IntrinsicSize.Min)\n .height(IntrinsicSize.Min)\n .background(\n shape = MaterialTheme.shapes.extraLarge,\n color = MaterialTheme.colorScheme.surface\n ),\n ) {\n Column(\n modifier = Modifier.padding(24.dp),\n horizontalAlignment = Alignment.CenterHorizontally\n ) {\n Text(\n modifier = Modifier\n .fillMaxWidth()\n .padding(bottom = 20.dp),\n text = title,\n style = MaterialTheme.typography.labelMedium\n )\n content()\n Row(\n modifier = Modifier\n .height(40.dp)\n .fillMaxWidth()\n ) {\n toggle()\n Spacer(modifier = Modifier.weight(1f))\n TextButton(onClick = onDismiss) { Text(\"Cancel\") }\n TextButton(onClick = onConfirm) { Text(\"OK\") }\n }\n }\n }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt#L342-L439\n```\n\n\u003cbr /\u003e\n\nNote the key points in this snippet:\n\n1. The `AdvancedTimePickerExample` composable creates a customizable time picker dialog.\n2. It uses a [`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) composable for more flexibility than `AlertDialog`.\n3. The dialog includes a customizable title and a toggle button to switch between dial and input modes.\n4. `Surface` applies shape and elevation to the dialog, with `IntrinsicSize.Min` for both width and height.\n5. `Column` and `Row` layout provide the dialog's structure components.\n6. The example tracks the picker mode using `showDial`.\n - An `IconButton` toggles between modes, updating the icon accordingly.\n - The dialog content switches between `TimePicker` and `TimeInput` based on the `showDial` state.\n\nThis advanced implementation provides a highly customizable and reusable time\npicker dialog that can adapt to different use cases in your app.\n\nThis implementation appears as follows:\n**Figure 2.** A time picker in a custom dialog.\n\nAdditional resources\n\n- [Time pickers guide](/develop/ui/compose/components/time-pickers)\n- [Material Design - Time Pickers](https://m3.material.io/components/time-pickers/overview)"]]