Jetpack Compose — Navigation Component Android— Beginner Steps — Part 1 (Theory)

Almost every application in Android or Apple ecosystem consists of more than one screen and requires the application to be able to navigate between the different screens based on user selections and actions. Navigation between different screens is a primary part of user experience.

When I was trying to follow a tutorial for creating an Android application and the tutorial was not very particularly good at explaining how the navigation component was implemented in the tutorial. The instructor kept on saying that everything will be fine in the end. I didn't want everything to be fine in the end. I wanted to know how things work in the beginning itself so that I will know how to create a new application from scratch and be comfortable to add the components that are required for the purpose the application that I will be building.

Here I will focus on the Navigation component inside an Android application and a step by step follow through guide in Jetpack Compose — Android Studio. But before starting with the step by step guide, we would like to understand what navigation is and the main components required for navigation in android jetpack compose.

Navigation refers to the flow of screens within the application based on user interactions like button clicks and other allowed interactions.

The navigation component requires 3 pieces in its implementation within an android application:

• Navigation Controller — NavController
  The NavController is the central API for the Navigation component. It is stateful and keeps track of the back stack of screens(composables) that make up the screens in your app and the state of each screen. This is the very first thing that we would do in our application while starting to work with navigation.
• Navigation Host — NavHost
  Each NavController must be associated with a single NavHost composable. The NavHost links the NavController with a navigation graph that specifies the screen (composables) destinations that you should be able to navigate between. As you navigate between screens (composables), the content of the NavHost is automatically recomposed. Each destination in your navigation graph is associated with a route that directs to a screen (composable).
• Navigation Routes/Destinations
  Before starting with the Navigation component, it is important to have a clear idea about screen destinations and its respective routes keywords. Routes are unique string that correspond to each destination screen. It is also possible to pass an argument to the destination by appending it to the route.

Key Term: Route is a String that defines the path to your screen (composable). You can think of it as an implicit deep link that leads to a specific destination. Each destination should have a unique route.

This is the end of Part 1 (Theory) and lot of information have been taken from Android Developers page in particular from Principles of navigation. If you need help in setting up your first Jetpack compose project in Android Studio, follow the instructions from the article below:

Starting with Jetpack compose — Setting up Android Studio — Beginner Steps

Coming Soon: Jetpack Compose — Android — Navigation Component — Beginner Steps — Part 2 (Practice)

Thanks for reading. This is one of my initial posts and I would like to receive feedback on how I can improve and provide useful information to readers.