Android: Loading AMP Formatted HTML into a WebView - android

I'm retrieving Accelerated Mobile Pages (APM) formatted HTML form a webcall. I'm then trying to display that AMP in a WebView. So I'm setting up my WebView like this:
webView = (WebView) findViewById(R.id.web_view);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);
String content = article.getContentAmp();
webView.loadData(content, "text/html; charset=utf-8", null);
It displays content without error, but it's not displaying correctly. It ignores for example amp-youtube elements and embeded tweets.
Is there something else I have to do with the WebView or the WebChromeClient to display AMP correctly?
EDIT:
The answer below works. But in my specific case, I was using the WebView inside a NestedScrollView. Which worked fine in Android 5.0+, but below that, the amp- elements would not load.
Taking the WebView out of the NestedScrollView solved the problem. It's parent is now a relative layout.
So if you're having the same problem, try simplifying your layout so that the WebView is not deeply nested. And definitely don't put your WebView inside a NestedScrollView.

You cannot display elements such as embedded youtube videos, images, tweets etc without giving the WebView a base url. The solution was to use webview.loadDataWithBaseUrl instead on webView.loadData. You must pass it a valid url.
webView = (WebView) findViewById(R.id.web_view);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);
String content = article.getContentAmp();
String baseUrl = extractUrlFromContent(content);
webView.loadDataWithBaseURL(baseUrl, content, "text/html", "utf-8", "");

Related

Style property not working in webview

I am loading html pages from assets and showing in application. HTML pages are showing but when I tried to change background color of button on "onclick" then background color is not getting change.
If i test pages with browser then it's working but when I load html pages in android using webview then it's not working.
onclick function getting called but somehow style property not getting applied.
I tried following three ways.
1. $('#btnAC').css({'background-image', 'linear-gradient(180deg, black, red) !important'});
2. document.getElementById("btnAC").style = "background-image: linear-gradient(180deg, black, red) !important;";
3. $('#btnAC').css('background-image', 'linear-gradient(180deg, black, red) !important');
Java code :
WebView webView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("http:///android_asset/Web/index.html");
You could use WebView.loadDataWithBaseURL
htmlData = "" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);*

android webview can not show content by loaddatawithbaseurl sometime

I use webview to load local html data like this
webview.loadDataWithBaseURL("about:blank", finalSrc, "text/html", "UTF-8", null);
the finalSrc is a variable of html string.
sometimes, the webview can display the corrent content,but sometimes not.
and I found that if I clear the cache of my app, the webview works well again.
so what's wrong with my app?
rather than using BaseUrl why don't use loadData. for example
webview.loadData(finalSrc, "text/html", "UTF-8");

Android Webview displays content as Raw HTML

I am using the following code for rendering a dynamically created html string on a webview. It works properly on my device. But on one of the user's device, the webview displays the raw html tags and content instead of rendering properly.
I cannot reproduce the issue on my devices. What can be cause for this issue to happen. Any device level settings? or Encoding related issue?
String htmlContent = "<html><body> .... </body></html>";
webview.loadDataWithBaseURL(null, htmlContent, "text/HTML", "UTF-8", null);
Try this code. It works for me.
WebSettings settings = mDesc.getSettings();
settings.setDefaultTextEncodingName("utf-8");
mDesc.loadData(mDescText, "text/html; charset=utf-8",null);

Images not loading when JavaScriptEnabled in android webview

I have a android web view
webview = FindViewById<WebView>(Resource.Id.webView);
I load the htmlData from the url like so:
webview.LoadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
The content includes text, images and embedded youtube videos.
In the case above the text and images load correctly but not the videos as i have not enabled Javascript yet.
Therefore i enable JavaScriptEnabled.
webview.Settings.JavaScriptEnabled = true;
webview.Settings.DomStorageEnabled = true;//This does not make any difference
However, when i do enable Javascript the images no longer load within my webview but the videos do.
After debugging, I can see that the entire image tag is being replaced with &nbsp
So i would like to know how to have javascript enabled and have my images still load within my htmldata at the same time.
I guess JavaScript may change the src attribete of img tag.
You can do RemoteDebug of webview. Let's check the html dom.
developers.google.com/web/tools/chrome-devtools/debug/…

Android webview Load url doesn't work for Instagram webpage

I realized that not working for under android 4.3 versions.
I have an android app which has webview. When i try to load url "http://instagram.com" it's not working It shows blank page but facebook webpage is working.
It's really important for me please help.
WebView view = (WebView) findViewById(R.id.webView1);
view.getSettings().setJavaScriptEnabled(true);
view.loadUrl("http://www.instagram.com");
Have you tried using the method:
setDomStorageEnabled();
Sets whether the DOM storage API is enabled. The default value is
false.
for example:
WebView view = (WebView) findViewById(R.id.webView1);
view.getSettings().setJavaScriptEnabled(true);
view.getSettings().setDomStorageEnabled(true);
view.loadUrl("http://www.instagram.com");
I had previously problems loading Facebook and Twitter pages in some devices, solved using setDomStorageEnabled() method.

Categories

Resources