From Web to Android In Two Steps

Nowadays we live in the age of mobile devices. One day we can come up with an idea to build a super-mega mobile app and add it to the store. However, we can face a small problem: we are just web developers. We don’t know either Java or Objective-C and we have no time to learn it.

Today we can fulfill our dreams and improve the world we live in by building super-mega apps. This article describes the process of creating a hybrid application for Android OS.

A hybrid app combines features of web and native apps. As a native app, it can be distributed through the store and can take advantage of numerous features available on mobile devices. As a web app, it consists of HTML, CSS and JavaScript files.

This type of applications provides the following advantages:

• Almost all applications can be written in JavaScript for all mobile platforms;
• These apps can use some fancy features of a mobile device like a camera, an accelerometer, etc.;
• All HTML, CSS and JavaScript files can be instantly updated before a new version of an app is approved.

However, a hybrid app is slower than a native app. Nevertheless, it’s not a big deal because the slowest parts of your app can be written in Java or Objective-C and added to the next update.
Now let’s build an app and change the world!

Step One. Tools for Changing The World

Let’s create our first app for Android.

First of all, we need to download Android SDK and some other stuff to emulate different Android devices or drivers to test your app on a real device. It’s quite easy: just download this package. There you will find IDE Eclipse with already added ADT plugin, Android SDK, SDK Manager, etc.

Once you get all these files, run the ‘SDK Manager.exe’ file (for Mac or Linux, you open the ‘tools/’ directory located in the Android SDK package in the terminal, then execute android sdk) and install a few things:

 

1. SDK Tools. It should have already been installed. If not, you know what to do;
2. SDK Platform-tools;
3. SDK for one of the Android versions. Your new Android app has to be compiled against some version of Android OS. In this article, we’ve chosen the latest version of Android so that we could use new fancy features;
4. Drivers. If you want to test your app on your Аndroid device, you have to install Web and USB drivers (if you have some problems with debugging your apps on a real device, read this article or leave comments).

Great. The most boring part on creating apps for Android has been done. Let’s run Eclipse IDE downloaded with SDK and start changing the World. When required, you can download Android Studio (IntelliJ IDEA based IDE). Please, note that it’s still in beta and may cause an additional headache.

Step Two. Building The App

All hybrid applications are based on the WebView element. This element displays web pages with the WebKit rendering engine. It means you can create a usual HTML file with some <style> or <link> tags to include CSS and <script> tags to add JavaScript, and pass it to the WebView element. You will get almost the same picture that you can see in a browser when you open this page (see the images below).

As you probably guess, the easiest way to create a hybrid Android app is to simply open an existing web site in the WebView element. All we need is to create a WebView element, expand to full screen and pass the URL of your web site to it. Let’s do it.

First of all, you should open Eclipse that you’ve downloaded and create a new ‘Android Application Project’. Name it the way you like and choose the version of Android that you want to compile against. You may also create an icon for your new app and an activity (Note: no need to change anything in this example). When you click on the “Finish” button, your first Android app will be created.

Opened in Chrome Browser	Opened in WebView

 

IDE automatically creates lots of files. Let’s look through some of them:

1. AndroidManifest.xml – this file contains information about your app and everything it can do. This file is read by Android OS when it installs and launches your app. All the information about features of the Android devices that you want to use in your app (like camera, list of contacts and so on) should be added into this file. Besides, all UI themes, controllers (activities) and background services are declared in this manifest. You can look here for more comprehensive details;
2. res/layout{qualifier}/{name_of_your_activity}.xml – this file contains description of all UI elements that you are going to use in this activity. We need only one activity with the only one UI element (WebView) for our hybrid app. If you want to add some Android native buttons, they should be described in this file;
3. src – this folder stores all your Java files;
4. res/drawable{qualifier} – this folder is to contain all your graphical files;
5. bin – this folder is to contain all your compiled stuff;
6. assets – this folder contains all types of files you want to have access to. They might be static HTML files or some CSS and JavaScript files that will be added to the .apk of your app.

There are some drawbacks with adding all your files to the assets folder. One of them is that when you decide to change something or fix some bugs, you will have to update your app through the store because you have to compile a new .apk file. It means you’ll have to wait for approval and so on. However, if you get all files from your web server, all resources (html, css, js) may be changed without delay when they are tested properly.

Now we know everything we need for creating a simple hybrid app. First of all, we have to change the layout file (res/layout/{name_of_your_activity}.xml). We’ll add WebView element and expand to full screen.

We don’t need a fancy relative layout because we have only one element. That’s why we use a simple linear layout. As you can see, we declared WebView element with the ‘WebView’ id. We will use it to refer to it. The symbol “+” means that the id will be defined in the namespace of your application.

The next step is to change AndroidManifest.xml file. We need access to the Internet to download files from the web server. All we need is to add this string to the manifest file before the ‘application’ tag:

The most fun part about it: write some code. Open the java file with a class for your activity (it should have the path like this “src/com.example.{your_project_name}/{your_main_activity_name}.java”) and make some changes to the code. It should look like this:

 

Be careful while copying this code. The name of the package (“com.example.xbsoftware”) and the name of the class (“MainActivity”) may be different for your app. Great! All work is done and we can run our first app for Android OS. Just press “Run”. Cool, right?

Improvements for the Step Two. WebViewClient and WebChromeClient

There are two classes you should know about. First of all, it’s WebViewClient. This class is responsible for everything connected with page rendering. It has methods for catching errors, receiving HTTP requests, page loading, etc. You can overload all this methods. It means that you may add some logic for each of these events. The whole list of the supported methods for this class can be found here.

As far as you can see, if you click on some external link in your app the Chrome browser will be opened. To fix this, we will overload two methods of the WebViewClient class: ‘shouldOverrideUrlLoading’ and ‘onReceivedError’. The first one will be called when the URL is changed. The second one when you receive an error instead of some page content.

We should create a new class that extends WebViewClient and mark all the overloaded methods with the attribute ”@Override“.
We should overload the onReceivedError method, because we may want to show our own error page, in case some resources can’t be downloaded. That’s why when we get an error, we stop further downloading and open our page to handle errors from the ‘assets’ folder.

If you want to open internal pages in the WebView, you have to change the webSettings parameter. Simply add this line to your code in the place where you’ve created the webSettings object:

Now you can add files to the ‘assets’ folder and use them on your page. We’ve created a simple file to show errors and placed it right into the ‘assets’ folder:

You also have to add a new WebViewClient object to the existing WebView element with this code:

Let’s look at the following example:
error.html
If you replace the URL in the loadUrl parameter with an invalid one, an error page will be opened.

The second class is WebChromeClient. It is responsible for everything connected with the browser UI. You may handle the browsing history, create new windows, manage alerts and icons. All methods that can be overloaded in this class are listed here.

For instance, let’s change every alert message dialog with our own. We have to extend the WebChromeClient class and overload the onJsAlert method. Let’s see an example:

The same as with the WebViewClient, you have to add an MyWebChromeClient object to the existing WebView element:

 Step Two And a Half. Bind Java and JavaScript

The development process of a hybrid app won’t be so exciting, if we can’t call Java methods from JavaScript. To bind methods of some objects from Java with JavaScript, we have to use JavascriptInterface. For this example, I’ll create “MyJavaScriptInterface” class that will have one method with the name ‘make’. If you set the target SDK version to 17 or higher, all the methods accessed by JavaScript must have @JavaScriptInterface annotations.

Let’s see an example:

Besides, you should copy this code to add this method to the existing WebView:

Now the method ‘make’ can be accessed by JavaScript with this code:

It’s quite a simple example of using such a powerful tool. You can make it possible for JavaScript from WebView to communicate with all modules of the mobile devices like camera, list of contacts, WiFi and others.

If you run this example, you will see that method ‘make’ is an synchronous method. As far as you know, Javascript is single-threaded. It means that if you’re executing a Javascript block of code on a page, then no other Javascript on your page will be currently executed. In our example it means that other JavaScript code can’t be called until the “make” function is executed (it will wait ten seconds because the Java thread that executes the code connected with this function will sleep for this period of time). To solve this problem, you have to create an AsyncTask in Java and execute this code there. When everything is done, call some global function in JavaScript and pass the results. But be careful – all WebView methods can be called only in the UI thread. It means that you can’t call the loadUrl WebView method in doInBackground method because it’s in another thread.

Let’s see an example:

The HTML file to call the method from Java:

As you can see, there is no direct method to call some JavaScript functions from Java. That’s why we have to create a temporary global function to get the results. We should use the webView.loadUrl(“javascript:{your js code here}”) method to call some of the functions in javascript.

Debugging

As you’ve noticed, all Java code can be easily debugged directly in IDE. But what about JavaScript? Of course, you may debug it separately: just open it in the Chrome browser and turn on remote debugging in your desktop browser. Sometimes we need to debug all these parts together.

In that cases we should be thankful for the new Android 4.4 KitKat with its new WebView. If you have it, everything you need is to add this code:

After starting your application (of course, if you test it on a real device, it should be connected to the development machine using a USB cable), enter this URL to the address bar: chrome://inspect/#devices. Afteward you should pick your device and click on the ‘Inspect’ link.

You can find further information on the Google Android Developers site. Or, you can refer to a really interesting and useful book that inspired us to write this article.

Thanks for your attention and feel free to add your comments below.