Android Compose: App Navigation

Compose series

Part 1: Compose Basics (WIP)

Part 2: Android Compose: App Navigation

Part 3: Android Compose: App Navigation how to Pass Data Between Screens

Part 4: Android Compose: Building a Simple Image Loading App with MVVM

Part 5: Android Compose: Building a Modern Android App with MVVM, Navigation, and Retrofit

A straightforward example showcasing the use of a Navigation Controller in Jetpack Compose. This Jetpack Compose application demonstrates a clean and simple navigation structure, highlighting how to add two screens. Here’s an overview of Navigation Controller: https://developer.android.com/develop/ui/compose/navigation#testing-nav-host

How to run the code

Add the Gradle dependency:

implementation "androidx.navigation:navigation-compose:2.8.4"

Add the code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeNavigationApp()
        }
    }
}

@Composable
fun ComposeNavigationApp() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") { HomeScreen(navController) }
        composable("details") { DetailsScreen(navController) }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(navController: NavHostController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Home Screen") },
                colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.primary)
            )
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding),
            contentAlignment = Alignment.Center
        ) {
            Button(
                onClick = { navController.navigate("details") },
                modifier = Modifier.align(Alignment.BottomCenter)
            ) {
                Text("Go to Details")
            }
            HomeScreen()
        }

    }
}…