This is Part 2 of the Jetpack Compose — Android — Navigation Component — Beginner Steps. The Part 1 of this article introduced us to navigation and and the 3 pieces of Navigation component in Jetpack compose.
The navigation component requires 3 pieces in its implementation within an android application:
- Navigation Controller — NavController
- Navigation Host — NavHost
- Navigation Routes/Destinations
Without further adieu lets' start with the steps for implementing Navigation in Jetpack compose.
Assumption: I’m assuming that you have Android Studio and Java 11 installed in your windows or apple personals machines. I’m also assuming that you have the knowledge of creating a new Android project using the Android Studio and selecting the ‘Empty Compose Activity’.
Table of Contents
∘ Steps to implementing Navigation in Jetpack compose:
∘ 1. Create an Android Project — Navigation Guide
∘ 2. Cleaning up the Project
∘ 3. Adding the Navigation library dependency to the project
∘ 4. Thinking & Designing the application route flow
∘ 5. Create a navigation routes map (sealed class)
∘ 6. Create a Navigation Controller
· Creating the Screens (Destinations)
∘ 7. Create Entry Screen
∘ 8. Create the Login Screen
∘ 9. Create the Register Screen
∘ 10. Create the Welcome Screen
∘ 11. Create the Logout Screen
∘ All UI screens preview
∘ 12. Create and Invoke the Navigation Host
∘ 13. Adding Navigation instructions to button clicks
∘ 14. Extract & Pass username from navigation back stage entry
∘ 15. Wow! We are finally done. Testing Time
· Conclusion
Steps to implementing Navigation in Jetpack compose:
1. Create an Android Project — Navigation Guide
Create a new Android application using the ‘Empty Compose Activity’ with project name ‘Navigation Guide’. If you need any help in setting up Android Studio and create you first application, use the guid below.
2. Cleaning up the Project
The ‘Empty Compose Activity’ Android project gets created with some broiler plate code that displays ‘Hello Android’. We will cleanup the Greeting function as well as the Preview composable and then we will add a new empty composable named MainScreen(). After the cleanup the code in MainActivity.kt will look like this.
3. Adding the Navigation library dependency to the project
For using the navigation component, we have to add additional project dependency in the project build.gradle file. This allows the Android Studio project to download the code packages required to support developing the navigation component in our project.
After adding the dependency in the build.gradle, click on the ‘Sync Now’ button on the top right of the android studio editor. The ‘Sync Now’ process starts a gradle task that looks through all of the project dependencies listed in your build.gradle file and tries to download the specified version from the configured repositories. The default configuered repositories are google() and mavenCentral().
Read more about Gradle + Groovy Dependency Management using below link:
4. Thinking & Designing the application route flow
So, before we start coding for navigation or creating screen, we have to think through our application route flow. I have created a wireframe map that can help understand the flow and how the navigation routes and destination is expected to function.
From the wireframe flow, we can see that there are 5 different destinations that needs routes for navigation.
- Entry Screen
- Login
- Register
- Welcome (after Login/Register)
- Logout
This is a very simple and straight forward navigation map that we will create. The Entry Screen have two destinations, the Login screen and Registration screen based on which button or link was clicked by the user. From both the Login and Register screen the user will be navigating to the Welcome screen after the user clicks the ‘Continue’ or ‘Register’ button. The welcome screen allows the user to click the ‘Log Out’ button to navigate to the Logout screen and then navigate back to the Login screen by clicking the ‘Log In’ button.
5. Create a navigation routes map (sealed class)
We now know our navigation destination screens from the step above. To starting implementing the navigation in our project we will create the routes for our five destinations. For defining the routes, we will use a sealed class which is very similar to enum class in Java. Read more about sealed class here
Create a new package named navigation
Right click the navigationguidepackage -> New -> Package
Name the package navigation
Create a class named Navigation Routes a
Right click the navigation packages -> New -> Kotlin Class/File
Select Sealed Class and name the class NavigationGuides
Once the Sealed Class is created, we will create the destination routes as follows:
6. Create a Navigation Controller
The NavController is the central API for the Navigation component. It is stateful and keeps track of the back stack of composables that make up the screens in your app and the state of each screen.
You can create a NavController by using the rememberNavController() method in our MainActivity.kt:
Creating the Screens (Destinations)
There are five destinations / screens that we need create before it can be used for navigation. We will create the screens in a new package namesd screens inside the package com.example.navigationguide.ui as shown below.
Once the package is created, we are ready to start creating the ui screens. For each of the ui screens, we will be creation 5 different Kotlin files.
7. Create Entry Screen
To create the Entry composable, right click the package com.example.navigationguide.ui.screens -> New -> Kotlin Class/File and name it Entry.kt
The Entry screen with have 3 components:
- Text component that says ‘Welcome to Navigation Guide’
- A ‘Log In’ Button component
- A ‘Register’ hyperlink text component
8. Create the Login Screen
To create the Login composable, right click the package com.example.navigationguide.ui.screens -> New -> Kotlin Class/File and name it Login.kt
The Login screen with have 3 components:
- Text component that says ‘Log In’
- Text Input Field — Email Address
- Text Input Field — Username
- A ‘Continue’ button to navigate to Welcome screen
9. Create the Register Screen
To create the Register composable, right click the package com.example.navigationguide.ui.screens -> New -> Kotlin Class/File and name it Register.kt
The Register screen with have 3 components:
- Text component that says ‘Registration’
- Text Input Field — Email Address
- Text Input Field — Username
- Text Input Field — First Name
- Text Input Field — Last Name
- A ‘Register’ button to navigate to Welcome screen
10. Create the Welcome Screen
To create the Welcome composable, right click the package com.example.navigationguide.ui.screens -> New -> Kotlin Class/File and name it Welcome.kt
The Welcome screen with have 3 components:
- Text component that says ‘Welcome’
- Text component to display the Username from previous screen
- A ‘Log Out’ button to navigate to Logout screen
11. Create the Logout Screen
To create the Logout composable, right click the package com.example.navigationguide.ui.screens -> New -> Kotlin Class/File and name it Logout.kt
The Logout screen with have 3 components:
- Text component that says ‘Thanks You are now LOGGED OUT’
- A ‘Log In’ button to navigate back to Log In screen
All UI screens preview
The build and refresh will show each of the screen that we coded about in the Preview Pane. The preview screens shows us that we were able to create the screens very much like the wireframes that we had initially drawn.
12. Create and Invoke the Navigation Host
The routes as well as the screens have now been created, now it is time to create the Navigation Host (NavHost) that links the NavController with the navigation graph that we created in the search class NavigationRoutes.
We will create a new Kotlin file named SetupNavigation.kt in the package com.example.todocompose.navigation and define a new Composable function that take the NavController as a input.
As you can see from the code, the Welcome composable expects the username from either the Registration screen or the Login screen, but we have not added code to pass it while invoking the Welcome composable. We will first define the composable for NavHost. The sealed class NavigationRoutes is used here create a navigation graph for the NavHost to invoke the screen and navigate to the right composable.
Once the SetupNavigation composable function is defined, we will add it to the MainActivity Class to link the NavHostController to the NavHost.
13. Adding Navigation instructions to button clicks
Every button in each of the 5 screen initiates navigation in our application. The Button components have a onClick attribute that we will use to navigate to the destination using the navigate() method in the instance of NavHostController. Starting with Entry.kt, we will add the navigation code to the onClick property using the respective routes.
The Welcome screen expects to receive the username from the Login screen and Register screen to display the welcome message. This username needs to be appended to the route in the navigate() method call. The Welcome screen can access the appended username value from the route url using the navigation back stage entry.
14. Extract & Pass username from navigation back stage entry to Welcome screen
The Login screen and Register screen is expected to pass on the username from the respective text fields and append to the routing url. The NavHost that was implemented in SetupNavigation.kt can access the username from the navigation back stage entry and pass the username into the Welcome composable.
15. Wow! We are finally done. Testing Time
Now we are done with all of the basic coding. Its time to test our code and see the navigation component in action.
Conclusion
This whole exercise of writing this story along with my learning has been really satisfying. I was unable to find a good step by step guide and explanation of implementing navigation in Jetpack compose and I started to write the story to help anyone else who is interested to learn the same.
Following are the next step by step stories in my plan:
- Room Database with Jetpack compose
- Dependency Injection using Dagger Hilt in Andriod Jetpack project
- Navigation Drawer with Jetpack compose
Please feel free to ask questions or provide feedback regarding this story. I’m learning and always willing to make changes and adapt based on feedback and suggestions. Hopefully some of this will be help some readers while we all continue to learn together.
All the best!! and please ask questions.
