Android Builders Weblog: Asserting Jetpack Navigation 3

Posted by Don Turner – Developer Relations Engineer

Navigating between screens in your app needs to be easy, should not it? Nevertheless, constructing a sturdy, scalable, and pleasant navigation expertise could be a problem. For years, the Jetpack Navigation library has been a key device for builders, however because the Android UI panorama has developed, significantly with the rise of Jetpack Compose, we acknowledged the necessity for a brand new method.

Right now, we’re excited to introduce Jetpack Navigation 3, a brand new navigation library constructed from the bottom up particularly for Compose. For brevity, we’ll simply name it Nav3 any longer. This library embraces the declarative programming mannequin and Compose state as basic constructing blocks.

Why a brand new navigation library?

The unique Jetpack Navigation library (generally known as Nav2 because it’s on main model 2) was initially introduced again in 2018, earlier than AndroidX and earlier than Compose. Whereas it served its authentic targets nicely, we heard from you that it had a number of limitations when working with trendy Compose patterns.

One key limitation was that the again stack state may solely be noticed not directly. This meant there might be two sources of fact, doubtlessly resulting in an inconsistent utility state. Additionally, Nav2’s NavHost was designed to show solely a single vacation spot – the topmost one on the again stack – filling the accessible house. This made it tough to implement adaptive layouts that show a number of panes of content material concurrently, resembling a list-detail structure on massive screens.

Founding rules

Nav3 is constructed upon rules designed to supply higher flexibility and developer management:

• You personal the again stack: You, the developer, not the library, personal and management the again stack. It is a easy listing which is backed by Compose state. Particularly, Nav3 expects your again stack to be SnapshotStateList<T> the place T might be any sort you select. You possibly can navigate by including or eradicating gadgets (Ts), and state modifications are noticed and mirrored by Nav3’s UI.
• Get out of your approach: We heard that you do not like a navigation library to be a black field with inaccessible inside parts and state. Nav3 is designed to be open and extensible, offering you with constructing blocks and useful defaults. In order for you customized navigation habits you may drop all the way down to decrease layers and create your personal parts and customizations.
• Choose your constructing blocks: As a substitute of embedding all habits throughout the library, Nav3 affords smaller parts that you could mix to create extra complicated performance. We have additionally supplied a “recipes e-book” that exhibits how you can mix parts to resolve widespread navigation challenges.

Key options

• Adaptive layouts: A versatile structure API (named Scenes) lets you render a number of locations in the identical structure (for instance, a list-detail structure on massive display gadgets). This makes it simple to change between single and multi-pane layouts.
• Modularity: The API design permits navigation code to be break up throughout a number of modules. This improves construct occasions and permits clear separation of obligations between function modules.


Determine 3. Customized animations and predictive again are simple to implement, and straightforward to override for particular person locations.

Primary code instance

To provide you an concept of how Nav3 works, this is a brief code pattern.

// Outline the routes in your app and any arguments.
knowledge object Residence
knowledge class Product(val id: String)

// Create a again stack, specifying the route the app ought to begin with.
val backStack = bear in mind { mutableStateListOf<Any>(Residence) }

// A NavDisplay shows your again stack. Each time the again stack modifications, the show updates.
NavDisplay(
    backStack = backStack,

    // Specify what ought to occur when the consumer goes again
    onBack = { backStack.removeLastOrNull() },

    // An entry supplier converts a route right into a NavEntry which incorporates the content material for that route.
    entryProvider = { route ->
        when (route) {
            is Residence -> NavEntry(route) {
                Column {
                    Textual content("Welcome to Nav3")
                    Button(onClick = {
                        // To navigate to a brand new route, simply add that path to the again stack
                        backStack.add(Product("123"))
                    }) {
                        Textual content("Click on to navigate")
                    }
                }
            }
            is Product -> NavEntry(route) {
                Textual content("Product ${route.id} ")
            }
            else -> NavEntry(Unit) { Textual content("Unknown route: $route") }
        }
    }
)

Get began and supply suggestions

To get began, try the developer documentation, plus the recipes repository which gives examples for:

• widespread navigation UI, resembling a navigation rail or bar
• conditional navigation, resembling a login circulation
• customized layouts utilizing Scenes

We plan to supply code recipes, documentation and blogs for extra complicated use instances in future.

Nav3 is presently in alpha, which implies that the API is liable to vary primarily based on suggestions. You probably have any points, or want to present suggestions, please file a difficulty.

Nav3 affords a versatile and highly effective basis for constructing trendy navigation in your Compose purposes. We’re actually excited to see what you construct with it.

Discover this announcement and all Google I/O 2025 updates on io.google beginning Might 22.