Merge pull request #58 from android/dt/dialog-recipe

Add a recipe for creating dialogs

Author: dturner

README.md

@@ -12,6 +12,7 @@ These are the recipes and what they demonstrate.
 
 **Layouts and animations**
 - **[Material adaptive](app/src/main/java/com/example/nav3recipes/scenes/materiallistdetail)**: Shows how to use a Material list-detail layout. 
+- **[Dialog](app/src/main/java/com/example/nav3recipes/dialog)**: Shows how to create a Dialog destination.
 - **[Custom Scene](app/src/main/java/com/example/nav3recipes/scenes/twopane)**: Shows how to create a custom layout using a `Scene` and `SceneStrategy` (see video of UI behavior below).
 - **[Animations](app/src/main/java/com/example/nav3recipes/animations)**: Override the default animations for all destinations and a single destination.
 

app/src/main/AndroidManifest.xml

@@ -61,6 +61,10 @@
             android:exported="true"
             android:label="@string/app_name"
             android:theme="@style/Theme.Nav3Recipes"/>
+        <activity
+            android:name=".dialog.DialogActivity"
+            android:exported="true"
+            android:theme="@style/Theme.Nav3Recipes"/>
         <activity
             android:name=".scenes.materiallistdetail.MaterialListDetailActivity"
             android:exported="true"

app/src/main/java/com/example/nav3recipes/RecipePickerActivity.kt

@@ -28,6 +28,7 @@ import com.example.nav3recipes.basicdsl.BasicDslActivity
 import com.example.nav3recipes.basicsaveable.BasicSaveableActivity
 import com.example.nav3recipes.commonui.CommonUiActivity
 import com.example.nav3recipes.conditional.ConditionalActivity
+import com.example.nav3recipes.dialog.DialogActivity
 import com.example.nav3recipes.modular.hilt.ModularActivity
 import com.example.nav3recipes.passingarguments.basicviewmodels.BasicViewModelsActivity
 import com.example.nav3recipes.passingarguments.injectedviewmodels.InjectedViewModelsActivity
@@ -50,6 +51,7 @@ private val recipes = listOf(
     Recipe("Animations", AnimatedActivity::class.java),
     Recipe("Conditional navigation", ConditionalActivity::class.java),
     Recipe("Common UI", CommonUiActivity::class.java),
+    Recipe("Dialog", DialogActivity::class.java),
     Recipe("Material list-detail layout", MaterialListDetailActivity::class.java),
     Recipe("Two pane layout", TwoPaneActivity::class.java),
     Recipe("Argument passing to basic ViewModel", BasicViewModelsActivity::class.java),

app/src/main/java/com/example/nav3recipes/dialog/DialogActivity.kt

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.nav3recipes.dialog
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.DialogProperties
+import androidx.navigation3.runtime.NavKey
+import androidx.navigation3.runtime.entry
+import androidx.navigation3.runtime.entryProvider
+import androidx.navigation3.runtime.rememberNavBackStack
+import androidx.navigation3.ui.DialogSceneStrategy
+import androidx.navigation3.ui.NavDisplay
+import com.example.nav3recipes.content.ContentBlue
+import com.example.nav3recipes.content.ContentGreen
+import com.example.nav3recipes.ui.setEdgeToEdgeConfig
+import kotlinx.serialization.Serializable
+
+/**
+ * This recipe demonstrates how to create a dialog. It does this by:
+ *
+ * - Adding the `DialogSceneStrategy` to the list of strategies used by `NavDisplay`.
+ * - Adding `DialogSceneStrategy.dialog` to a `NavEntry`'s metadata to indicate that it is a
+ * dialog. In this case it is applied to the `NavEntry` for `RouteB`.
+ *
+ * See also https://developer.android.com/guide/navigation/navigation-3/custom-layouts
+ */
+
+@Serializable
+private data object RouteA : NavKey
+
+@Serializable
+private data class RouteB(val id: String) : NavKey
+
+class DialogActivity : ComponentActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        setEdgeToEdgeConfig()
+        super.onCreate(savedInstanceState)
+        setContent {
+            val backStack = rememberNavBackStack(RouteA)
+            val dialogStrategy = remember { DialogSceneStrategy<NavKey>() }
+
+            NavDisplay(
+                backStack = backStack,
+                onBack = { backStack.removeLastOrNull() },
+                sceneStrategy = dialogStrategy,
+                entryProvider = entryProvider {
+                    entry<RouteA> {
+                        ContentGreen("Welcome to Nav3") {
+                            Button(onClick = {
+                                backStack.add(RouteB("123"))
+                            }) {
+                                Text("Click to open dialog")
+                            }
+                        }
+                    }
+                    entry<RouteB>(
+                        metadata = DialogSceneStrategy.dialog(
+                            DialogProperties(windowTitle = "Route B dialog")
+                        )
+                    ) { key ->
+                        ContentBlue(
+                            title = "Route id: ${key.id}",
+                            modifier = Modifier.clip(
+                                shape = RoundedCornerShape(16.dp)
+                            )
+                        )
+                    }
+                }
+            )
+        }
+    }
+}