Deeplink friendly app with jetpack compose navigation

Photo by Cassidy James Blaede on Unsplash

jetpack compose is quite interesting so easy to setup deeplink here

Jepack compose is a new technology developed by Google after more than 10 years using the same technology, namely xml, of course it is not easy to switch to new technology.

Jetpack compose is a UI toolkit where we can create User interfaces with only one programming language, kotlin, this is very interesting because currently declarative programming is popular, so we can see the implementation of jetpack compose which is similar to other programming declaratives such as Flutter Swift UI, React Native.

How declarative UI look like same

Actually while using xml with Navigation is quite easy for set deeplink but in jetpack compose much easier.

let start to explore how this is work

First Install the depedency, then sync gradle

dependencies {
    def nav_version = "2.5.2"

    implementation "androidx.navigation:navigation-compose:$nav_version"
}

then add url that we want to be deeplink in AndroidManifest.xml, we can add more than one deeplink address.

<intent-filter>
    <action android:name="android.intent.action.VIEW" />

    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data
        android:host="www.pokedexdit.com"
        android:scheme="http" />
</intent-filter>

setup deeplink in android manifest

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 your composable:

val navController = rememberNavController()

Creating the NavHost requires the NavController previously created via rememberNavController() and the route of the starting destination of your graph.

NavHost creation uses the lambda syntax from the Navigation Kotlin DSL to construct your navigation graph. You can add to your navigation structure by using the composable() method. This method requires that you provide a route and the composable that should be linked to the destination:

NavHost(
    navController = navController,
    startDestination = Screen.HomeScreen.route
) {
    composable(route = Screen.HomeScreen.route) {
        HomeScreen(navController)
    }
    composable(route = Screen.PokemonListScreen.route) {
        PokemonListScreen()
    }
    composable(
        route = Screen.PokemonDetailScreen.route + "/{menu}"
    ) {
        val menu = it.arguments?.getString("menu")
        PokemonDetailScreen(menu)
    }
}

Navigation Compose supports implicit deep links that can be defined as part of the composable() function as well. Its deepLinks parameter accepts a list of NavDeepLinks which can be quickly created using the navDeepLink method:

private val uri = "https://www.pokedexdit.com"
composable(
    route = Screen.PokemonDetailScreen.route + "/{menu}",
    deepLinks = listOf(
        navDeepLink { uriPattern = "$uri/detail/{menu}" })
) {
    val menu = it.arguments?.getString("menu")
    PokemonDetailScreen(menu)
}

we can see here deeplink using collection list for the value, so we can create multiple deeplink, also we can pass argument here

here is the result

result deeplink

Google always make better developer experience, one of the way google did with release jetpack compose, so interesting because so many developer learn about this.

You should be far more concerned with your current trajectory than with your current results

If you would like to see how i am implement this here is github link

GitHub - adityaputra11/Pokedex: Pokedex App using Pokedex API and Jetpack Compose