Navigation With Jetpack Compose in Android

Navigate between composable functions, use custom objects as arguments, and more

Photo by takahiro taguchi on Unsplash.

In this article, you’ll learn how to implement navigation in Jetpack Compose. You’ll also learn how to pass primitive data types and custom data objects while navigating.

Note: Jetpack Compose recently moved to Beta. This means there will no longer be any drastic changes in the API structure. As such, it would be a great time to learn how to work with the next-generation UI kit for Android development. Navigation is one of the core tasks in Android development, so enjoy the article.

You need to install the Arctic Fox version of Android Studio Canary to use the Jetpack Compose Beta.

Introduction

Jetpack Compose is interoperable with Android components like Fragments. So if you have an existing project that you decided to migrate to Jetpack Compose, then there won’t be any changes in the navigation.

But if you decided to migrate the entire application without any Android components like Fragments or are creating a brand new application with only composables, then this article is for you.

Today, we will use the Navigation architecture component to implement navigation between screens. If you’re not familiar with it, I would highly recommend reading the following article:

JetPack Navigation Components in Android

Create an Application With Two Screens in Compose

Unlike in conventional Android development, Jetpack Compose doesn’t have any constraints like Fragments and Activities. We can use a composable function to represent a part of the screen or an entire screen. When you’re building a project from the ground up, I recommend using only composables because that’s how you can leverage the power of Compose.

To better understand the navigation in Jetpack Compose, let’s build a Subscription application with two screens…