?

Android: Utilizing Jetpack Navigation With Jetpack Compose

Jetpack Navigation can be utilized in combination with Jetpack Compose through a simple bridge that allows full utilization of both tools. We will discuss how to set up a project that utilizes these two powerful Jetpack frameworks.

October 19, 2020 3 minute read

Jetpack Compose does not directly connect with Jetpack Navigation, a current standard for Application Navigation. The Compose team has developed a solution for navigation that does not require Jetpack Navigation. However, this solution is not bundled with the core Compose framework and requires you to know how to locate & maintain privately. With a small amount of setup, we can utilize Jetpack Navigation out of the box, and still maintain integrity with the Compose framework. Further, by following SOLID design principles we will be able to have a better separation of concerns within our code. 

To get the most out of this article we advise that you have a strong understanding of Jetpack Navigation and a basic understand of Jetpack Compose. In case you are wanting in this regard, we will provide a short description of both frameworks.

What is Jetpack Navigation?

Jetpack Navigation was released in 2019 and changed the way Android handled Navigation. It removed the need for multiple Activities, developer-managed Fragment Transactions and allowed for a visual representation of the navigational paths inside your application. 

A picture containing parking, photo, many, parked

Description automatically generated

As an added bonus with this framework, we can enable AndroidX Safe Args. This exposes Navigation Directions and Navigational Argument, and Android Studio will auto-generate these objects for us. Inside of your application, you will have an activity that contains a NavHostFragment, and this will be the container that Jetpack Navigation utilizes to change the UI displayed to the user. 

What is Jetpack Compose?

Jetpack Compose, currently in Alpha 3, is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs [1]. Compose shares many similarities with React & SwiftUI. Compose is a rapidly evolving framework and is subject to large changes. 

How do we link the two?

Before we get started, make sure you have the latest Canary version of Android Studio. As of Oct. 11, 2020, Jetpack Compose is not compatible with the current release version of Android Studio.

We utilized:

  • Android Canary 4.2
  • Jetpack Navigation version 2.3.0
  • Jetpack Compose version 1.0.0-alpha03
  • AndroidX Navigation Safeargs

If you do not have Jetpack navigation imported into your app yet, follow the guide to set up your project. 

Once you have set the Nav-graph on the main activity we can proceed with the linking. 

We created a basic fragment layout that could be utilized for all of our fragments. The key component here is the ComposeView.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/containerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout> 

From here we can create any number of Fragments that utilize this XML layout. 

Inside of the Fragment class that we create we are able to set our created Composable inside of the container. 

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return FragmentComposeContainerBinding.inflate(inflater, container, false).apply {
                containerView.setContent {
                    YourAppTheme {
                        YourComposeView()
                    }
                }
            }
            .root
    }

From here we just are able to utilize Jetpack Navigation as intended by building our flow from the nav_graph and having the Main Activity swap the Fragment via directions. 

Conclusion

The simplicity of the solution in comparison to the suggested solution from Android, speaks for itself. It allows us to still separate our business logic from our view layer as well as utilize both frameworks as intended. Further, by keeping the notion of Fragments in play we are able to utilize Androids ViewModel and LifeCycle with Koin injection.

Share this

Comments