How to control webview in android to display proper google visualization maps? - android

I am trying to display geo map using google's visualization in android's webview
My web view settings are as follows -
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setUseWideViewPort(true);
webView.requestFocusFromTouch();
webView.requestFocus(View.FOCUS_DOWN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.setInitialScale(getScale());
//webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());
// String containing js to draw map using google's Visualization:Geochart
String js = "<html><head>" +
"<script type='"+"text/javascript"+"' src='"+"https://www.google.com/jsapi"+"'></script>"+
"<script type='"+"text/javascript"+"'>" +
"google.load('"+"visualization"+"', '"+"1"+"', {packages:['"+"geomap"+"']});" +
"google.setOnLoadCallback(drawRegionsMap);" +
" function drawRegionsMap() {" +
" var data = google.visualization.arrayToDataTable([" +
"['Country', '"+name+"']," + build +
"]);" +
"var options = {colors: ['"+startColor+"', '"+endColor+"']};" +
"var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));" +
"chart.draw(data, options);" +
"}" +
"</script>" +
"</head>" +
"<body bgcolor='#E6E6FA'>" +
"<div id='"+"regions_div"+"' style='"+"width:100%; height: 100%;"+"'></div>" +
"</body>" +
"</html>";
The code is working fine . I get different regions of map with different colors. But I need that only web view get translated in landscape mode by keeping default screen orientation of fragment (activity) as POTRAIT . Also when I click on region a popup displays the proper name of country, but popup also opens outside the region on click on any where in the map. Even I tried on chrome browser in mobile it has same problem. Where as the same visualization is working fine on normal web browser on computer.

Related

How to get bullet points when parsing text with Jsoup?

I am using Jsoup to get the text from an html doc and display it in my android app.
The text cotains a list (<ul><li>).
If I do it like this I get only the text:
val doc = Jsoup.parse(someHtml)
return doc.text()
I tried using wholeText:
val doc = Jsoup.parse(removeImages)
return doc.wholeText()
In this way it keeps some formatting, but still it ignores the bullet points. Is there any way to get the bullet points in the text?
The bullets are rendered by the browser, so they are not a part of the text.
You'll have to add it by yourself, like in this example:
String html = "<html>" +
"<head>" +
"<title>List</title>" +
"</head>" +
"<body>" +
"<ul>" +
"<li>Item 1</li>" +
"<li>Item 2</li>" +
"<li>Item 3</li>" +
"</ul> " +
"</body>" +
"</html>";
Document doc = Jsoup.parse(html);
Element list = doc.select("ul").first();
Elements item = list.children();
for (Element e : item) {
System.out.println("\u2022" + e.text());
}
The output is:
•Item 1
•Item 2
•Item 3
You can replace the bullet with any other character that you like, by replacing the \u2022 code with any other valid code/character.

Highlight the selected text in webview. [Android]

I have certain text in the web view. I can select those text . I want to highlight those text but I have no idea how to do it. Anyone having any idea about it, please help! Thanx!
you need to run java script
public static String Highlightscript = " <script language=\"javascript\">" +
"function highlightSelection(){" +
"var userSelection = window.getSelection();" +
"for(var i = 0; i < userSelection.rangeCount; i++)"
+ " highlightRange(userSelection.getRangeAt(i));" +
"}" +
"function highlightRange(range){"+
"span = document.createElement(\"span\");"+
"span.appendChild(range.extractContents());"+
"span.setAttribute(\"style\",\"display:block;background:#ffc570;\");"+
"range.insertNode(span);}"+
"</script> ";
and
webView.loadUrl("javascript:highlightSelection()");
make sure you enabled javascript
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
In Android 4.1(jellybean), WebView.findAll() is deprecated, we should use WebView.findAllAsync instead.
reference
Wish this help:)

android webview p tag to have 100% width

I have a webview which has a p tag inside and the webview itself is has 90% of the device width by default, but I want that p tag to have a 100% width to fill the whole webview. I tried giving it via style:
<p style="width:100%"></p>
but this throws UnknowFormatConversionException. Here is my code to fill the webview with content:
String head = "<head><style>#font-face {font-family: 'byekan';src: url('fonts/BYekan.ttf');}body {font-family: 'Tahoma';}</style></head>";
String text = "<html>" + head + "<body style=\"background:#e4322f;min-height:" + minHeight + "\"><p style=\"width:100%;background:blue;direction:" + dir + ";font-family:byekan;color:#fff;text-align:justify;float:" + flt + "\"> %s </p></body></Html>";
wv.loadDataWithBaseURL("file:///android_asset/",String.format(text, _content), "text/html", "utf-8", null);
it works fine if I remove that "width:100%", but the p tag will takes the text width but I want it to fill the webview width, how can I achieve that? thanks in advance.

Android WebView Caching Issue

I am working on an Android application where I am using webview to display GIF files downloaded from internet, it is a picture viewer do user can click next and previous to view the next and previous gif files, the issue I am facing is that when user clicks next, for one split second it displays the older html and then updates the webview, I have tried disabling the webview cache but it is of no use, relevant part of the code is.
String base = Common.CACHE_IMAGES_PATH.getPath();
String imagePath = "file://" + base + "/" + forImage;
String html = "<html style=\"height:100%\"><head><META HTTP-EQUIV=\"CACHE-CONTROL\" CONTENT=\"NO-CACHE\"><META HTTP-EQUIV=\"PRAGMA\" CONTENT=\"NO-CACHE\"> </head><body style=\"padding:0x;margin:0px; background-color:#999;height:100%\"><img id=\""
+ System.currentTimeMillis()
+ "\" align=\"middle\" style=\"width:100%;height:auto;\" src=\""
+ imagePath + "\"></body></html>";
webView.loadDataWithBaseURL(Common.FULL_IMAGE_BASE_URL + forImage
+ "?fix=" + System.currentTimeMillis(), html, "text/html",
"utf-8", Common.FULL_IMAGE_BASE_URL + forImage + "?fix="
+ System.currentTimeMillis());
Here I am reading the image from sdcard and displaying it in webview, this code is executed everytime user click next or previous.

Html Checkbox in android webview

I want to know:-
In my project i am using html content and displaying them in android webview. and i am using eclipse ide. this is tiny code.
"<form name =\"frm\">"+
"<input type=\"checkbox\" name =\"First\" value =\"xyz\">xyz<br>"+
"<input type=\"checkbox\" name =\"First\" value =\"abc\">abc<br>"+
"</form>"
my question is how can i get check box state .its checked or unchecked.
or how can i catch the state in my java code.
UPD:-
public String html = "<form name =\"frm\">"+
"<input type=\"checkbox\" name =\"First\" value =\"xyz\">as<br>"+
"<input type=\"checkbox\" name =\"Second\" value =\"zyx\">as<br>"+
"<input type =\"button\" onclick =\"callDoSomething()\"><br>"+
"</form>" +
"<script type=\"text/javascript\">"+
"function callDoSomething() {"+
" var theName = document.frm.First.value;"+
"alert('theName ')"+
"}"+
"</script>";
First, both of your checkboxes are named "First", you should probably name second one "Second". If you want to search checkboxes by value - just add a simple js for loop.
Assuming you want to get the results from your Android code (as opposed to JS event like clicking a button), here's how you get Java boolean value for you checkbox by name:
// assuming your activity is MyActivity, target checkbox name
// is in the targetCheckboxName var and webView has the document
// loaded already
Object jsi = new Object() {
#JavascriptInterface
public String reportCheckboxState(String name, boolean isChecked) {
new AlertDialog.Builder(MyActivity.this).setMessage(name + " is " +
isChecked).create().show();
}
};
webView.addJavascriptInterface(jsi, "injection");
webView.loadUrl(
"javascript:injection.reportCheckboxState(frm." + targetCheckboxName +
".name, frm." + targetCheckboxName + ".checked);"
);
But really, it's a very simple trick. Judging by comments to the question, you should probably read up on JavaScript and WebView.addJavaScriptInterface()

Categories

Resources