Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Dalam navigasi Android, istilah tujuan dialog mengacu pada tujuan
dalam grafik navigasi aplikasi yang berbentuk jendela dialog,
yang menempatkan elemen dan konten UI aplikasi.
Untuk membuat tujuan dialog di Compose, tambahkan tujuan ke NavHost
menggunakan fungsi dialog(). Fungsi ini pada dasarnya berperilaku sama seperti
composable, hanya saja fungsi ini membuat tujuan dialog, bukan tujuan
yang dihosting.
Perhatikan contoh berikut:
@SerializableobjectHome@SerializableobjectSettings@ComposablefunHomeScreen(onNavigateToSettings:()->Unit){Column{Text("Home")Button(onClick=onNavigateToSettings){Text("Open settings")}}}// This screen will be displayed as a dialog@ComposablefunSettingsScreen(){Text("Settings")// ...}@ComposablefunMyApp(){valnavController=rememberNavController()NavHost(navController,startDestination=Home){composable<Home>{HomeScreen(onNavigateToSettings={navController.navigate(route=Settings)})}dialog<Settings>{SettingsScreen()}}}
Tujuan awal menggunakan rute Home. Karena
composable() menambahkannya ke grafik, yang merupakan tujuan yang dihosting.
Tujuan lainnya menggunakan rute Settings.
Demikian pula, karena dialog() menambahkannya ke grafik, maka dialog akan muncul
tujuan.
Saat pengguna menavigasi dari HomeScreen ke SettingsScreen,
yang terakhir muncul di atas HomeScreen.
Meskipun SettingsScreen tidak menyertakan composable Dialog itu sendiri,
karena merupakan tujuan dialog, maka NavHost menampilkannya dalam
Dialog.
Tujuan dialog muncul di atas tujuan sebelumnya di NavHost. Gunakan
ketika dialog mewakili layar terpisah di aplikasi yang membutuhkan
siklus proses dan status tersimpan, terlepas dari tujuan lain di
grafik navigasi. Anda mungkin lebih memilih menggunakan AlertDialog atau composable
terkait jika menginginkan dialog untuk perintah yang tidak terlalu rumit, seperti
konfirmasi.
DSL Kotlin
Jika Anda menangani fragmen dan menggunakan DSL Kotlin untuk
membuat grafik, penambahan tujuan dialog sangat mirip dengan saat menggunakan
Compose.
Perhatikan cara dalam cuplikan berikut juga menggunakan fungsi dialog() untuk
menambahkan tujuan dialog yang menggunakan fragmen:
// Define destinations with serializable classes or objects@SerializableobjectHome@SerializableobjectSettings// Add the graph to the NavController with `createGraph()`.navController.graph=navController.createGraph(startDestination=Home){// Associate the home route with the HomeFragment.fragment<HomeFragment,Home>{label="Home"}// Define the settings destination as a dialog using DialogFragment.dialog<SettingsFragment,Settings>{label="Settings"}}
XML
Jika sudah memiliki DialogFragment, gunakan elemen <dialog> untuk
tambahkan dialog ke grafik navigasi, seperti yang ditunjukkan pada contoh berikut:
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Dialog destinations\n\nIn Android navigation, the term *dialog destination* refers to destinations\nwithin the app's navigation graph which take the form of dialog windows,\noverlaying app UI elements and content.\n\nBecause dialog destinations appear over [hosted destinations](/guide/navigation/design) that fill the\nnavigation host, there are some important considerations regarding how dialog\ndestinations interact with your [`NavController`'s back stack](/guide/navigation/backstack/dialog).\n| **Note:** Dialog destinations implement the [`FloatingWindow`](/reference/androidx/navigation/FloatingWindow) interface. Your app treats any destination that implements this interface as a dialog destination.\n\nDialog composable\n-----------------\n\nTo create a dialog destination in Compose, add a destination to your `NavHost`\nusing the [`dialog()`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).dialog(kotlin.collections.Map,kotlin.Function1)) function. The function behaves essentially the same as\n[`composable`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).composable(kotlin.collections.Map,kotlin.collections.List,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function2))(), only it creates a dialog destination rather than a [hosted\ndestination](/guide/navigation/design).\n\nConsider the following example: \n\n @Serializable\n object Home\n @Serializable\n object Settings\n @Composable\n fun HomeScreen(onNavigateToSettings: () -\u003e Unit){\n Column {\n Text(\"Home\")\n Button(onClick = onNavigateToSettings){\n Text(\"Open settings\")\n }\n }\n }\n\n // This screen will be displayed as a dialog\n @Composable\n fun SettingsScreen(){\n Text(\"Settings\")\n // ...\n }\n\n @Composable\n fun MyApp() {\n val navController = rememberNavController()\n NavHost(navController, startDestination = Home) {\n composable\u003cHome\u003e { HomeScreen(onNavigateToSettings = { navController.navigate(route = Settings) }) }\n dialog\u003cSettings\u003e { SettingsScreen() }\n }\n }\n\n1. The start destination uses the `Home` route. Because `composable()` adds it to the graph, it is a hosted destination.\n2. The other destination uses the `Settings` route.\n - Similarly, because `dialog()` adds it to the graph, it is a dialog destination.\n - When the user navigates from `HomeScreen` to `SettingsScreen` the latter appears over `HomeScreen`.\n3. Although `SettingsScreen` doesn't include a `Dialog` composable itself, because it is a dialog destination, the `NavHost` displays it within a `Dialog`.\n\nDialog destinations appear over the previous destination in the `NavHost`. Use\nthem when the dialog represents a separate screen in your app that needs its own\nlifecycle and saved state, independent of any other destination in your\nnavigation graph. You might prefer to use an [`AlertDialog`](/jetpack/compose/components/dialog) or related\ncomposable if you want a dialog for a less complex prompt, such as a\nconfirmation.\n| **Note:** Because bottom sheets in Compose are not built on `Dialog`, they need their own destination type. See the [Accompanist Navigation Material\n| documentation](https://google.github.io/accompanist/navigation-material/) for an example implementation.\n\nKotlin DSL\n----------\n\nIf you are working with fragments and you are using the [Kotlin DSL](/guide/navigation/design/kotlin-dsl) to\ncreate your graph, adding a dialog destination is very similar to when using\nCompose.\n\nConsider how in the following snippet also uses the [`dialog()`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).dialog(kotlin.Int)) function to\nadd a dialog destination that uses a fragment: \n\n // Define destinations with serializable classes or objects\n @Serializable\n object Home\n @Serializable\n object Settings\n\n // Add the graph to the NavController with `createGraph()`.\n navController.graph = navController.createGraph(\n startDestination = Home\n ) {\n // Associate the home route with the HomeFragment.\n fragment\u003cHomeFragment, Home\u003e {\n label = \"Home\"\n }\n\n // Define the settings destination as a dialog using DialogFragment.\n dialog\u003cSettingsFragment, Settings\u003e {\n label = \"Settings\"\n }\n }\n\nXML\n---\n\nIf you have an existing [`DialogFragment`](/reference/androidx/fragment/app/DialogFragment), use the `\u003cdialog\u003e` element to\nadd the dialog to your navigation graph, as shown in the following example: \n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cnavigation xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n android:id=\"@+id/nav_graph\"\u003e\n\n...\n\n\u003cdialog\n android:id=\"@+id/my_dialog_fragment\"\n android:name=\"androidx.navigation.myapp.MyDialogFragment\"\u003e\n \u003cargument android:name=\"myarg\" android:defaultValue=\"@null\" /\u003e\n \u003caction\n android:id=\"@+id/myaction\"\n app:destination=\"@+id/another_destination\"/\u003e\n\u003c/dialog\u003e\n\n...\n\n\u003c/navigation\u003e\n```"]]