Introduction

...but need more features than the default web browser, then using WebView and Chrome Custom Tabs in collaboration might be what you need for your website Android version.


Tags

Share

How to open links in Android WebView with Chrome Custom Tabs

Advertisement:


read_later

Read Later



read_later

Read Later

Introduction

...but need more features than the default web browser, then using WebView and Chrome Custom Tabs in collaboration might be what you need for your website Android version.

Tags

Share





Advertisement

Advertisement




Introduction

Android WebView is a very handy property when you want to display websites in your Android application, controlling links specifications and connection settings by using just a few lines of code in Android Studio. However, it is not perfect in every way, especially when you want to use auth key or sessions between your web pages hence the recent increase of the use of custom tabs in Android Apps. Custom tabs, specifically talking about Chrome Custom Tabs in this article, provide various options to developers to show the content of their websites in an application as if it is displayed by a fully developed browser along with its features such as getting information from the database or sending sessions through the server. Both of them, as compared to each other, has some advantages when turning your website into an Android application – speed optimization, monetizing features, external linking adjustments etc. Nevertheless, as I did in my application version 2.0 for this website, it might be a user-friendly implementation on your application to open links in Android WebView by using Chrome Custom Tabs if you want your application to look more app alike. In this way, you can create a simple interface in the WebView, and be able to redirect your external links to Chrome Custom Tabs. Furthermore, you do not have to worry about your monetized pages when using custom tabs, even for Google AdSense or affiliate links, because they are already included by Chrome Custom Tabs default features. In conclusion, the bottom line is that if you want to create an application in which your website content is displayed, but need more features than the default web browser, then using WebView and Chrome Custom Tabs in collaboration might be what you need for your website Android version.

Implementing Chrome Custom Tabs

First of all, you need to implement Chrome Custom Tabs support library on your build app gradle file to use them properly.

Android Studio Gradle Scripts build.gradle(Module: app)

Paste the line below by changing the Android version you want to use.

implementation 'com.android.support:customtabs:28.0.0'

project-image
Figure - 19.1

For more information, you can visit here.

Using shouldOverrideUrlLoading to redirect WebPages to Chrome Custom Tabs

shouldOverrideUrlLoading is a boolean function, allowing you to constrict the url loading progress to redirect the WebView in your app to another page simply. In other words, this function, basically, interposed itself between the request and the WebView to open another link instead of the requested link when it is triggered.

Nevertheless, shouldOverrideUrlLoading is deprecated in the newest versions of Android so if you want to use it, you might need to extend WebViewClient with a private class.

project-image
Figure - 19.2

Redirecting links to Chrome Custom Tabs to be displayed

Redirecting the requested url to Chrome Custom Tabs is based on defining the root WebPages which you want to be displayed in your app like confining pathways to keep users in pre-defined pages only.

To easily achieve that, I recommend you use Uri method to detect WebPages by their host name and path as depicted down below.

Uri.parse(url).getHost().contains("YOUR_WEBSITE") && Uri.parse(url).getPath().contains("WEB_PAGE")

Once you define the root pages, you can redirect external links to Chrome Custom Tabs recursively.

Just make sure you turn accurate boolean value; 'false' means that do not nothing, 'true' means that intercept the request and redirect.

When you redirect external links, you have to build a custom tab as well as a url launching path.

project-image
Figure - 19.3

As depicted below, after building a chrome custom tab, you can configure the color of the address bar and a custom action button as well as a custom menu.

Most importantly, do not forget adding MainActivity.this on .launchUrl function like this; customTabsIntent.launchUrl(MainActivity.this, Uri.parse(url)).

Also, if you want to specify the custom button icon, you can download from here in 24dp-png format.

project-image
Figure - 19.4

Demonstration

How to open links in Android WebView with Chrome Custom Tabs | Demonstration on TheAmplituhedron Mobile App