Add Fragment and View Interop recipe (#226)

* Add Fragment and View Interop recipe

This commit introduces a new recipe demonstrating how to use `AndroidFragment` and `AndroidView` within a Navigation3 application.

Changes include:
*   Add `InteropActivity` and `MyCustomFragment` to demonstrate embedding Fragments and Views in Composables.
*   Add `androidx.fragment:fragment-compose` dependency to version catalog and build file.
*   Register `InteropActivity` in the manifest and add it to the `RecipePickerActivity` list.
*   Add `README.md` documenting the new recipe.

Fixes #42

* Remove redundant FrameLayout in MyCustomFragment

This commit simplifies the view hierarchy in `MyCustomFragment` by removing the unnecessary `FrameLayout` wrapper.

Changes:
*   Update `onCreateView` to return the `TextView` directly.

Author: jbw0033

README.md

@@ -65,6 +65,9 @@ Note: If you find a bug or have a feature request for Material3 Adaptive Scenes
 - **[Returning Results as Events](app/src/main/java/com/example/nav3recipes/results/event)**: Returning results as events to content in another NavEntry.
 - **[Returning Results as State](app/src/main/java/com/example/nav3recipes/results/state)**: Returning results as state stored in a CompositionLocal.
 
+### Interop
+- **[Fragment and View Interop](app/src/main/java/com/example/nav3recipes/interop)**: Demonstrates how to use Fragment and Views in Navigation3.
+
 ### Future recipes
 The most upvoted [recipe requests]([url](https://github.com/android/nav3-recipes/issues?q=is%3Aissue%20state%3Aopen%20label%3Arecipe-request)) will be considered for implementation. Don't see your recipe? [File a request for one here](https://github.com/android/nav3-recipes/issues/new?template=1-recipe-request.md)
 

app/build.gradle.kts

@@ -80,6 +80,7 @@ dependencies {
     implementation(libs.androidx.lifecycle.viewmodel.navigation3)
     implementation(libs.androidx.material.icons.extended)
     implementation(libs.androidx.navigation2)
+    implementation(libs.androidx.fragment.compose)
     implementation(project(":common"))
 
     implementation(libs.hilt.android)

app/src/main/AndroidManifest.xml

@@ -189,6 +189,11 @@
             android:exported="true"
             android:theme="@style/Theme.Nav3Recipes">
         </activity>
+        <activity
+            android:name=".interop.InteropActivity"
+            android:exported="true"
+            android:theme="@style/Theme.Nav3Recipes">
+        </activity>
     </application>
 
 </manifest>

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

@@ -66,6 +66,7 @@ import com.example.nav3recipes.scenes.twopane.TwoPaneActivity
 import com.example.nav3recipes.sharedviewmodel.SharedViewModelActivity
 import com.example.nav3recipes.ui.setEdgeToEdgeConfig
 import com.example.nav3recipes.deeplink.advanced.AdvancedCreateDeepLinkActivity
+import com.example.nav3recipes.interop.InteropActivity
 
 /**
  * Activity to show all available recipes and allow users to launch each one.
@@ -118,6 +119,9 @@ private val recipes = listOf(
     Heading("Deeplink"),
     Recipe("Parse Intent", CreateDeepLinkActivity::class.java),
     Recipe("Synthetic BackStack", AdvancedCreateDeepLinkActivity::class.java),
+
+    Heading("Interop"),
+    Recipe("Fragment and View Interop", InteropActivity::class.java),
 )
 
 class RecipePickerActivity : ComponentActivity() {

app/src/main/java/com/example/nav3recipes/interop/InteropActivity.kt

@@ -0,0 +1,67 @@
+package com.example.nav3recipes.interop
+
+import android.annotation.SuppressLint
+import android.os.Bundle
+import android.widget.TextView
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.fragment.compose.AndroidFragment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.fragment.app.FragmentActivity
+import androidx.lifecycle.compose.dropUnlessResumed
+import androidx.navigation3.runtime.NavKey
+import androidx.navigation3.runtime.entryProvider
+import androidx.navigation3.runtime.rememberNavBackStack
+import androidx.navigation3.ui.NavDisplay
+import com.example.nav3recipes.ui.setEdgeToEdgeConfig
+import kotlinx.serialization.Serializable
+
+@Serializable
+private data object FragmentRoute : NavKey
+
+@Serializable
+private data class ViewRoute(val id: String) : NavKey
+
+class InteropActivity : FragmentActivity() {
+
+    @SuppressLint("SetTextI18n")
+    override fun onCreate(savedInstanceState: Bundle?) {
+        setEdgeToEdgeConfig()
+        super.onCreate(savedInstanceState)
+        setContent {
+            val backStack = rememberNavBackStack(FragmentRoute)
+
+            NavDisplay(
+                backStack = backStack,
+                onBack = { backStack.removeLastOrNull() },
+                entryProvider = entryProvider {
+                    entry<FragmentRoute> {
+                        Column(Modifier.fillMaxSize().wrapContentSize()) {
+                            AndroidFragment<MyCustomFragment>()
+                            Button(onClick = dropUnlessResumed {
+                                backStack.add(ViewRoute("123"))
+                            }) {
+                                Text("Go to View")
+                            }
+                        }
+                    }
+                    entry<ViewRoute> { key ->
+                        AndroidView(
+                            modifier = Modifier.fillMaxSize().wrapContentSize(),
+                            factory = { context ->
+                                TextView(context).apply {
+                                    text = "My View with key: ${key.id}"
+                                }
+                            }
+                        )
+                    }
+                }
+            )
+        }
+    }
+}

app/src/main/java/com/example/nav3recipes/interop/MyCustomFragment.kt

@@ -0,0 +1,22 @@
+package com.example.nav3recipes.interop
+
+import android.annotation.SuppressLint
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.fragment.app.Fragment
+
+class MyCustomFragment : Fragment() {
+    @SuppressLint("SetTextI18n")
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        return TextView(requireContext()).apply {
+            text = "My Fragment"
+        }
+    }
+}

app/src/main/java/com/example/nav3recipes/interop/README.md

@@ -0,0 +1,21 @@
+# Interop Recipe
+
+This recipe demonstrates how to use `AndroidFragment` and `AndroidView` within a Navigation3 application.
+
+## Features
+
+- **AndroidFragment**: Shows how to embed a Fragment inside a Composable destination.
+- **AndroidView**: Shows how to embed a classic Android View inside a Composable destination.
+
+## Key Components
+
+- `InteropActivity`: The main activity hosting the navigation.
+- `MyCustomFragment`: A simple Fragment used in the example.
+- `AndroidFragment<T>`: A Composable that hosts a Fragment.
+- `AndroidView`: A Composable that hosts an Android View.
+
+## Usage
+
+1.  Run the `InteropActivity`.
+2.  The initial screen shows a Fragment.
+3.  Click "Go to View" to navigate to a screen displaying a `TextView`.

gradle/libs.versions.toml

@@ -24,6 +24,7 @@ lifecycleRuntimeKtx = "2.10.0"
 lifecycleViewmodel = "2.10.0"
 activityCompose = "1.12.0"
 composeBom = "2025.11.00"
+fragment =  "1.8.9"
 navigation2 = "2.9.6"
 navigation3 = "1.0.0"
 material3 = "1.4.0"
@@ -51,6 +52,7 @@ androidx-material3 = { group = "androidx.compose.material3", name = "material3",
 androidx-material3-windowsizeclass = { group = "androidx.compose.material3", name = "material3-window-size-class", version.ref = "material3" }
 androidx-adaptive-layout = { group = "androidx.compose.material3.adaptive", name = "adaptive-layout" }
 androidx-hilt-navigation-compose         = { module = "androidx.hilt:hilt-navigation-compose", version.ref = "hiltNavigationCompose" }
+androidx-fragment-compose = { module = "androidx.fragment:fragment-compose", version.ref = "fragment" }
 androidx-lifecycle-viewmodel-navigation3 = { module = "androidx.lifecycle:lifecycle-viewmodel-navigation3", version.ref = "lifecycleViewmodel" }
 androidx-navigation2 = { module = "androidx.navigation:navigation-compose", version.ref = "navigation2" }
 androidx-navigation3-runtime = { module = "androidx.navigation3:navigation3-runtime", version.ref = "navigation3" }