I'm currently working on developing an Android app that will display a countdown for an upcoming event. I have utilized HTML, CSS, and JavaScript to create the functionality, which works perfectly fine when tested in a regular HTML environment. However, when integrated into Android Studio and displayed using WebView, the HTML page loads but without the associated CSS and JavaScript. Both the CSS and JavaScript files are located in the same directory as the HTML file. Below is a snippet of the code:
<html>
<head>
<link type="text/css" rel="stylesheet" href="flipclock.css" />
</head>
<body>
<div class="clock-builder-output"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="flipclock.js"></script>
<style text="text/css">body .flip-clock-wrapper ul li a div div.inn, body .flip-clock-small-wrapper ul li a div div.inn { color: #CCCCCC; background-color: #333333; } body .flip-clock-dot, body .flip-clock-small-wrapper .flip-clock-dot { background: #323434; } body .flip-clock-wrapper .flip-clock-meridium a, body .flip-clock-small-wrapper .flip-clock-meridium a { color: #323434; }</style>
<script type="text/javascript">
$(function(){
FlipClock.Lang.Custom = { days:'Days', hours:'Hours', minutes:'Minutes', seconds:'Seconds' };
var opts = {
clockFace: 'HourCounter',
countdown: true,
language: 'Custom'
};
var countdown = 1495943700 - ((new Date().getTime())/1000); // from: 05/28/2017 09:55 am +0600
countdown = Math.max(1, countdown);
$('.clock-builder-output').FlipClock(countdown, opts);
});
</script>
</body>
</html>public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String url = "file:///android_asset/www/index.html";
WebView view = (WebView)this.findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true);
view.loadUrl(url);
view.setWebViewClient(new MyBrowser());
}
private class MyBrowser extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading (WebView view,String url){
view.loadUrl(url);
return true;
}
}
}