I am planning to display images from SD card in a webview in order to take advantage of he built in zoom capabilities of webview. However, I am facing an issue with displaying images that are bigger than screen size (e.g. 1800x1200) to fit the screen initially, like in an ImageView. I want the image to be displayed in full at first and provide zoom control to the users.
I have tried using WRAP_CONTENT for webview's width and height, but that does not work.
Any ideas?
Following is a code snippet I am using:
String path = getRealPathFromURI(mUriList.get(0)); // this gets the file path
webView = (WebView) findViewById(R.id.WebView01);
WebSettings settings= webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
webView.loadUrl("file://" + path);
private WebView mWebView2;
mWebView2 = (WebView)findViewById(R.id.webview);
mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);
mWebView2.loadDataWithBaseURL("file:///android_asset/", "<img src=\"banner5.png\" height=\"98%\" width=\"100%\"/>", "text/html", "utf-8", null);
Images are in the assets folder
If you write your HTML correctly, you don't have to do any "setLoadWithOverviewMode", "setUseWideViewPort" or "setInitialScale". And there is absolutely no reason to enable JavaScript.
This one line worked for me:
webView.loadDataWithBaseURL("file://" + directory,
"<img src=\"" + name + "\" width=\"100%\"/>", "text/html", "utf-8", null);
The underlining HTML code is:
<img src=YourImage.png width="100%" />, by not setting a height, its aspect ratio will be kept.
That did the trick for me:
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true)
Related
I saw a lot of post and suggestions saying to use "utf-8", and I am using it but getting some extra characters in the web view.
mWebView.loadDataWithBaseURL("file://" + file1, htmltext, "text/html", "utf-8", null);
I also tried
WebSettings settings = mWebView.getSettings();
settings.setDefaultTextEncodingName("utf-8");
I have a very large html file(around 10k lines of only text). When I use Webview to load this html content, it shows only around few hundreds and remaining space is blank(white space). Can someone help me with this issue? Thank You.
Following is my code:
WebView mWebView;
mWebView = (WebView) findViewById(R.id.activity_main_webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.loadUrl("file:///android_asset/test.html");//test.html in assets folder
I also try with webView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null) or webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null) but it does'nt help.
I just found solution for my issue with Webview. The reason Webview can't display whole content of html file because the html is not well constructed, some html tag like <abc#.com> will not be read by Webview. So I convert content to correct html form then it works.
I'd like to play youtube video by using android webview. But I want to fit my webview to youtube video size. Until now, my implementaion is like below.
String vid = TextUtils.extractYoutubeVId(body);
if (StringUtils.isBlank(vid)) {
return null;
}
String html = "<html > <head></head> <body style=\"margin:0 0 0 0; padding:0 0 0 0;\"> <iframe width=\"100%\" height=\"100%\" src=\"http://www.youtube.com/embed/___\" frameborder=\"0\"></iframe> </body> </html> ";
html = html.replace("___", vid);
mImportedVideoWebview.setWebChromeClient(new WebChromeClient());
WebSettings webSettings = mImportedVideoWebview.getSettings();
webSettings.setJavaScriptEnabled(true);
mImportedVideoWebview.loadData(html, "text/html", "utf-8");
mImportedVideoWebview is just a WebView and its width is MATCH_PARENT and height is 350dp.
By using above code, I can play youtube video.
But, I want to put my webview width to screen width and fit my webview's height to youtube video height proportionally. Anyone help me plz!
Thanks!
Use below code snipe hope it will
<html><body><iframe frameborder=0 allowfullscreen width=100% height=100% src=link frameborder=0 allowfullscreen></iframe></body></html>
You can use:
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
I am loading .html file on Android Webview. That htmnl file contains textFields. So as the user taps over textfield our webview is getting zoom in. As a result my webpage getting widened (out of content )
I am using the code as:
WebSettings webSettings = m_webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(false);
webSettings.setLoadsImagesAutomatically(false);
webSettings.setUseWideViewPort(false);
webSettings.setDefaultZoom(ZoomDensity.FAR);
webSettings.setSupportZoom(false);
Please let me know if anything i am missing.
Thanks in advance
You need to add to your html:
It's also a good idea to add the next settings to your webview.
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
webView.setInitialScale(1);
settings.setJavaScriptEnabled(true);
settings.setSupportZoom(false);
You need to change your code in order to set zooming controls in your app
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setLoadsImagesAutomatically(false);
webSettings.setUseWideViewPort(false);
webSettings.setSupportZoom(true);
Try using
webview.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
I am new to android. I am facing two problems right now 1. I parsed xml file and showed it in webview which contains videos and text . When i click on videos it will not play . In xml videos are youtube embed.
Why is it so?
1.First problem :code and image
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.web_view);
Intent intent=getIntent();
String urlsting=intent.getStringExtra("str");
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setPluginsEnabled(true);
mWebView.setInitialScale(100);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.loadDataWithBaseURL(null, urlsting,"text/html", "utf-8", null);
}
When i clcik on video it starts browsing and shows only black screen,then nothing will happen.
![][1]
2. I have you-tube embedded videos url which I given in html tag and try to load it .They are also not working for me. I checked number of questions and blogs and also made no of settings then also unable to show video . Help will be appreciated .Thanks in advance.
String video= "<table bgcolor=\"#666666\"><tr><td><iframe width=\"300\" height=\"260\" frameborder=\"0\" id=\"player\" type=\"text/html\"src=\"http://www.youtube.com/embed/iiLepwjBhZE?enablejsapi=1&origin=example.com\"></iframe></td></tr><tr><td><iframe width=\"300\" height=\"260\" frameborder=\"0\" id=\"player\" type=\"text/html\"src=\"http://www.youtube.com/embed/lBMMTeuJ_UQ?enablejsapi=1&origin=example.com\"></iframe></td></tr><tr><td><iframe width=\"300\" height=\"260\" frameborder=\"0\" id=\"player\" type=\"text/html\"src=\"http://www.youtube.com/embed/BZMkY3y7nM0?enablejsapi=1&origin=example.com\"></iframe></td></tr><tr><td></table>";
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setPluginsEnabled(true);
//mWebView.loadDataWithBaseURL(null,load,"text/html","UTF-8",null);
mWebView.loadData(video,"text/html","UTF-8");
In this case I load the youtube embeded videos to webview but they are also not working.
![][2]
I am using android 2.3.3version.I also want clarification that is there any requirement of install adobe flash player on emulator, but i think no because videos are working in browser. can anybody tell i am right or wrong?? please try to give me solution because i stuck with this problem long ago..
I also tried using object tag as follows:
String obj="<object width=\"300\" height=\"260\"><param name=\"movie\" value=\"http://www.youtube.com/embed/iiLepwjBhZE?enablejsapi=1&origin=example.com\"?version=3&hl=pt_BR&rel=0\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/embed/iiLepwjBhZE?enablejsapi=1&origin=example.com\" ?version=3&hl=pt_BR&rel=0\" type=\"application/x-shockwave-flash\" width=\"480\" height=\"330\" allowscriptaccess=\"always\" allowfullscreen=\"true\" /></object>";
You need to
set a WebChromeClient to your WebView
web.setWebChromeClient(new WebChromeClient());
and turn on hardwareAccelerated value
<application
android:hardwareAccelerated="true"...
check out http://developer.android.com/reference/android/webkit/WebView.html and read HTML5 Video support part.
This works for me...
I guess, you are using iframe tag in your html code. Change it with object tag. I mean, you must use object instead iframe. An example here:
<object width="480" height="330"><param name="movie"
value="http://www.youtube.com/v/"here is your video id"?version=3&hl=pt_BR&rel=0">
</param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/"here is your video id"?version=3&hl=pt_BR&rel=0"
type="application/x-shockwave-flash" width="480" height="330" allowscriptaccess="always" allowfullscreen="true" /></object>
Use the code below:
webview.getSettings().setPluginsEnabled(true);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAllowFileAccess(true);
webview.loadUrl(url);
Try this and thick it as accepted if your problem solved :)
have you tested your app in actual device? Because the videos which are embedded like this i.e. iFrame are taking more time to get loaded. In my case, same thing was happening then I changed the webview settings to,
getSettings().setPluginsEnabled(true);
but after that it was not working on emulator and in device it was loading so I thought its not working but just today I tried the same thing and it was working fine with my surprise. So you just need to add this line of code.
Second thing is that only those videos which are embedded in iframe tag are supported by enabling plugins to true.
This does it:
myWebView.getSettings().setPluginState(PluginState.ON);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setAllowFileAccess(true);
myWebView.setWebChromeClient(new WebChromeClient());
And enable hardware acceleration too!
Follow this source, Youtube video should play
String youtubeId = "iiLepwjBhZE";
int width = rl.getWidth();
int height = rl.getHeight();
WebChromeClient mWebChromeClient = new WebChromeClient(){
public void onProgressChanged(WebView view, int newProgress) {
/*
view.loadUrl("javascript:(function() { " +
"document.querySelector('iframe').setAttribute('style', 'width: 1080px; height: 1920px'); " +
"})()");
*/
}
};
String video= "<table bgcolor=\"#666666\"><tr><td><iframe width=\"" +
width +
"\" height=\"" +
height +
"\"frameborder=\"0\" id=\"player\" type=\"text/html\"src=\"http://www.youtube.com/embed/" +
youtubeId +
"?enablejsapi=1&origin=example.com\"></iframe> </td> </tr><tr><td></table>";
//
webView.getSettings().setPluginState(PluginState.ON);
webView.setWebChromeClient(mWebChromeClient);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAppCacheEnabled(true);
webView.setInitialScale(1);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
//mWebView.loadDataWithBaseURL(null,load,"text/html","UTF-8",null);
webView.loadData(video,"text/html","UTF-8");