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.