I have a webview with a bunch of images in it stacked vertically. When I run it on a nexus 6 emulator the scrolling works how I'd expect from my web-browsing on my phone.
However when I deploy the APK to my actual device, the scrolling behaves totally differently. It lags a bit behind my finger, and seems to have no inertia at all. This is on a Samsung s8+.
This is my current configuration:
String html = "<html><head><style>body {margin: 0; padding: 0; overflow: hidden;} img {}</style><body>" + imagesHTML + "</body></html>";
String mime = "text/html";
String encoding = "utf-8";
webView.getSettings().setBuiltInZoomControls(true);
// webView.getSettings().setSupportZoom(true);
webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
webView.setPadding(0, 0, 0, 0);
webView.setInitialScale(100);
webView.loadDataWithBaseURL(null, html, mime, encoding, null);
Any ideas?
I figured it out. Overflow: hidden; on the body was causing the weird behavior.
Related
I have the code for playing YouTube in WebView on Android.
It works well on new phones (Android 4.4, 5.1, 6, 7 OS) but when I tried it on Android 4.0.3 it opens the YouTube frame with controls and after clicking on button play in the midle the gray background is shown all the time.
The code:
private void initializeWebView() {
WebView webView = (WebView) findViewById(R.id.webView);
//webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
webView.setBackgroundColor(getResources().getColor(R.color.semi_transparent_black_20percentage));
webView.getSettings().setBuiltInZoomControls(true);
//webView.getSettings().setDisplayZoomControls(false);
webView.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
WebSettings webSetting = webView.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setDisplayZoomControls(false);
//webSetting.setLoadWithOverviewMode(true);
//webSetting.setUseWideViewPort(true);
int screenWidth = getWindowManager().getDefaultDisplay().getWidth();
webView.setLayoutParams(new RelativeLayout.LayoutParams( screenWidth / 2, LayoutParams.MATCH_PARENT));
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webSetting.setJavaScriptEnabled(true);
webSetting.setBuiltInZoomControls(true);
webSetting.setAllowContentAccess(true);
webSetting.setEnableSmoothTransition(true);
webSetting.setLoadsImagesAutomatically(true);
webSetting.setLoadWithOverviewMode(true);
webSetting.setSupportZoom(false);
webSetting.setUseWideViewPort(true);
webSetting.setAppCacheEnabled(true);
webSetting.setSupportMultipleWindows(true);
webView.setVisibility(View.VISIBLE);
}
public void loadPageIntoWebView(String htmlFilename){
AssetManager mgr = getBaseContext().getAssets();
try {
String htmlContentInStringFormat = "";
WebView webView = (WebView) findViewById(R.id.webView);
String frameVideo = "<body>Video From YouTube<br><iframe width=\"420\" height=\"315\" src=\"https://www.youtube.com/embed/2a7f29Jvihc?wmode=transparent\" frameborder=\"0\" allowtransparency></iframe></body>";
htmlContentInStringFormat = frameVideo;
webView.loadDataWithBaseURL(null, htmlContentInStringFormat, "text/html", "utf-8", null);
} catch (Exception e) {
e.printStackTrace();
}
}
This code is working well and playing YouTube videos on newer phones (Android OS4.4-7).
What I should change to get it working on Android 4.0.3 as well ?
this is the photo showing the gray background without playing youtubevideo after clicking on the button play inthe middle of the screen:
Solved!
After I added the following line it works on Android 4.0.3 aswell:
webView.setWebChromeClient(new WebChromeClient() {});
It is not mandatory but I added the line before this line:
webView.setWebViewClient(new WebViewClient()
Hope that this solution will help other collegues working with Epson Moverio BT-200 smart glasses etc.
;-)
I create a service that loads data from a remote server and returns HTML data. This data I put to my WebView. All work good but have one problem: If some word is too long, WebView adds horizontal scroll. I add CSS file with break-work, word-wrap but it doesn't help.
JSONObject jsonObject = new JSONObject(strResult);
String content = jsonObject.getString("postContent");
TextView postTitle = (TextView) view.findViewById(R.id.postTitle);
postTitle.setText(jsonObject.getString("postTitle"));
WebView postContent = (WebView) view.findViewById(R.id.postContent);
postContent.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
postContent.getSettings().setLoadWithOverviewMode(true);
postContent.getSettings().setUseWideViewPort(true);
postContent.getSettings().setBuiltInZoomControls(true);
postContent.getSettings().setJavaScriptEnabled(true);
postContent.loadDataWithBaseURL("file:///android_asset/", content, "text/html; charset=utf-8", "utf-8", null);
I did face completely similar problems and finally realized that I misused the css options for that. Just add word-break: break-all; word-break: break-word to css style for body and/or headers and it's done
<head>
<style type="text/css">
body {text-align: center; word-break: break-all; word-break: break-word}
h1 {font-size:large; word-break: break-all; word-break: break-word}
h2 {font-size:medium; word-break: break-all; word-break: break-word}
</style> </head>
Some more details for css properties can be found here or there
Please be careful, as word-break option could seriously impact the readability of the text in WebView. Only use it when you really need it.
Apparently:
setLoadWithOverviewMode(true) loads the WebView completely zoomed out
setUseWideViewPort(true) makes the Webview have a normal viewport (such as a normal desktop browser), while when false the webview will have a viewport constrained to its own dimensions (so if the webview is 50px*50px the viewport will be the same size)
so i recommend you don't use setUseWideViewPort, the following code is for similar task that worked good:
final WebSettings webSettings = webView.getSettings();
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSettings.setEnableSmoothTransition(true);
webView.setBackgroundColor(Color.parseColor("#00000000"));
String before = "<html><head><style type=\"text/css\">#font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/w_yekan.ttf\")}body {font-family: MyFont;font-size: 14px;text-align: right;}</style></head><body><div style=\"direction:rtl !important;; text-align:right !important;\">";
String after = "</body></html>";
String myHtmlString = before + Utils.editString(DoaText) + after;
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
webView.loadDataWithBaseURL(null, myHtmlString, "text/html", "UTF-8", null);
i hope this answer be a good solution for you .
webview.setVisibility(View.VISIBLE);
webview.getSettings().setJavaScriptEnabled(true);
//webview.getSettings().setPluginsEnabled(true);
webview.getSettings().setPluginState(PluginState.ON);
webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webview.getSettings().setAllowFileAccess(true);
webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setBlockNetworkLoads(false);
webview.setWebChromeClient(new WebChromeClient() {});
final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = getHTML1();
webview.loadDataWithBaseURL("", html, mimeType, encoding, "");
}
public String getHTML1() {
Log.d("trailer_2 HTML","ok");
String html = "<iframe class=\"youtube-player\" style=\"border:0;
width: 100%; height:96%; padding:0px;
margin:0px\"id=\"ytplayer\" type=\"text/html\" src=\"http://www.youtube.com/embed/"
+ "H7Ht-m2QMDY"
+ "?fs=0\" frameborder=\"0\">\n"
+ "</iframe>\n";
return html;
}
I was tried lot of.Its working for Tablet Devices but not working for mobile devices ?
I have also mention hardwareAcelator=true in manifest bur not working ?
I am new to android. I am developing epub reader for android devices. webview shows text in left alignment. i want it to be justify. i am not sure this is text alignment problem.
This is my webview settings:
final WebView mainWebView = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = mainWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
mainWebView.setWebViewClient(new MyCustomWebViewClient());
mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
mainWebView.loadUrl("my html page");// loding my html pages here
mainWebView.getSettings().setUseWideViewPort(true);
i used this code for text alignment
mainWebView.loadUrl("javascript:(function addCSSRule(selector, newRule) { " +
"var mySheet = document.styleSheets[0];"+
"if (mySheet.addRule) { " +
"mySheet.addRule(selector, newRule);" +
"} else {"+
"ruleIndex = mySheet.cssRules.length;"+
"mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);" +
"}"+
"})addCSSRule(selector, newRule)");
mainWebView.loadUrl("javascript:addCSSRule('p', 'text-align: justify;');");
if i remove mainWebView.getSettings().setUseWideViewPort(true); means i am getting justify text.
Screenshot of webview:
i want it to be like this:
i don't know whats wrong in my code. mainWebView.getSettings().setUseWideViewPort(true); allows to zoom. don't know why it kills text alignment. please help me to overcome this issue.
Thanks in advance.
It doesn't seem like you're applying your webSettings to the web view. I'm looking for something along the lines of
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);
so perhaps your javascript isn't firing because it's not on... ?
I want to display local html file on a WebView. (Android 2.3.3)
The HTML contains Hebrew text. I want the text to be justified, so in my css file I do the following:
body
{
text-align: justify; direction: rtl;
}
But for some reason the text end up being messed up:
And this is definitely not "justified" but more aligned to the left.
Any idea how can overcome this problem?
It's working perfectly fine on any other browser than the WebView. (Including WebKit based ones)
This code worked for me:
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings settings = myWebView.getSettings();
settings.setDefaultTextEncodingName("utf-8");
String webtext = "שלום";
String summary = "<html lang=\"he\"><body><p dir=\"rtl\">" + webtext + "</p></body></html>";
myWebView.loadData(summary, "text/html", null);
}