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.

	<WebView
	android:id="@+id/game_address"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_alignParentStart="true"
	android:layout_alignParentTop="true"
	android:layout_alignParentLeft="true" />
	<ProgressBar
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true"
	android:visibility="gone"
	android:id="@+id/progress_bar"/>

view raw activity_main.xml hosted with ❤ by GitHub

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.

	private WebView webView;
	private ProgressBar progressBar;
	webView = findViewById(R.id.game_address);
	progressBar = findViewById(R.id.progress_bar);

view raw MainActivity.java hosted with ❤ by GitHub

4. Add web settings and enable JavaScript.

	WebSettings webSettings = webView.getSettings();
	webSettings.setJavaScriptEnabled(true);
	webSettings.setDomStorageEnabled(true);
	webSettings.setMixedContentMode(MIXED_CONTENT_ALWAYS_ALLOW); //Not needed if asked to override
	webView.loadUrl("https://your_web_app_url");
	webView.setWebViewClient(new MyWebViewClient());

view raw MainActivity.java hosted with ❤ by GitHub

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)

	private class MyWebViewClient extends WebViewClient {
	@Override
	public void onPageStarted(WebView view, String url, Bitmap favicon) {
	super.onPageStarted(view, url, favicon);
	progressBar.setVisibility(View.VISIBLE);
	}
	@Override
	public void onPageFinished(WebView view, String url) {
	super.onPageFinished(view, url);
	progressBar.setVisibility(View.GONE);
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

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.

	@Override
	public void onBackPressed() {
	if(webView.canGoBack())
	webView.goBack();
	else
	super.onBackPressed();
	}

view raw MainActivity.java hosted with ❤ by GitHub

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.

	private boolean haveNetworkConnection() {
	boolean haveConnectedWifi = false;
	boolean haveConnectedMobile = false;
	ConnectivityManager cm = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
	NetworkInfo[] netInfo = cm.getAllNetworkInfo();
	for (NetworkInfo ni : netInfo) {
	if (ni.getTypeName().equalsIgnoreCase("WIFI"))
	if (ni.isConnected())
	haveConnectedWifi = true;
	if (ni.getTypeName().equalsIgnoreCase("MOBILE"))
	if (ni.isConnected())
	haveConnectedMobile = true;
	}
	return haveConnectedWifi || haveConnectedMobile;
	}

view raw MainActivity.java hosted with ❤ by GitHub

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

	if (haveNetworkConnection()) {
	//set up WebView
	} else {
	startActivity(new Intent(MainActivity.this, NoConnection.class)); // navigate to new Activity
	Toast.makeText(getActivity(), "No Connection!",Toast.LENGTH_LONG).show(); // or use Toast message
	}

view raw MainActivity.java hosted with ❤ by GitHub

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

	<uses-permission android:name="android.permission.INTERNET" />
	//above the bottom tag ;)
	<application

view raw Manifest.xml hosted with ❤ by GitHub

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

	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.webkit.WebChromeClient;
	import android.webkit.WebSettings;
	import android.webkit.WebView;
	public class MainActivity extends AppCompatActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	WebView webView = findViewById(R.id.webview);
	WebSettings webSettings = webView.getSettings();
	webSettings.setJavaScriptEnabled(true);
	webView.setWebChromeClient(new WebChromeClient());
	webView.loadUrl("file:///android_asset/www/index.html");
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

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