The Crosswalk project lets you embed the latest version of Chromium in your Android apps, and use it as an alternative to the usual
WebView widget. In this tutorial, I’ll show you how to use it to create your very own custom browser. If you are wondering why you would want a custom browser, well, here are some reasons I could think of:
You could argue that creating an extension for Google Chrome or Mozilla Firefox is easier. You’d even be right. But, you can’t publish browser extensions on Google Play, can you? In any case, I believe that creating a custom browser sounds a lot more fun than creating an extension.
To be able to follow this tutorial, you’ll need the following:
To be able to use Crosswalk in your project, add the following
compile dependency to your app module’s build.gradle file:
The above dependency is not available on jcenter. Instead, it is hosted on Intel’s Open Source Technology Center. Therefore, add the following repository:
Finally, press Sync Now to update the project.
At this point, you can add the Crosswalk webview component to your activity’s layout using the
For now, that’s all we’ll have in our layout.
All the browser’s controls, such as the forward and back buttons, the address bar, and the stop/refresh buttons, shall be available as menu items. Therefore, create a menu file called browser_controls.xml and add the following to it:
Of course, to be able to use your new menu, you must have the following code in your activity:
onCreate() method of your activity, initialize the
XWalkView widget using the
Furthermore, I’m sure you’d want your own unique user-agent string. You can specify it using the
A blank browser window isn’t very interesting. Therefore, use the
load() method now to navigate to any URL of your choice.
If you run the app now, you should be able to see the
XWalkView widget working correctly.
It is worth mentioning that your APK will be quite large, about 45 MB, which is why you might have to clear up some internal storage space on your device beforehand.
It’s time to make all those controls we mentioned in the menu file functional. Shouldn’t take us more than a few minutes.
First, override the
To go back and forward, we can use the
XWalkNavigationHistory object. Additionally, there are appropriately named methods for stop and refresh.
In the above code, you can see that we are calling the
showAddressDialog() method when the user chooses to visit a new URL. The method doesn’t exist yet, so we must create it now.
Inside the method, use the
AlertDialog.Builder class to create a new dialog that prompts the user to enter the required URL.
You can run your app now, and use your custom browser. It should behave very much like any other browser.
Let me now quickly show you how you can intercept a specific URL and display a message of your choice.
To be able to intercept URLs, you must add a
XWalkResourceClient to your
XWalkView widget. Additionally, you must override the
shouldInterceptLoadRequest() method of the resource client object.
If you return
null in the
shouldInterceptLoadRequest() method, it means you don’t intend to change the response at all. However, if you return a
XWalkWebResourceResponse object, the
XWalkView widget will render that instead of the original response.
For now, let’s just intercept youtube.com and stop the user from visiting it. To create the
XWalkWebResourceResponse, you can use the
Run your app and try visiting Youtube now. You won’t be able to.
In this tutorial, you learned how to create a custom browser for Android using the Crosswalk project. You also learned how to intercept requests. We didn’t focus much on the user interface, however. Therefore, I suggest you spend some time now improving the looks of your browser.