Jetpack Compose Navigation: Secure Data Transfer and Screen-to-Screen Transitions

In this article, we will learn how to manage data transfer and transitions between screens using the Jetpack Compose Navigation library. Additionally, with the latest update to the Navigation library, we will make data transfer more secure and simpler.

Android Jetpack Compose: Creating Next-Generation User Interfaces

In mobile application development, the Android platform is becoming increasingly popular with each passing day. Along with this popularity, there is a growing need for new tools that enable developers to design user interfaces (UI) that are faster, easier, and more modern. This is where Jetpack Compose comes into play.

What is Jetpack? What Does Compoes Mean?

Compose means creating something from scratch or producing something new by assembling existing components. We can liken Jetpack Compose to LEGO. Just as we build toys by connecting LEGO pieces, with Jetpack Compose, we can create the desired pages by combining components like text, images, buttons, etc. This allows us to design modern and impressive pages more quickly and easily, with less code.

Step 1: Adding the Required Libraries:

First, we need to integrate the navigation and serialization libraries into our project.

Add the following lines to your "build.gradle.kts" (Module: app) file. Ensure that the serialization version matches the Kotlin version used in your project. Assuming you are using version 1.9.0, I am setting the serialization library version to 1.9.0 as well.

plugins {
kotlin("plugin.serialization") version “1.9.0”
}
dependencies {
implementation("androidx.navigation:navigation-compose:2.8.0-beta01")
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3")
}

Step 2: Defining Data Classes:

In our application, we use the @Serializable annotation to define data classes. This annotation allows the classes to be serialized, enabling data transfer between screens.

• Screens that do not receive data: We define such screens as object.
• Screens that receive data: We define such screens as data class.

Below, you can see how the ScreenA and ScreenB screens are defined:

import kotlinx.serialization.Serializable

@Serializable
object ScreenA

@Serializable
data class ScreenB(

val name: String,
val age: Int

)

• We defined the ScreenA class as an object because it does not receive any data from other pages.
• We defined the ScreenB class as a data class because it receives the name and age parameters from other pages

Step 3: Creating a Nav Controller:

The Nav Controller is one of the fundamental structures of our application's navigation system.

This structure manages the transitions between screens in our application and holds the navigation graph that defines the paths between screens.

val navController = rememberNavController()

Step 4: Creating a NavHost:

Now, let's create our navigation graph by setting up a NavHost.

First, we integrate our navController into the NavHost. Then, to specify the screen that will be displayed when the application is first launched, we use the startDestination parameter. Here, we set the screen we defined as ScreenA as the startDestination.

NavHost(

navController = navController,
startDestination = ScreenA

) {

// Adding Screen Here

}

Step 5: Defining Screens in the NavHost

In the previous step, we created the NavHost. Now, let's complete our application's navigation structure by defining our PageA and PageB screens in the NavHost.

Within the NavHost, we specify each screen using composable functions that define the content of our application. Each composable function represents a screen and takes navigation parameters. The following code demonstrates how to define PageA and PageB screens in the NavHost:

NavHost(

navController = navController,
startDestination = ScreenA

) {

// Defining PageA
composable<ScreenA> {
SayfaA(navController = navController)

}
// Defining PageB and passing data with the args parameter
composable<ScreenB> {

val args = it.toRoute<ScreenB>()
SayfaB(navController, args.name, args.age)

}
}

In this code:

• ScreenA: This composable represents the PageA screen. We send the navController parameter to our PageA screen.
• ScreenB: This composable represents the PageB screen. Additionally, we use the it.toRoute<ScreenB>() function to receive the arguments (data) sent while navigating to this page. We then send the navController, name, and age parameters to our PageB screen.

Step 6: Designing the PageA Screen:

In the PageA screen, there is a button that directs the user to the PageB screen:

@Composable
fun SayfaA(navController: NavController) {
Column(

modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally

) {
Button(onClick = {

//Action to be performed when the button is clicked
navController.navigate(ScreenB("ihsan",23))

}) {

Text(text = "Go to screen B")

}
}
}

This code block defines a button on the PageA screen. When the button is clicked, it directs the user to the PageB screen. The button’s content is indicated by the text "Go to screen B".

The action that will be executed when the button is clicked is performed with the following code line:

navController.navigate(ScreenB("ihsan", 23))

This code allows us to navigate from the current page to the page defined as ScreenB.

The key point to note here is the expression ScreenB("ihsan", 23). As you might remember, we defined the ScreenB page as a data class and specified that it would take two parameters: name and age.

Step 7: Designing the PageB Screen:

Now, we will create the PageB screen and use this screen to display the received data.

@Composable
fun SayfaB(name: String, age: Int) {
Column(

modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally

) {

Text(text = "Name: ${name}")
Text(text = "Age: ${age} years old")

}
}

In the code above, we created a composable function called PageB. This function displays the user's name and age on the screen.

In this article, we started from the basic steps, covering the definition of data classes, the creation of the NavController and NavHost, and how screens can transfer data and navigate to each other. We saw how data transfer occurs during the transition from PageA to PageB and how this data is used on PageB.

I hope this article has helped you understand how to manage data transfer and transitions between screens using the Jetpack Compose Navigation library. I’m İhsan Arslan, and I wish everyone good luck with their work!