Android Day 24 Multi-Screen Navigation

In order to use navigation, we need to import some dependency:

dependencies {
  val nav_version = "2.7.7"

  // Java language implementation
  implementation("androidx.navigation:navigation-fragment:$nav_version")
  implementation("androidx.navigation:navigation-ui:$nav_version")

  // Kotlin
  implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")
  implementation("androidx.navigation:navigation-ui-ktx:$nav_version")

  // Feature module Support
  implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version")

  // Testing Navigation
  androidTestImplementation("androidx.navigation:navigation-testing:$nav_version")

  // Jetpack Compose Integration
  implementation("androidx.navigation:navigation-compose:$nav_version")
}

Since we are building a kotlin project, let's just use Kotlin code.

Then at the main file:

package com.williamjiamin.multiscreennavigationdemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.williamjiamin.multiscreennavigationdemo.ui.theme.MultiScreenNavigationDemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MultiScreenNavigationDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MyApp()
                }
            }
        }
    }
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "first") {
        composable("first") { FirstScreen{
            navController.navigate("second")
        } }
        composable("second") { SecondScreen{
            navController.navigate("third")
        } }
        composable("third") { ThirdScreen{
            navController.navigate("fourth")
        } }
        composable("fourth") { FourthScreen{
            navController.navigate("first")
        } }
    }
}

We add code like this :

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "first") {
        composable("first") { FirstScreen{
            navController.navigate("second")
        } }
        composable("second") { SecondScreen{
            navController.navigate("third")
        } }
        composable("third") { ThirdScreen{
            navController.navigate("fourth")
        } }
        composable("fourth") { FourthScreen{
            navController.navigate("first")
        } }
    }
}

And it will give us error because we need to add some code at different screen:

package com.williamjiamin.multiscreennavigationdemo

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.williamjiamin.multiscreennavigationdemo.ui.theme.MultiScreenNavigationDemoTheme

@Composable
fun FirstScreen(navigationToSecondScreen: () -> Unit) {

    val email = remember { mutableStateOf("")

    }

    Column (
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center

    ) {
        Text(text = "First Screen", fontFamily = FontFamily.Cursive, fontSize = 24.sp)
        Spacer(modifier = Modifier.padding(16.dp))
        OutlinedTextField(value = email.value , onValueChange = {
            email.value = it
        } )

        Spacer(modifier = Modifier.padding(16.dp))

        Button(onClick = {
            navigationToSecondScreen()
        }) {
            Text("Go to Second Screen")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun FirstScreenPreview() {
    MultiScreenNavigationDemoTheme {
        FirstScreen({})
    }
}

Pay attention here we use FirstScreen({}) to make preview work.