Instruction

The Purpose of Deep Links

Here’s a real world example to understand the purpose of deep links. Suppose you’re browsing through a social media app and come across an advertisement for of a pair of shoes you really like and would like to check out further or perhaps even buy. So you click the advertisement, and it takes you to the brand’s webpage or app screen with the product listing and description. You can then simply check the details, select preferred color and size, and proceed to buy the product.

Alternatively, imagine if clicking the advertisement only redirected you to the brand’s website or app homepage, and you had to manually search for the product. Wouldn’t it be inconvenient and more time-consuming?

This is where deep links come in handy. They allow the user to be directly taken to specific section(s) of a website or app, based on prior input, actions, or context, producing a smoother user-experience journey.

Setting Up Deep Links

The navigation component has support for defining deep links as part of the composable() function that defines a destination in the graph. It takes in a parameter named deepLinks that accepts a list of NavDeepLink objects. You can easily create a NavDeepLink object using the navDeepLink() function defined in the navigation component library.

The navDeepLink() function uses the NavDeepLinkDslBuilder class to define a deep link’s three elements: — uriPattern: This is the uri pattern that will trigger the deep link externally or in the app. — action: Defines the action for the deep link. — mimeType: Defines the mime type if applicable. For instance, in cases when the deep link associates to any file(s), video(s), image(s), audio(s), etc.

Note that although all these elements are nullable, at least one of these elements must not be null to define a valid deep link. Otherwise, an IllegalStateException is thrown.

Here’s a sample code snippet of a deep link defined for the example described above:

navDeepLink {
  uriPattern = "https://www.some-ecommerce.com/productId={productId}"
  action = Intent.ACTION_VIEW
}

To tie the defined deep link to a destination defined in the graph, pass it as part of the deepLinks list parameter in the composable() function.

composable(
  "product-listing-route",
  deepLinks = listOf(navDeepLink {
    uriPattern = "https://www.some-ecommerce.com/productId={productId}"
    action = Intent.ACTION_VIEW
  })
) { ... }

The deepLinks parameter accepts a list because there can be multiple deep links that map to the same destination. Additionally, note that the deep link uri is dynamic: the productId can vary for different products. You can access the productId value using NavBackStackEntry like you accessed navigation arguments in a previous lesson.

backStackEntry.arguments?.getString("productId")

Also, it’s important to know that these deep links are not exposed to external apps by default. To do so, you must define these in your app’s AndroidManifest.xml using appropriate <intent-filter> elements.

For instance, for the above deep link code snippet, you should add the following code in the <activity> element.

<activity ...>
  <intent-filter>
    ...
    <data android:scheme="https" android:host="www.some-ecommerce.com" />
  </intent-filter>
</activity>

This allows for navigation to automatically trigger the composable destination of the navigation graph when an external app triggers the deep link.

Now, it’s time to implement what you’ve learned in an app.