Android webview issue with SINGLE_COLUMN mode

Question

I'm currently having a issue with the Android WebView. This webview is currently initialized like this:

_post_WebView = (WebView) view.findViewById(R.id.post_webview);
_post_WebView.setBackgroundColor(Color.WHITE);
_post_WebView.setWebViewClient(new PostWebViewClient());
_post_WebView.getSettings().setBuiltInZoomControls(true);
_post_WebView.getSettings().setSupportZoom(true); 
_post_WebView.getSettings().setPluginState(PluginState.ON);
_post_WebView.getSettings().setJavaScriptEnabled(true);
_post_WebView.getSettings().setRenderPriority(RenderPriority.HIGH);
_post_WebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
_post_WebView.setWebChromeClient(new WebChromeClient() {});
_post_WebView.getSettings().setUseWideViewPort(false);
_post_WebView.getSettings().setLoadWithOverviewMode(true);
_post_WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

This webview is used to display a HTML string retrieved from a server. (Using the loadData method). Now the problem is the fact that in SINGLE_COLUMN mode, the images and text are resized properly in both width and height but the embedded youtube videos, while resized in width, don't get resized in height and therefore show nothing but a black box.

In LayoutAlgorithm.NORMAL everything works fine. How can I make sure the youtube videos get resized properly in the SINGLE_COLUMN algorithm too?

The Youtube video's are embedded like this:

<iframe allowfullscreen="" frameborder="0" height="315" width="420" src="YOUTUBE_VIDEO_LINK"></iframe>

Leon Lucardie Leon Lucardie · Accepted Answer · 2013-07-23T05:14:55

I finally went and solved it by using loadDataWithBaseURL(null, htmlString, "text/html", "utf-8", null) instead of loadData(htmlString,"text/html","utf-8") while adding a 100% max-width property and a auto width and height property to the iframes using CSS:

htmlString = "<html><head><style>iframe {max-width: 100%; width:auto; height: auto;}</style></head><body>"+htmlString+"</body></html>";

It's not the most clean way to do so, but it works.

This method should also work if used with the layout algorithm NARROW_COLUMNS.

Android webview issue with SINGLE_COLUMN mode

1 Answers