Navigating within Your App

The apps we make need to move from one screen to the other, showing different content on these screens. So far, we have been making apps with only one screen. In this chapter, we will learn how to move from one screen to the other. We will learn how to use the Jetpack Compose Navigation library to navigate to different Jetpack Compose screens within our app. We will learn the tips and best practices for using this library. Also, we will cover how to pass arguments as we navigate to screens. Lastly, we will build on what we learned in Chapter 4, by handling navigation on large screens and foldables.

In this chapter, we’re going to cover the following main topics:

• Jetpack Navigation overview
• Navigating to Compose destinations
• Passing arguments to destinations
• Navigation in foldables and large screens

Technical requirements

To follow the instructions in this chapter, you will need to have Android Studio Hedgehog or later (https://developer.android.com/studio) downloaded.

You can use the previous chapter’s code to follow the instructions in this chapter. You can find the code for this chapter at https://github.com/PacktPublishing/Mastering-Kotlin-for-Android/tree/main/chapterseven.

Jetpack Navigation overview

The Jetpack Navigation library provides an API for handling complex navigation with ease while also following the principles of Android Jetpack. The library is available for both the old view system, which uses XML (https://developer.android.com/guide/navigation), and Jetpack Compose (https://developer.android.com/jetpack/compose/navigation). We will be learning about the latter in this chapter.

Still building on the Pets app we used in the previous chapter, we are going to navigate to a details screen that has a back button to the previous screen. We will also be passing data to the details screen.

To start with, we need to add the Jetpack Navigation Compose dependency to our project. Let’s add the following library inside the versions section in our libs.versions.toml file:

compose-navigation = "androidx.navigation:navigation-compose:2.7.2"

Next, we need to add the dependency to our app module’s build.gradle.kts file...

Navigating to Compose destinations

In this section, we will learn how to navigate to a details screen when we click on a pet item in the list. First, we need to create a new composable for PetDetailsScreen. Let us create a new file called PetDetailsScreen.kt and create the PetDetailsScreenContent composable as follows:

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun PetDetailsScreenContent(modifier: Modifier) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        AsyncImage(
   &...

Passing arguments to destinations

In our PetDetailsScreen, we need to remove the hardcoded cat IDs and tags and pass them from the PetList composable. Follow these steps:

1. Let us head over to the PetDetailsScreenContent composable inside the PetDetailsScreen.kt file and modify it as follows:

   @OptIn(ExperimentalLayoutApi::class)
   @Composable
   fun PetDetailsScreenContent(modifier: Modifier, cat: Cat) {
       Column(
           modifier = modifier
               .fillMaxSize()
               .padding(16.dp),
           verticalArrangement = Arrangement.Center,
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
           AsyncImage(
         ...

Navigation in foldables and large screens

In the Designing UIs for large screens and foldables section of Chapter 4, we learned about the WindowSize class and how we can make our apps responsive in foldable devices and large screens. In this section, we are going to make our Pets app responsive in foldable devices and large screens. We are going to make several changes, as follows:

• Add a bottom bar to PetsScreen, which will have several options.
• Add NavigationRail and NavigationDrawer, which will be used depending on the screen size.
• Observe the device’s foldable state and change the layout of the app depending on the foldable state.
• Depending on the screen size, we will also change the content type. On large screens, we will display the list of cats and the details of the selected cat side by side. On small screens, we will display the list of cats and the details of the selected cat on different screens.

Quite a lot of changes are required. The good...

Summary

In this chapter, we have learned how to use the Jetpack Compose Navigation library to navigate to different Jetpack Compose screens within our app. We have also learned tips and best practices for using this library. Additionally, we have covered how to pass arguments as we navigate to screens. Lastly, we have built on what we learned in Chapter 4, by handling navigation in large screens and foldables in detail.

We have created FavoritePetsScreen, but as of now it only has a Text label. In the next chapter, we will be adding functionality to persist data locally and retrieve that data locally too without any internet access. We will learn how to save our cute cat photos to Room, another Jetpack library for offline storage, and also add pets to our favorites list.