I have created a xamarin android application in which I want to show a slideshow in webview for which I have created Html variable and in the html I have used css and javascript. It is working in chrome browser when I browse it but in application, javascript doesn't work. Sample code is given below. In the img tag src value is a hosted url which I'm using and in this sample code I have just mentioned the name of those images.
//AndroidManifest.xml code
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
//Activity sample code
[Activity(Theme = "@style/Theme.AppCompat.Light.NoActionBar")]
public class MMWebView : AppCompatActivity
{
WebView webView;
string NonMeetingLeftPath = "";
protected override void OnCreate(Bundle savedInstanceState)
{
try
{
base.OnCreate(savedInstanceState);
// Create your application here
SetContentView(Resource.Layout.WebView);
webView = FindViewById<WebView>(Resource.Id.webView);
webView.SetWebChromeClient(new WebChromeClient());
webView.SetWebViewClient(new WebViewClient());
webView.ClearCache(true);
webView.ClearHistory();
webView.Settings.JavaScriptEnabled = true;
webView.Settings.JavaScriptCanOpenWindowsAutomatically = true;
webView.Settings.DomStorageEnabled = true;
NonMeetingLeftPath = Intent.GetStringExtra("NonMeetingLeftPath" ?? "Not Recv");
if (!string.IsNullOrEmpty(NonMeetingLeftPath))
{
string html = @"
<!DOCTYPE html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
</head>
<body>
<div class='slideshow-container'>
<div class=mySlides fade>
<div class=numbertext'>1 / 3</div>
<img src='vision-goal-action-success.jpg' style='width:100%'>
</div>
<div class='mySlides fade'>
<div class='numbertext'>2 / 3</div>
<img src='8_Room_MRMback.jpg' style='width:100%'>
</div>
<div class='mySlides fade>
<div class='numbertext'>3 / 3</div>
<img src='SampleImage.jpg' style='width:100%'>
</div>
</div>
<br>
<div style='text-align:center'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
<script type='text/javascript'>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName('mySlides');
let dots = document.getElementsByClassName('dot');
for (i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace('active', '');
}
slides[slideIndex - 1].style.display = 'block';
dots[slideIndex - 1].className += 'active';
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
";
webView.LoadData(html, "text/html", null);
}
}
catch (Exception ex)
{
}
}
}
internal class ExtendWebViewClient : WebViewClient
{
public override bool ShouldOverrideUrlLoading(WebView view, string url)
{
view.LoadUrl(url);
return true;
}
}
//Design code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="fill_parent">
<android.webkit.WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/webView" />
</RelativeLayout>
[This is how it looks in the browser. Images slides automatically and 3 dots are shown under them](https://i.stack.imgur.com/mHnTG.jpg)
