Converting HTML5 Game for Android | 2 Methods

HTML5 games are easy to develop and use. It has great graphics and processing capabilities. Many may wonder to convert their web apps compatible with Android.

So here are two methods, which will walk you through Android development for making your web app compatible with your favorite platform.

Method 1: Hosting the Game 

There are various sites where you can host your HTML game for free and also earn from it. After hosting it take the link of the Game use it to make your Android game.

1. Create a new Android Project (obviously)

2. Add the following to the '.XML' file of the layout.

In the above snippet, a WebView is created which takes up the whole screen. And a ProgressBar which is by default round and will appear when the page is loading.

Till now there won't be any errors 😅

3. In your MainActivity.java, start by typecasting the WebView and ProgressBar.

4. Add web settings and enable JavaScript.


The above code creates some basic Web Settings for our WebView,

•     Sets JavaScript enabled so that you can use javascript in the WebView.
•     Dom Storage is the cache so that game can store scores if exists.
•     Load URL will load your web app.
•     Error, if occurred don't worry it's the next step.

5. Create a Web Client class inside the MainActivity Class itself ( an inner class)

The functions inside the class are in-built but we are overriding them so that we can create our ProgressBar, the first method: OnPageStarted will set the Progress Bar and it'll rotate till the PageFinished loading.

6. How to adjust navigations?

This is one-page app hence navigation will not exist, so if you press Back on the page, the app will exit. So we need to override the onBackPressed method.
Place the below code after the onCreate method.


Explanation: Whenever back is pressed, it'll check if webpage can go back, if yes, then it'll go to the previous link, if not then it'll exit the app.

7. Also if no network available...

Use the below code to check Internet availability, and navigate to No Connection Activity, it can contain anything, or just an image saying NO CONNECTION.

Use this function in the onCreate method, use if-else.

8. Finally, add the Internet permissions in the Manifest.xml file

You are done with the App add icons to your app and then generate its apk. Finish.

Method 2: Adding the game locally in your app 

This method will help you to add the web-app locally, and it'll not require internet to function. The method is simple.

1. Create a new Android Project (obviously, did I just copied to above line 😅😅)

2. Click File -> New -> Folder -> New Asset Folder 

     a folder with asset name will be created, right click, New -> Directory, name the Directory, www.

3. Now copy all the web-app file into www folder.

4. Now create WebView and ProgressBar in the layout file as mention above in M1 Step 2. 

5. Add the Java code same as above, except using new URL:  file:///android_asset/www/index.html

  here, index.html is my filename, you put yours.

The code will look like this

If you get any errors or want to suggest anything comment below. Also, my new post will be: Adding Admob ads to your app.

Download the full source code: Offline Web-App  Online Web-App