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)

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
class CustomWebViewClientKotlin : WebViewClient() {

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

    override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
        var domain = ""
        try {
            val fullUrl = URL(url)
            domain = fullUrl.host
        } catch (e: MalformedURLException) {
            e.printStackTrace()
        }

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

    private fun loadOutsideWebView(view: WebView, url: String) {
        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
        val packageManager = view.context.packageManager
        val activities = packageManager.queryIntentActivities(intent, PackageManager.MATCH_DEFAULT_ONLY)
        if (activities.isNotEmpty()) {
            view.context.startActivity(intent)
        } else {
            Toast.makeText(view.context, 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()

Step 5: Configure WebView settings in the holder Activity

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

myWebView.settings.javaScriptEnabled = true
myWebView.settings.javaScriptCanOpenWindowsAutomatically = true
myWebView.settings.setGeolocationEnabled(true)
myWebView.settings.domStorageEnabled = true
myWebView.settings.databaseEnabled = true
myWebView.settings.loadsImagesAutomatically = true
myWebView.settings.useWideViewPort = true
myWebView.settings.setSupportZoom(false)
myWebView.settings.layoutAlgorithm = WebSettings.LayoutAlgorithm.NARROW_COLUMNS
myWebView.setSoundEffectsEnabled(true)
myWebView.scrollBarStyle = View.SCROLLBARS_INSIDE_OVERLAY
myWebView.setBackgroundColor(Color.argb(1, 0, 0, 0))
CookieManager.getInstance().setAcceptCookie(true)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    WebViewCompat.setRequestHeaderOriginAllowList(
        myWebView,
        listOf("*")
    )
}

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

Was this helpful?