Implement Android WebView

This document outlines how you can use Android WebViews to run our products inside your app.

Only use WebViews if you are adding our games individually, and not monetising with ads. If you are adding our game centre, or any other Zop product, use Chrome Custom Tabs (CCT). Here is a guide to implementing CCT.

Follow the steps given below closely to get a perfectly working WebView implementation in your app:

Step 1: Create the WebView via code (instead of XML)

We recommend creating the WebView via your Java / Kotlin code, instead of creating it via XML so as to avoid memory leaks. You may have a particular Android Activity where you place the Gamezop icon / banner. When a user taps on that icon / banner, you want to open your game URL within a WebView. Within the onCreate method of this Activity, you will have to create the WebView as mentioned below:

val myWebView = WebView(this)
setContentView(myWebView)

WebView myWebView = new WebView(this);
setContentView(myWebView);

Step 2: Make updates to `AndroidManifest.xml`

The primary objective of making these updates is to enable the following:

Internet access for the WebView
Screen orientation changes within the WebView (since games can be landscape as well)
Hardware acceleration for better game performance

Here are the updates to be made within your app's AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.WebViewSetup">
        <activity
            android:name=".MainActivity"
            android:configChanges="orientation|screenSize"
            android:hardwareAccelerated="true"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

Step 3: Setup a `WebViewClient` to intercept URLs

Create a CustomWebViewClient file within the same directory as where you have your MainActivity file. Java and Kotlin versions of this file are given below:

CustomWebViewClient.kt

import android.content.Intent
import android.content.pm.PackageManager
import android.net.Uri
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Toast
import java.net.MalformedURLException
import java.net.URL


class CustomWebViewClientKotlin : WebViewClient() {

    val GAMEZOP_URL = "gamezop.com"
    val NO_APPLICATION_ERROR = "You do not have an application to run this."

    /**
     * This method helps in making the subscribers aware that
     * the data has change so run the required methods.
     * @return This fields is true it means the UI
     * needs to reload again and and present the
     * splash-screen UI.
     * And if its false, it means stop showing the
     * splash-screen UI and present the Webview.
     */
    override fun shouldOverrideUrlLoading(
        view: WebView, url: String
    ): Boolean {
        super.shouldOverrideUrlLoading(view, url)
        var domain = ""
        try {
            val fullUrl = URL(url)
            domain = fullUrl.host
        } catch (e: MalformedURLException) {
            e.printStackTrace()
        }
        if (domain.contains(GAMEZOP_URL)) {
            view.loadUrl(url)
        } else {
            loadOutsideWebView(view, url)
        }
        return true
    }


    private fun loadOutsideWebView(view: WebView, url: String) {
        // Otherwise, the link is not for a page on the site,
        // so launch another intent that handles URLs.
        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
        val packageManager = view.context.packageManager
        val activities = packageManager.queryIntentActivities(
            intent,
            PackageManager.MATCH_DEFAULT_ONLY
        )
        val isIntentSafe = activities.size > 0
        if (isIntentSafe) {
            view.context.startActivity(intent)
        } else {
            Toast.makeText(
                view.context,
                NO_APPLICATION_ERROR,
                Toast.LENGTH_LONG
            ).show()
        }
    }

CustomWebViewClient.java

import android.content.Intent;
import android.content.pm.PackageManager;
import android.content.pm.ResolveInfo;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import java.net.URL;
import java.net.MalformedURLException;
import java.util.List;


public class CustomWebViewClient extends WebViewClient  {
    
    final String GAMEZOP_URL = "gamezop.com";
    final String NO_APPLICATION_ERROR = "You do not have an application to run this.";
            
;
    @Override
    public boolean shouldOverrideUrlLoading(
            WebView view, String url) {
        super.shouldOverrideUrlLoading(view, url);
        String domain = "";
        try {
            final URL fullUrl = new URL(url);
            domain = fullUrl.getHost();
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }

        if (domain.contains(GAMEZOP_URL)) {
            view.loadUrl(url);
        } else {
            loadOutsideWebView(view, url);
        }
        return true;
    }

    private void loadOutsideWebView(WebView view, String url) {
        // Otherwise, the link is not for a page on the site,
        // so launch another intent that handles URLs.
        final Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));

        final PackageManager packageManager = view.getContext().getPackageManager();
        final List<ResolveInfo> activities = packageManager.queryIntentActivities(intent,
                PackageManager.MATCH_DEFAULT_ONLY);
        final boolean isIntentSafe = activities.size() > 0;
        if (isIntentSafe) {
            view.getContext().startActivity(intent);
        } else {
            Toast.makeText(view.getContext(),
                    NO_APPLICATION_ERROR,
                    Toast.LENGTH_LONG).show();
        }
    }

}

Step 4: Set this `CustomWebViewClient` as your WebView client

To do so, just add the following line in the Activity where your created your WebView:

myWebView.webViewClient = CustomWebViewClient()

myWebView.setWebViewClient(new CustomWebViewClient());

Step 5: Configure WebView settings in the holder Activity

Add the following lines in the Activity where your created your WebView:

myWebView.isSoundEffectsEnabled = true
myWebView.settings.javaScriptEnabled = true
myWebView.settings.javaScriptCanOpenWindowsAutomatically = true
myWebView.settings.setGeolocationEnabled(true)
myWebView.settings.databaseEnabled = true
myWebView.settings.loadsImagesAutomatically = true
CookieManager.getInstance().setAcceptCookie(true)
myWebView.setBackgroundColor(Color.argb(1, 0, 0, 0))
// Enable database and local storage in webview
myWebView.settings.domStorageEnabled = true
myWebView.settings.databaseEnabled = true
myWebView.settings.setRenderPriority(WebSettings.RenderPriority.HIGH)
myWebView.settings.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK
myWebView.scrollBarStyle = View.SCROLLBARS_INSIDE_OVERLAY
myWebView.settings.layoutAlgorithm = WebSettings.LayoutAlgorithm.NARROW_COLUMNS
myWebView.settings.useWideViewPort = true
myWebView.settings.saveFormData = true
myWebView.settings.setAppCacheEnabled(true) //Open Application Caches
val cacheDirPath = filesDir.absolutePath + "/cache"
myWebView.settings.setAppCachePath(cacheDirPath) //Setting up the Application Caches cache directory

myWebView.setSoundEffectsEnabled(true);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
myWebView.getSettings().setGeolocationEnabled(true);
myWebView.getSettings().setDatabaseEnabled(true);
myWebView.getSettings().setLoadsImagesAutomatically(true);
CookieManager.getInstance().setAcceptCookie(true);
myWebView.setBackgroundColor(Color.argb(1,0,0,0));
// Enable database and local storage in webview
myWebView.getSettings().setDomStorageEnabled(true);
myWebView.getSettings().setDatabaseEnabled(true);
myWebView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
myWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
myWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
myWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
myWebView.getSettings().setUseWideViewPort(true);
myWebView.getSettings().setSaveFormData(true);
myWebView.getSettings().setAppCacheEnabled(true);//Open Application Caches
String cacheDirPath = getFilesDir().getAbsolutePath() + "/cache";
myWebView.getSettings().setAppCachePath(cacheDirPath); //Setting up the Application Caches cache directory

Step 6: Open your Gamezop game URL

Once you are done with the 5 steps mentioned above, you are ready to open your Gamezop game URL within your WebView. You can get your game URLs from the All Games API. Add this line at the end of the Activity where you created your WebView:

myWebView.loadUrl("https://3025.play.gamezop.com"); //ensure you replace this with the correct Game URL

Sample implementation

You can see a sample WebView implementation here: https://github.com/gamezop/webview-setup

Last updated 1 year ago