My MainActivity.java file looks like below:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String myUrl = "file:///android_asset/index.html";
WebView view = (WebView) this.findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true);
view.getSettings().setDomStorageEnabled(true);
view.getSettings().setSaveFormData(true);
view.setWebChromeClient(new WebChromeClient());
view.loadUrl(myUrl);
}
}
Now, activity_main.xml file contains following codes:
<WebView
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
</android.support.constraint.ConstraintLayout>
And, in the html page index.html, I have been linking CSS and JS files like below:
<link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
<script src="file:///android_asset/js/popper.min.js"></script>
I am seeing the html content; but, the CSS and JavaScript files are not in action at all. The page looks plain. I am new to Android, I am certainly missing something crucial here.
In the html page index.html, use the path names relative to your html page (not file:///android_asset).
So change this:
<link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
<script src="file:///android_asset/js/popper.min.js"></script>
To this:
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/popper.min.js"></script>
with directory structure:
+---assets
¦ +---css
¦ +---js
Related
I am developing an android information app for farmers.Informations will be given in local indian language.I am using webview for that purpose.Informations are stored in html files.The problem is that the informtions which are in local language are not visible.How to solve this?
WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference to WebView of the activity_main layout
mWebView = (WebView) findViewById(R.id.webview);
// Loading an html page into webview
mWebView.loadUrl("file:///android_asset/text.html");
}
Activity main
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res /android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_world" />
</RelativeLayout>
html file
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="UTF-8">
<style>
/** Specify a font named "MyFont",
and specify the URL where it can be found: */
#font-face {
font-family: "MyFont";
src: url('file:///android_asset/b.ttf');
}
h3 { font-family:"MyFont"}
</style>
</head>
<body>
<h3>
ಪ್ರಶಾಂತ
</h3>
</body>
You mean to say you want to show helloworld in regional language. For that you need to create res/values- folder. The android framework will automatically pick up the right language
Details:
http://developer.android.com/guide/topics/resources/localization.html
Below are couple of stackoverflow posts which might help you.
How to show local languages font.
How to use custom font with webview.
Try this
add this statement to your onCreate().
mWebView.getSettings().setJavaScriptEnabled(true);
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference to WebView of the activity_main layout
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
// Loading an html page into webview
mWebView.loadUrl("file:///android_asset/text.html");
}
I am trying to add Arabic custom fontto webView with no luck. In my case, webView renders the default font shipped with the device.
I have tried ttf and otf font types also converted font type to svg through https://everythingfonts.com with no luck
here is my code:
html file stored in the assets folder:
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="UTF-8">
<style>
/** Specify a font named "MyFont",
and specify the URL where it can be found: */
#font-face {
font-family: "MyFont";
src: url('file:///android_asset/fonts/NotoKufiArabic-Bold.ttf') format(‘truetype’); ;
}
h3 { font-family:"MyFont"}
</style>
</head>
<body>
<h3>
مرحبا</h3>
</body>
</html>
MainActivity where i call webView:
public class MainActivity extends Activity {
WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference to WebView of the activity_main layout
mWebView = (WebView) findViewById(R.id.webview);
// Loading an html page into webview
mWebView.loadUrl("file:///android_asset/demo.html");
}
...........
...........
my code is working fine in case of English text and font but nothing for Arabic.
Use <h3 dir="rtl" lang="ar"> arabic text </h3> :
dir="rtl" inform that the text is arabix
lang="ar" renders form right to left
Actually I want to load complete site from internet link but i want to load css files from mobile (means not from internet). Because I want to load all page faster using internal local css file.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="dist/css/font-awesome.min.css" />
</head>
</html>
So Here I want to Load "bootstrap.min.css" and "font-awesome.min.css" from mobile memory only.
My Android Code :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String url = "http://www.MySiteName.com/";
view = (WebView) this.findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true); // Enable JavaScript Support
view.setWebViewClient(new WebViewClient()); // Links open or Navigate in same webView not in Browser
view.loadUrl(url);
}
Please put CSS in assets folder, and refer to CSS by relative path, and load HTML to WebView by loadDataWithBaseURL() method:
if your css file name is mycss.css
StringBuilder data = new StringBuilder();
data .append("<HTML><HEAD><LINK href=\"mycss.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
data .append(tables.toString());
data .append("</body></HTML>");
webView.loadDataWithBaseURL("file:///android_asset/", data .toString(), "text/html", "utf-8", null);
thank you
Because the two other answers are just copy pastas and I happened to have the same issue I will help you with my solution:
You need to specify the file path in the head section of your html file.
Pay attention to the part after href
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="file:///android_asset/bootstrap.min.css" />
<link rel="stylesheet" href="file:///android_asset/font-awesome.min.css" />
</head>
</html>
I just can't get my head around why the other posters just copied and pasted and didn't even read what you were trying to tell them.
I hope this helps.
Be aware that your resources folder can be named differently.
I am loading a html from the assets folder. It is positioned below an image-view. The code works, however it takes a second for the html file to appear on the device.
here is the code:
public class FgmIsChildAbuse extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
WebView mWebView;
mWebView = (WebView) findViewById(R.id.webviewm1);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.loadUrl("file:///android_asset/m1_section1_read.html");
ImageView ImageView1 = (ImageView) findViewById(R.id.ImageView1);
Resources res = getResources(); /** from an Activity */
ImageView1.setImageDrawable(res.getDrawable(R.drawable.images_eyes));
mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);
mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
}
}
Below is an example of one of the html files
<html>
<head>
<title>CFAB</title>
<meta name="viewport" content="width=300, initial-scale=1" />
<link rel="stylesheet" media="all" href="master.css" type="text/css" />
</head>
<body bgcolor=transparent>
<FONT COLOR="#000000" size = 3>
<div class="outer" data-role="page" data-theme="a">
<div class="main" data-role="content">
<div class="tab-content">
<div class="tab1 readtab">
<h3>Female Genital Mutilation (FGM) is Child Abuse</h3>
<p>Over <strong>100,000</strong> women in the UK have been <strong>victims</strong> of Female Genital Mutilation (FGM). The vast majority of these victims will have been subjected to this horrific form of abuse either <strong>before they came to the UK</strong> or they will have been taken, as children, to their parents' <strong>country of origin</strong> to undergo this abuse.</p>
<p>This awareness course is designed to help <strong>practitioners</strong> understand what FGM is as well as the context within which it takes place and the relevant legislation to combat it. Critically, it is to build <strong>confidence</strong> so that professionals are better prepared to identify those children most at risk of FGM and those who may have been victims of this type of abuse.</p>
</div>
</div>
</div>
</div>
</body>
</html>
I want to work with html file, I did it when I deploy it, it won't workout (The input html page need to be shown but it shows webpage not available when I deploy ) ! Error msg also not in LOG !Any help please. Where is the wrong I'm doing ?
public class TestActivity extends Activity {
/** Called when the activity is first created. */
WebView webView =null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
webView =(WebView)findViewById(R.id.web);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android-assets/www/index.html");
}
}
Here my javascript.
function sayhello(){
alert("hi", document.getElementById('name'),value);
}
and html file is here
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body>
What is ur name ?
<input id="name" value="">
<button onclick="sayhello()">say hello</button>
</body>
</head>
</html>
and the layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/web"
android:text="#string/hello"
/>
</LinearLayout>
You need to use:
file:///android-asset/www/index.html
Just get rid of the 's'
UPDATE:
You can also load pages with:
webView.loadDataWithBaseURL(null, html, "text/html", "utf-8",null);
Where the second param is your page to load.