WebView Height Issue: Correct in Emulator, Too Small on Real Device

[SANOONAS]

Hello sir,

I'm having an issue with the WebView filter. It's showing two different outputs: the emulator displays the correct output, but on the real device, the loaded page appears with insufficient height.

EMULATOR OUTPUT (LD PLAYER)

REAL DEVICE OUTPUT (OPPO F19, SUMSUNG TAB, SAMSUNG M02)

CODE

private void setBrowser() {
// Inflate custom layout that contains the WebView
View view = LayoutInflater.from(requireContext()).inflate(R.layout.browser_ui, null);
// Safety check in case view is reused
if (view.getParent() != null) {
((ViewGroup) view.getParent()).removeView(view);
}

    WebView webView = view.findViewById(R.id.main);
    webView.setBackgroundColor(Color.TRANSPARENT);
    // Configure WebView settings
    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setDomStorageEnabled(true);
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    settings.setSupportZoom(true);
    settings.setBuiltInZoomControls(true);
    settings.setDisplayZoomControls(false);
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

    // WebView client setup
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            Log.d(WBT, "Page started loading: " + url);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            Log.d(WBT, "Page finished loading: " + url);

            // Set transparent background
            view.evaluateJavascript(
                    "javascript:(function() {" +
                            "document.documentElement.style.background = 'transparent';" +
                            "document.body.style.background = 'transparent';" +
                            "document.body.style.backgroundColor = 'transparent';" +
                            "})()", null);

            // Inject custom meta viewport tag and size
            float initialScale = 0.3f;
            float width = 16;
            float height = 9;

            String javascript =
                    "javascript:(function() {" +
                            "  var meta = document.querySelector('meta[name=viewport]');" +
                            "  if (meta) {" +
                            "    meta.setAttribute('content', 'width=" + width +
                            ", height=" + height + ", initial-scale=" + initialScale +
                            ", maximum-scale=3.0, user-scalable=no');" +
                            "  } else {" +
                            "    var newMeta = document.createElement('meta');" +
                            "    newMeta.name = 'viewport';" +
                            "    newMeta.content = 'width=" + width + ", height=" + height +
                            ", initial-scale=" + initialScale + ", maximum-scale=3.0, user-scalable=no';" +
                            "    document.getElementsByTagName('head')[0].appendChild(newMeta);" +
                            "  }" +
                            "  document.body.style.width = '" + width + "px';" +
                            "  document.body.style.height = '" + height + "px';" +
                            "})()";

            webView.evaluateJavascript(javascript, new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    Log.e(WBT, "onReceiveValue: " + value);
                    // Optional: Handle JS response
                }
            });
        }

        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            super.onReceivedError(view, errorCode, description, failingUrl);
            Log.e(WBT, "WebView error: " + errorCode + " - " + description + " - " + failingUrl);
        }
    });

    // Enable console messages
    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
            Log.d(WBT, consoleMessage.message()
                    + " -- From line " + consoleMessage.lineNumber()
                    + " of " + consoleMessage.sourceId());
            return true;
        }
    });

    // Load the URL
    webView.loadUrl("https://mycric.app/overlay/685d2548de1cbd57ee87907c/685d344ede1cbd57ee87c7bf");

    // Get dimensions with fallback
    Point previewSize = genericStream.getGlInterface().getEncoderSize();
    int sizeSpecWidth = View.MeasureSpec.makeMeasureSpec(previewSize.x, View.MeasureSpec.EXACTLY);
    int sizeSpecHeight = View.MeasureSpec.makeMeasureSpec(previewSize.y, View.MeasureSpec.EXACTLY);

    view.measure(sizeSpecWidth, sizeSpecHeight);
    view.layout(0, 0, previewSize.x, previewSize.y);

    Log.i(WBT,"ssw "+sizeSpecWidth+" ssh "+sizeSpecHeight);
    Log.i(WBT,"ssw "+previewSize.x+" ssh "+previewSize.y);

    // Apply the filter
    AndroidViewFilterRender androidViewFilterRender = new AndroidViewFilterRender();
    androidViewFilterRender.setView(view);
    androidViewFilterRender.setPosition(0,0);
    genericStream.getGlInterface().setFilter(androidViewFilterRender);
}

[pedroSG94]

Hello,

The problem is related with the aspect ratio.
You have 2 screens of different aspect ratio so the image is incorrect because it isn correctly configured for that aspect ratio.

Maybe the problem is related with the top bar. Try remove top bar or remove the height of the top bar in the size set to the layout

[SANOONAS]

You mean the status bar?
If yes, then no, that's not an issue — you can see the name; it's just that the size is too small.

[pedroSG94]

Do you mean that the image is deformed, right?
I said it for that reason

[SANOONAS]

LD Player ( W 1080 x H 2800 | 409 DPI) Landscape

with top bar

without top bar

OPPO F19 ( W 1080 x H 2800 | 409 DPI) Landscape

with top bar

without top bar

[pedroSG94]

Hello,

Sorry for late response I was on holidays.
As you can see the result is the same in both cases using the same screen resolution so it is a problem related to the layout values set to the view.
Maybe I should create a method to help users fix it calculating it automatically to avoid deformations

[SANOONAS]

Hello sir,
Thank you for your response and taking the time to look into the issue.

Could you please guide me on what layout values I should set to ensure the WebView height displays correctly across different devices?

private void setBrowser() {
// Inflate custom layout that contains the WebView
View view = LayoutInflater.from(this).inflate(R.layout.web, null);
if (view.getParent() != null) {
((ViewGroup) view.getParent()).removeView(view);
}

    WebView webView = view.findViewById(R.id.webview);
    webView.setBackgroundColor(Color.TRANSPARENT);

    // Fix: Force layout height on real devices
    webView.post(() -> {
        ViewGroup.LayoutParams params = webView.getLayoutParams();
        if (params != null) {
            params.height = ViewGroup.LayoutParams.MATCH_PARENT;
            params.width = ViewGroup.LayoutParams.MATCH_PARENT;
            webView.setLayoutParams(params);
        }
    });

    // Configure WebView settings
    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setDomStorageEnabled(true);
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    settings.setSupportZoom(true);
    settings.setBuiltInZoomControls(true);
    settings.setDisplayZoomControls(false);
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            Log.d(WBT, "Page started loading: " + url);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            webView.loadUrl("javascript:window.WebViewResizer.processHeight(document.querySelector('body').offsetHeight);");
            super.onPageFinished(view, url);
            Log.d(WBT, "Page finished loading: " + url);

            view.evaluateJavascript(
                    "javascript:(function() {" +
                            "document.documentElement.style.background = 'transparent';" +
                            "document.body.style.background = 'transparent';" +
                            "document.body.style.backgroundColor = 'transparent';" +
                            "})()", null
            );

            // Inject custom viewport and sizing
            float initialScale = 0.3f;
            float width = 16;
            float height = 9;

            String javascript =
                    "javascript:(function() {" +
                            "var meta = document.querySelector('meta[name=viewport]');" +
                            "if (meta) {" +
                            "meta.setAttribute('content', 'width=" + width +
                            ", height=" + height + ", initial-scale=" + initialScale +
                            ", maximum-scale=1.0, user-scalable=no');" +
                            "} else {" +
                            "var newMeta = document.createElement('meta');" +
                            "newMeta.name = 'viewport';" +
                            "newMeta.content = 'width=" + width + ", height=" + height +
                            ", initial-scale=" + initialScale + ", maximum-scale=1.0, user-scalable=no';" +
                            "document.getElementsByTagName('head')[0].appendChild(newMeta);" +
                            "}" +
                            "document.body.style.width = '100%';" +
                            "document.body.style.height = '100%';" +
                            "})()";

            webView.evaluateJavascript(javascript, value -> {
                Log.e(WBT, "onReceiveValue: " + value);
            });
        }

        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            super.onReceivedError(view, errorCode, description, failingUrl);
            Log.e(WBT, "WebView error: " + errorCode + " - " + description + " - " + failingUrl);
        }
    });

    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
            Log.d(WBT, consoleMessage.message()
                    + " -- From line " + consoleMessage.lineNumber()
                    + " of " + consoleMessage.sourceId());
            return true;
        }
    });

    webView.loadUrl("https://mycric.app/overlay/685d2548de1cbd57ee87907c/685d344ede1cbd57ee87c7bf");


    Point encoderSize = genericStream.getGlInterface().getEncoderSize();

    int width = encoderSize.x;
    int height = encoderSize.y;


    int widthSpec = View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY);
    int heightSpec = View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY);


    view.measure(widthSpec, heightSpec);
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

    AndroidViewFilterRender androidViewFilterRender = new AndroidViewFilterRender();
    androidViewFilterRender.setView(webView);
    androidViewFilterRender.setScale(100, 100);
    genericStream.getGlInterface().setFilter(androidViewFilterRender);
}

[pedroSG94]

Hello,

Try this (width and height are the stream resolution used in prepareVideo):

        //modify the size depend if you are streaming in vertical or orizontal, maybe you should modify it on fly if you rotate the screen
        val w = if (rotation == 90 || rotation == 270) height else width 
        val h = if (rotation == 90 || rotation == 270) width else height 
        view.measure(w, h)
        view.layout(0, 0, w, h)
        val androidViewFilterRender = AndroidViewFilterRender()
        androidViewFilterRender.view = view
        androidViewFilterRender.setScale(100f, 100f)
        glInterface.setFilter(androidViewFilterRender)

[SANOONAS]

Hi

I'm still experiencing the same issue.

I’ve uploaded my full project here for reference:
📎 GitHub Project Link

Could you please take a look when you get a chance? I'd really appreciate any help or insight into:

• Whether I'm missing a layout or scaling step
• If there's a device-specific fix needed for AndroidViewFilterRenderer
• Or if there's a better way to force the WebView to match the output resolution dynamically

Thanks so much for your time and for sharing your work — it's been super helpful! Looking forward to your guidance.

[SANOONAS]

finally i fixed