This article covers a tutorial about how to make an Android application with Chrome Custom Tabs. We will make a simple movie list application which has Chrome Custom Tabs with Retrofit and Coil in Kotlin language.

Before we getting started, what is a Chrome Custom Tabs? If you prefer 🧑‍💻 rather than 📖, you can directly jump to this repository.

First, let's briefly explain on the technical concepts and then try to make understanding the source codes of an application.

What is Chrome Custom Tabs?

Android browsers have a feature called Custom Tabs that allow app developers to provide a unique browser experience right inside their app.

It is up to us as developers whether to display content to a user in their browser or through WebViews, but both has drawbacks of their own. For example, opening the browser requires users to make a significant, non-customizable context transfer, whereas WebViews do not support all features of the web platform. WebViews don't share state with the browser, and add maintenance overhead, launching the actual browser requires users to make a significant context flip that isn't adjustable. Google introduced Chrome Custom Tabs to remedy this problem. It is a browser feature that gives apps more control over their web interactions and makes it possible to switch between native and web content more fluidly without the need for a WebView. Please refer to this link for more information about Chrome Custom Tabs.

What are the advantages and customizations?

  • Ability to change toolbar color
  • Add enter and exit animations
  • Enable content sharing
  • Adding custom actions to the browser toolbar and toolbar's overflow menu

What are the advantages and customizations?

  • Optimizes the performance
  • Safe browsing
  • Apps that launch Custom Tabs won't be removed by the system while the Tabs are in use since their relevance is increased to the "foreground" level.
  • Shared cookie jars and permissions models eliminate the need for users to re-grant permissions they have already granted or check in to websites to which they are already connected.

Now let's try this on a sample application!

The app's functionality includes:

  1. Fetch a list of popular movies from tmdb api and shows them in RecyclerView.
  2. Click a movie and redirect tmdb homepage.
None
Movie app

First build.gradle file

We will use retrofit, lifecycle, recyclerview, cardview, coil and Chrome Custom tabs so we should add our app's build.gradle file, make sure to add in these libraries:

I have created Movies and PopularMovieItem, MovieApiClient, MovieApiService classes to display the list of movie items in the recylerView from tmdb api. PopularMovieItem has poster, title , and release date info will show in recylerview. Also created PopularMovieListAdapter, PopularMovieViewModel classes.

It is a simple app for showing Chrome Custom Tabs so I coded necessary actions in MainActivity.kt class.

  1. Creating necessary variables:

Set up our customTabsServiceConnection, CustomTabsClient, customTabsSession and chromePackageName

2. Warm-up Custom Chrome Tabs:

Possibly the most important thing is that we need to set up our code such that Chrome starts warming up when the app is loaded and that our disconnect code null our client. The purpose of the warm-up is to hasten the opening of our Custom Chrome Tab. Nobody wants a sluggish browser, so this will speed up Chrome's startup.

3. Changing toolbar and setting the exit animations:

4. Lastly build custom tabs:

You can use setUrlBarHidingEnabled(true) to hide the URL bar on scroll to offer the user more room to browse the web. You can use setShowTitle(true) to display the document title rather than the URL.

Thank you for reading! I used these steps and implemented Custom Chrome tabs. Whole MainActivity.kt code is: