Android

Documentation Update in Progress

We are currently revisiting and updating this section of our documentation to ensure it provides the most accurate and helpful information. Some content may be incomplete or outdated during this process.

Thank you for your patience! If you have any immediate questions, please don’t hesitate to contact our support team.

---

This guide explains how to embed the LiSA Player in an Android WebView and enable two-way communication..

Setting Up the WebView

Use the Android WebView component to load the LiSA Player. Here’s a complete example:

import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class WebViewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // Prevent WebView from resizing when keyboard opens
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING)

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_webview)

        val webView: WebView = findViewById(R.id.webView)
        webView.webViewClient = WebViewClient()

        // Enable JavaScript
        val webSettings: WebSettings = webView.settings
        webSettings.javaScriptEnabled = true

        // Allow Media Playback Inline
        webSettings.mediaPlaybackRequiresUserGesture = false

        // Load the web app URL
        webView.loadUrl("https://{clientId}.loveslisa.tech/s/{showId}")
    }
}

---

Passing Safe-Area Insets

Android WebViews do not natively support safe-area-insets. To address this, inject CSS variables for safe-area compensation into the LiSA Player:

private fun injectSafeAreaInsets(webView: WebView) {
    val insetsScript = """
        (function() {
            const rootStyle = document.documentElement.style;
            rootStyle.setProperty('--lsc-safe-area-inset-top', '${topInset}px');
            rootStyle.setProperty('--lsc-safe-area-inset-bottom', '${bottomInset}px');
            rootStyle.setProperty('--lsc-safe-area-inset-left', '${leftInset}px');
            rootStyle.setProperty('--lsc-safe-area-inset-right', '${rightInset}px');
        })();
    """
    webView.evaluateJavascript(insetsScript, null)
}

Then adjust the creation of the webViewClient to this:

        webView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView, url: String) {
                injectSafeAreaInsets(webView)
            }
        }

Make sure to calculate topInset, bottomInset, leftInset, and rightInset using Android's safe area utilities.