1# Android Navigation Patterns
2 
3## Navigation Compose Basics
4 
5### Setup and Dependencies
6 
7```kotlin
8// build.gradle.kts
9dependencies {
10    implementation("androidx.navigation:navigation-compose:2.7.7")
11    // For type-safe navigation (recommended)
12    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3")
13}
14```
15 
16### Basic Navigation
17 
18```kotlin
19@Serializable
20object Home
21 
22@Serializable
23data class Detail(val itemId: String)
24 
25@Serializable
26object Settings
27 
28@Composable
29fun AppNavigation() {
30    val navController = rememberNavController()
31 
32    NavHost(
33        navController = navController,
34        startDestination = Home
35    ) {
36        composable<Home> {
37            HomeScreen(
38                onItemClick = { itemId ->
39                    navController.navigate(Detail(itemId))
40                },
41                onSettingsClick = {
42                    navController.navigate(Settings)
43                }
44            )
45        }
46 
47        composable<Detail> { backStackEntry ->
48            val detail: Detail = backStackEntry.toRoute()
49            DetailScreen(
50                itemId = detail.itemId,
51                onBack = { navController.popBackStack() }
52            )
53        }
54 
55        composable<Settings> {
56            SettingsScreen(
57                onBack = { navController.popBackStack() }
58            )
59        }
60    }
61}
62```
63 
64### Navigation with Arguments
65 
66```kotlin
67// Type-safe routes with arguments
68@Serializable
69data class ProductDetail(
70    val productId: String,
71    val category: String,
72    val fromSearch: Boolean = false
73)
74 
75@Serializable
76data class UserProfile(
77    val userId: Long
78)
79 
80@Composable
81fun NavigationWithArgs() {
82    val navController = rememberNavController()
83 
84    NavHost(navController = navController, startDestination = Home) {
85        composable<Home> {
86            HomeScreen(
87                onProductClick = { productId, category ->
88                    navController.navigate(
89                        ProductDetail(
90                            productId = productId,
91                            category = category,
92                            fromSearch = false
93                        )
94                    )
95                }
96            )
97        }
98 
99        composable<ProductDetail> { backStackEntry ->
100            val args: ProductDetail = backStackEntry.toRoute()
101            ProductDetailScreen(
102                productId = args.productId,
103                category = args.category,
104                showBackToSearch = args.fromSearch
105            )
106        }
107 
108        composable<UserProfile> { backStackEntry ->
109            val args: UserProfile = backStackEntry.toRoute()
110            UserProfileScreen(userId = args.userId)
111        }
112    }
113}
114```
115 
116## Bottom Navigation
117 
118### Standard Implementation
119 
120```kotlin
121enum class BottomNavDestination(
122    val route: Any,
123    val icon: ImageVector,
124    val label: String
125) {
126    HOME(Home, Icons.Default.Home, "Home"),
127    SEARCH(Search, Icons.Default.Search, "Search"),
128    FAVORITES(Favorites, Icons.Default.Favorite, "Favorites"),
129    PROFILE(Profile, Icons.Default.Person, "Profile")
130}
131 
132@Composable
133fun MainScreenWithBottomNav() {
134    val navController = rememberNavController()
135    val navBackStackEntry by navController.currentBackStackEntryAsState()
136    val currentDestination = navBackStackEntry?.destination
137 
138    Scaffold(
139        bottomBar = {
140            NavigationBar {
141                BottomNavDestination.entries.forEach { destination ->
142                    NavigationBarItem(
143                        icon = {
144                            Icon(destination.icon, contentDescription = destination.label)
145                        },
146                        label = { Text(destination.label) },
147                        selected = currentDestination?.hasRoute(destination.route::class) == true,
148                        onClick = {
149                            navController.navigate(destination.route) {
150                                // Pop up to start destination to avoid building up stack
151                                popUpTo(navController.graph.findStartDestination().id) {
152                                    saveState = true
153                                }
154                                // Avoid multiple copies of same destination
155                                launchSingleTop = true
156                                // Restore state when reselecting
157                                restoreState = true
158                            }
159                        }
160                    )
161                }
162            }
163        }
164    ) { innerPadding ->
165        NavHost(
166            navController = navController,
167            startDestination = Home,
168            modifier = Modifier.padding(innerPadding)
169        ) {
170            composable<Home> { HomeScreen() }
171            composable<Search> { SearchScreen() }
172            composable<Favorites> { FavoritesScreen() }
173            composable<Profile> { ProfileScreen() }
174        }
175    }
176}
177```
178 
179### Bottom Nav with Badges
180 
181```kotlin
182@Composable
183fun BottomNavWithBadges(
184    cartCount: Int,
185    notificationCount: Int
186) {
187    NavigationBar {
188        NavigationBarItem(
189            icon = { Icon(Icons.Default.Home, null) },
190            label = { Text("Home") },
191            selected = true,
192            onClick = { }
193        )
194 
195        NavigationBarItem(
196            icon = {
197                BadgedBox(
198                    badge = {
199                        if (cartCount > 0) {
200                            Badge { Text("$cartCount") }
201                        }
202                    }
203                ) {
204                    Icon(Icons.Default.ShoppingCart, null)
205                }
206            },
207            label = { Text("Cart") },
208            selected = false,
209            onClick = { }
210        )
211 
212        NavigationBarItem(
213            icon = {
214                BadgedBox(
215                    badge = {
216                        if (notificationCount > 0) {
217                            Badge {
218                                Text(
219                                    if (notificationCount > 99) "99+"
220                                    else "$notificationCount"
221                                )
222                            }
223                        }
224                    }
225                ) {
226                    Icon(Icons.Default.Notifications, null)
227                }
228            },
229            label = { Text("Alerts") },
230            selected = false,
231            onClick = { }
232        )
233    }
234}
235```
236 
237## Navigation Drawer
238 
239### Modal Navigation Drawer
240 
241```kotlin
242@Composable
243fun ModalDrawerNavigation() {
244    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
245    val scope = rememberCoroutineScope()
246    var selectedItem by remember { mutableStateOf(0) }
247 
248    val items = listOf(
249        DrawerItem(Icons.Default.Home, "Home"),
250        DrawerItem(Icons.Default.Settings, "Settings"),
251        DrawerItem(Icons.Default.Info, "About"),
252        DrawerItem(Icons.Default.Help, "Help")
253    )
254 
255    ModalNavigationDrawer(
256        drawerState = drawerState,
257        drawerContent = {
258            ModalDrawerSheet {
259                // Header
260                Box(
261                    modifier = Modifier
262                        .fillMaxWidth()
263                        .height(180.dp)
264                        .background(MaterialTheme.colorScheme.primaryContainer),
265                    contentAlignment = Alignment.BottomStart
266                ) {
267                    Column(modifier = Modifier.padding(16.dp)) {
268                        AsyncImage(
269                            model = "avatar_url",
270                            contentDescription = "Profile",
271                            modifier = Modifier
272                                .size(64.dp)
273                                .clip(CircleShape)
274                        )
275                        Spacer(Modifier.height(8.dp))
276                        Text(
277                            "John Doe",
278                            style = MaterialTheme.typography.titleMedium
279                        )
280                        Text(
281                            "[email protected]",
282                            style = MaterialTheme.typography.bodySmall
283                        )
284                    }
285                }
286 
287                Spacer(Modifier.height(12.dp))
288 
289                // Navigation items
290                items.forEachIndexed { index, item ->
291                    NavigationDrawerItem(
292                        icon = { Icon(item.icon, contentDescription = null) },
293                        label = { Text(item.label) },
294                        selected = index == selectedItem,
295                        onClick = {
296                            selectedItem = index
297                            scope.launch { drawerState.close() }
298                        },
299                        modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
300                    )
301                }
302 
303                Spacer(Modifier.weight(1f))
304 
305                // Footer
306                HorizontalDivider()
307                NavigationDrawerItem(
308                    icon = { Icon(Icons.Default.Logout, null) },
309                    label = { Text("Sign Out") },
310                    selected = false,
311                    onClick = { },
312                    modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
313                )
314                Spacer(Modifier.height(12.dp))
315            }
316        }
317    ) {
318        Scaffold(
319            topBar = {
320                TopAppBar(
321                    title = { Text(items[selectedItem].label) },
322                    navigationIcon = {
323                        IconButton(onClick = { scope.launch { drawerState.open() } }) {
324                            Icon(Icons.Default.Menu, "Open drawer")
325                        }
326                    }
327                )
328            }
329        ) { padding ->
330            Content(modifier = Modifier.padding(padding))
331        }
332    }
333}
334 
335data class DrawerItem(val icon: ImageVector, val label: String)
336```
337 
338### Permanent Navigation Drawer (Tablets)
339 
340```kotlin
341@Composable
342fun PermanentDrawerLayout() {
343    PermanentNavigationDrawer(
344        drawerContent = {
345            PermanentDrawerSheet(
346                modifier = Modifier.width(240.dp)
347            ) {
348                Spacer(Modifier.height(12.dp))
349                Text(
350                    "App Name",
351                    modifier = Modifier.padding(16.dp),
352                    style = MaterialTheme.typography.titleLarge
353                )
354                HorizontalDivider()
355 
356                drawerItems.forEach { item ->
357                    NavigationDrawerItem(
358                        icon = { Icon(item.icon, null) },
359                        label = { Text(item.label) },
360                        selected = item == selectedItem,
361                        onClick = { selectedItem = item },
362                        modifier = Modifier.padding(horizontal = 12.dp)
363                    )
364                }
365            }
366        }
367    ) {
368        // Main content takes remaining space
369        MainContent()
370    }
371}
372```
373 
374## Navigation Rail
375 
376```kotlin
377@Composable
378fun NavigationRailLayout() {
379    var selectedItem by remember { mutableStateOf(0) }
380 
381    Row(modifier = Modifier.fillMaxSize()) {
382        NavigationRail(
383            header = {
384                FloatingActionButton(
385                    onClick = { },
386                    elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
387                ) {
388                    Icon(Icons.Default.Add, "Create")
389                }
390            }
391        ) {
392            Spacer(Modifier.weight(1f))
393 
394            railItems.forEachIndexed { index, item ->
395                NavigationRailItem(
396                    icon = { Icon(item.icon, null) },
397                    label = { Text(item.label) },
398                    selected = selectedItem == index,
399                    onClick = { selectedItem = index }
400                )
401            }
402 
403            Spacer(Modifier.weight(1f))
404        }
405 
406        // Main content
407        Box(
408            modifier = Modifier
409                .weight(1f)
410                .fillMaxHeight()
411        ) {
412            when (selectedItem) {
413                0 -> HomeContent()
414                1 -> SearchContent()
415                2 -> ProfileContent()
416            }
417        }
418    }
419}
420```
421 
422## Deep Linking
423 
424### Basic Deep Link Setup
425 
426```kotlin
427// In AndroidManifest.xml
428// <intent-filter>
429//     <action android:name="android.intent.action.VIEW" />
430//     <category android:name="android.intent.category.DEFAULT" />
431//     <category android:name="android.intent.category.BROWSABLE" />
432//     <data android:scheme="myapp" />
433//     <data android:scheme="https" android:host="myapp.com" />
434// </intent-filter>
435 
436@Composable
437fun DeepLinkNavigation() {
438    val navController = rememberNavController()
439 
440    NavHost(
441        navController = navController,
442        startDestination = Home
443    ) {
444        composable<Home> {
445            HomeScreen()
446        }
447 
448        composable<ProductDetail>(
449            deepLinks = listOf(
450                navDeepLink<ProductDetail>(
451                    basePath = "https://myapp.com/product"
452                ),
453                navDeepLink<ProductDetail>(
454                    basePath = "myapp://product"
455                )
456            )
457        ) { backStackEntry ->
458            val args: ProductDetail = backStackEntry.toRoute()
459            ProductDetailScreen(productId = args.productId)
460        }
461 
462        composable<UserProfile>(
463            deepLinks = listOf(
464                navDeepLink<UserProfile>(
465                    basePath = "https://myapp.com/user"
466                )
467            )
468        ) { backStackEntry ->
469            val args: UserProfile = backStackEntry.toRoute()
470            UserProfileScreen(userId = args.userId)
471        }
472    }
473}
474```
475 
476### Handling Intent in Activity
477 
478```kotlin
479class MainActivity : ComponentActivity() {
480    override fun onCreate(savedInstanceState: Bundle?) {
481        super.onCreate(savedInstanceState)
482 
483        setContent {
484            AppTheme {
485                val navController = rememberNavController()
486 
487                // Handle deep link from intent
488                LaunchedEffect(Unit) {
489                    intent?.data?.let { uri ->
490                        navController.handleDeepLink(intent)
491                    }
492                }
493 
494                AppNavigation(navController = navController)
495            }
496        }
497    }
498 
499    override fun onNewIntent(intent: Intent) {
500        super.onNewIntent(intent)
501        // Handle new intents when activity is already running
502        setIntent(intent)
503    }
504}
505```
506 
507## Nested Navigation
508 
509```kotlin
510@Composable
511fun NestedNavigation() {
512    val navController = rememberNavController()
513 
514    NavHost(navController = navController, startDestination = MainGraph) {
515        // Main graph with bottom navigation
516        navigation<MainGraph>(startDestination = Home) {
517            composable<Home> {
518                HomeScreen(
519                    onItemClick = { navController.navigate(Detail(it)) }
520                )
521            }
522            composable<Search> { SearchScreen() }
523            composable<Profile> {
524                ProfileScreen(
525                    onSettingsClick = { navController.navigate(SettingsGraph) }
526                )
527            }
528        }
529 
530        // Nested detail graph
531        composable<Detail> { backStackEntry ->
532            val args: Detail = backStackEntry.toRoute()
533            DetailScreen(itemId = args.itemId)
534        }
535 
536        // Separate settings graph (full screen, no bottom nav)
537        navigation<SettingsGraph>(startDestination = SettingsMain) {
538            composable<SettingsMain> {
539                SettingsScreen(
540                    onAccountClick = { navController.navigate(AccountSettings) },
541                    onNotificationsClick = { navController.navigate(NotificationSettings) }
542                )
543            }
544            composable<AccountSettings> { AccountSettingsScreen() }
545            composable<NotificationSettings> { NotificationSettingsScreen() }
546        }
547    }
548}
549 
550@Serializable object MainGraph
551@Serializable object SettingsGraph
552@Serializable object SettingsMain
553@Serializable object AccountSettings
554@Serializable object NotificationSettings
555```
556 
557## Navigation State Management
558 
559### ViewModel Integration
560 
561```kotlin
562@HiltViewModel
563class NavigationViewModel @Inject constructor(
564    private val savedStateHandle: SavedStateHandle
565) : ViewModel() {
566 
567    private val _navigationEvents = MutableSharedFlow<NavigationEvent>()
568    val navigationEvents = _navigationEvents.asSharedFlow()
569 
570    fun navigateToDetail(itemId: String) {
571        viewModelScope.launch {
572            _navigationEvents.emit(NavigationEvent.NavigateToDetail(itemId))
573        }
574    }
575 
576    fun navigateBack() {
577        viewModelScope.launch {
578            _navigationEvents.emit(NavigationEvent.NavigateBack)
579        }
580    }
581}
582 
583sealed class NavigationEvent {
584    data class NavigateToDetail(val itemId: String) : NavigationEvent()
585    object NavigateBack : NavigationEvent()
586}
587 
588@Composable
589fun NavigationHandler(
590    navController: NavHostController,
591    viewModel: NavigationViewModel = hiltViewModel()
592) {
593    LaunchedEffect(Unit) {
594        viewModel.navigationEvents.collect { event ->
595            when (event) {
596                is NavigationEvent.NavigateToDetail -> {
597                    navController.navigate(Detail(event.itemId))
598                }
599                NavigationEvent.NavigateBack -> {
600                    navController.popBackStack()
601                }
602            }
603        }
604    }
605}
606```
607 
608### Back Handler
609 
610```kotlin
611@Composable
612fun ScreenWithBackHandler(
613    onBack: () -> Unit
614) {
615    var showExitDialog by remember { mutableStateOf(false) }
616 
617    // Intercept back press
618    BackHandler {
619        showExitDialog = true
620    }
621 
622    if (showExitDialog) {
623        AlertDialog(
624            onDismissRequest = { showExitDialog = false },
625            title = { Text("Exit App?") },
626            text = { Text("Are you sure you want to exit?") },
627            confirmButton = {
628                TextButton(onClick = onBack) {
629                    Text("Exit")
630                }
631            },
632            dismissButton = {
633                TextButton(onClick = { showExitDialog = false }) {
634                    Text("Cancel")
635                }
636            }
637        )
638    }
639 
640    // Screen content
641    Content()
642}
643```
644 
645## Navigation Animations
646 
647```kotlin
648@Composable
649fun AnimatedNavigation() {
650    val navController = rememberNavController()
651 
652    NavHost(
653        navController = navController,
654        startDestination = Home,
655        enterTransition = {
656            slideIntoContainer(
657                towards = AnimatedContentTransitionScope.SlideDirection.Left,
658                animationSpec = tween(300)
659            )
660        },
661        exitTransition = {
662            slideOutOfContainer(
663                towards = AnimatedContentTransitionScope.SlideDirection.Left,
664                animationSpec = tween(300)
665            )
666        },
667        popEnterTransition = {
668            slideIntoContainer(
669                towards = AnimatedContentTransitionScope.SlideDirection.Right,
670                animationSpec = tween(300)
671            )
672        },
673        popExitTransition = {
674            slideOutOfContainer(
675                towards = AnimatedContentTransitionScope.SlideDirection.Right,
676                animationSpec = tween(300)
677            )
678        }
679    ) {
680        composable<Home> {
681            HomeScreen()
682        }
683 
684        composable<Detail>(
685            // Custom transition for specific route
686            enterTransition = {
687                fadeIn(animationSpec = tween(500)) +
688                    scaleIn(initialScale = 0.9f, animationSpec = tween(500))
689            },
690            exitTransition = {
691                fadeOut(animationSpec = tween(500))
692            }
693        ) {
694            DetailScreen()
695        }
696    }
697}
698```
699