Whatsapp Web inside an Android WebView - Fixed resolution

Question

I'm trying to embed Whatsapp Web inside my app so that I can mirror it to a remote device. I made a Service that creates a WebView at a specific resolution, set some options for it and then loads the Whatsapp Web page.

The problem is I'm not able to set the WebView in a way that the Whatsapp Web interface fits in it, as it's possible to do in Chrome using developer tools emulating mobile devices or selecting a responsive layout.

    private static final String CHROME_FULL = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36";
    private static final String USER_AGENT = CHROME_FULL;

    private static final String WHATSAPP_WEB_BASE_URL = "web.whatsapp.com";
    private static final String WORLD_ICON = "uD83CuDF10";
    private static final String WHATSAPP_WEB_URL = "https://" + WHATSAPP_WEB_BASE_URL + "/" + WORLD_ICON + "/" + Locale.getDefault().getLanguage();

    View webappLayout;
    WebView webView;

    static final int webviewSizeWidth =800;
    static final int webviewSizeHeight =512;
    
    static WindowManager.LayoutParams getLayoutParams(){
        int layoutType=WindowManager.LayoutParams.TYPE_PHONE;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O)
            layoutType = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;

        WindowManager.LayoutParams params = new WindowManager.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT, 0, 0,
                layoutType,
                WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED
                        | WindowManager.LayoutParams.FLAG_DISMISS_KEYGUARD
                        | WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON
                        | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
                        | WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH
                        | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
                PixelFormat.RGBA_8888);

        params.gravity = Gravity.TOP | Gravity.LEFT;
        if (debug)
            params.x = 0;
        else
            params.x = -webviewSizeWidth;
        params.y = 100;
        params.width = webviewSizeWidth;
        params.height = webviewSizeHeight;
        return params;
    }
    
    private void startWebView(){
        WindowManager mWindowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
        LayoutInflater mInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        webappLayout = mInflater.inflate(R.layout.webapp_layout, null);

        WindowManager.LayoutParams params=getLayoutParams();

        try {
            mWindowManager.addView(webappLayout, params);
        }catch(Throwable th){
            Logger.e(getApplicationContext(),TAG, Utils.exceptionToString(th));
            return;
        }

        webView = webappLayout.findViewById(R.id.webview);
        WebSettings settings=webView.getSettings();
        settings.setJavaScriptEnabled(true); //for wa web
        settings.setAllowContentAccess(true); // for camera
        settings.setAllowFileAccess(true);
        settings.setAllowFileAccessFromFileURLs(true);
        settings.setAllowUniversalAccessFromFileURLs(true);
        settings.setMediaPlaybackRequiresUserGesture(false); //for audio messages

        settings.setDomStorageEnabled(true); //for html5 app
        settings.setDatabaseEnabled(true);
        settings.setAppCacheEnabled(false); // deprecated
        settings.setCacheMode(WebSettings.LOAD_DEFAULT);


        //settings.setLoadWithOverviewMode(true);
        //settings.setUseWideViewPort(true);

        settings.setSupportZoom(false);
        settings.setBuiltInZoomControls(false);
        settings.setDisplayZoomControls(false);

        settings.setSaveFormData(true);
        settings.setLoadsImagesAutomatically(true);
        settings.setBlockNetworkImage(false);
        settings.setBlockNetworkLoads(false);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setNeedInitialFocus(false);
        settings.setGeolocationEnabled(true);
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

//        settings.setDefaultFontSize(12);
//        settings.setMinimumFontSize(10);

        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.setScrollbarFadingEnabled(true);

        webView.setInitialScale(0);

        webView.getSettings().setUserAgentString(USER_AGENT);
        webView.loadUrl(WHATSAPP_WEB_URL);
    }

the layout is simply declared as

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="800px"
    android:layout_height="512px"
    android:id="@+id/webapp_placeholder_layout"
    >
    <com.supergoofy.tucsy.WebAppWebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webview"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

I also tryed to change the viewport at runtime, after page loading in this way

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        String script="{var old=document.querySelector('meta[name=\'viewport\']'); if (old){ old.remove(); var m=document.createElement('meta'); m.name = 'viewport'; m.content = 'width=800, height=512, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1'; document.getElementsByTagName('head')[0].appendChild(m);}}";
        view.loadUrl("javascript:"+script);
    }
});

but until now, I wasn't able to correctly fit the page in 800x512 resolution. Any help on that?

question from:https://stackoverflow.com/questions/65849271/whatsapp-web-inside-an-android-webview-fixed-resolution

Answer 1

Waitting for answers