Adding local css/js files from asset folder to remote web page - android

I have an Android webView which loads a remote web page. As the code of this page is controlled by a colleague I can ask him to change it but I would prefer to find a solotion totally on client side.
For reasons regarding traffic and performance we want to store our css and javascript files locally on the client and not load them from the server.
What I came up with are two ideas but none of them worked out so far.
Store all the files in the asset folder and have the html refer to them
Problem: The webview seems to be not allowed to access "file:///..." urls
Question: Is there a way to work around this issue?
Just ignore all those references in the html and just inject all those files after loading them in the webview
Question: Just how do I add those files (.css / .js) to my already loaded html?

You can build a local WebView in the following way
The Activity (LocalWebviewActivity.java)
The Layout (activity_localwebview.xml)
The Assets folder (in the root of "assets" folder, create the folder "css" and place "style.css" in here)
You refer to JS files the same way you refer to CSS StyleSheets
LocalWebviewActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class LocalWebviewActivity extends Activity {
WebView myWebView;
StringBuilder mySBcontent;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_localwebview);
myWebView = (WebView) findViewById(R.id.webkit);
mySBcontent = new StringBuilder();
mySBcontent.append("<html>");
mySBcontent.append("<head>");
mySBcontent.append("<link type='text/css' rel='stylesheet' href='css/style.css'>");
mySBcontent.append("</head>");
mySBcontent.append("<body>");
mySBcontent.append("<h1>My Heading</h1>");
mySBcontent.append("<p>My HTML content</p>");
mySBcontent.append("<p><img style='width:150px;' src='myImg.png' /></p>");
mySBcontent.append("</body>");
mySBcontent.append("</html>");
myWebView.loadDataWithBaseURL("file:///android_asset/", mySBcontent.toString(), "text/html", "UTF-8", "");
}
}
activity_localwebview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:id="#+id/webkit"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>

Related

Create an app from responsive site that uses ajax calls that return both html and javascript - easiest way?

I'm looking for the easiest and most efficient way to create a mobile app from my website that is already fully responsive.
I have a page that contains 5 different ajax calls. Each ajax call returns both html and javascript which is created by a PHP script. All JavaScript that is is not user dependent is in a separate file. There is also a separate file for all css.
I think converting the code (using phonegap) will be very difficult because of the ajax calls. Preferably I would like to have an app that installs an icon on someone's phone and that just opens my website in a browser (without showing anything of that browser).
My question: What is the easiest way to create an app for android and ios?
Webview? If you are looking to build an app that just opens your webpage and does not show that its opened AOSP browser or any other browser for that matter then just use webview. It would open like any other activity in your app but the content (depending on how big you want the webview) will just be your site. I did a very similar thing in my android app and here is the code.
Java Class:
public class website extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_website);
String url = "http://www.YourWebsiteHere.co.uk";
WebView view = (WebView) this.findViewById(R.id.webViewSite);
view.getSettings().setJavaScriptEnabled(true);
view.loadUrl(url);
}
XML File:
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/webViewSite"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" /> </RelativeLayout>
http://developer.android.com/reference/android/webkit/WebView.html

Display HTML page with external JavaScript via Android assets

So I have been looking everywhere and doesn't seems to find working answer for this. I have dynamic html page create using iMapBuilder and it has 3 external js files. Before I have added dynamic contents html was working just fine being under assets directory with following command:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.ground_floor);
WebView wv;
wv = (WebView) findViewById(R.id.webview);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/imap5custom.html");
}
}
After adding dynamic content with 3 Java Script external files which are also under root assets folder, html doesn't work any more. I have tried:
mWebView.loadDataWithBaseURL
but still didn't work for me.

Get latest content from websites in android app

I want to get the content to be displayed in my android application as soon as it is updated on a particular website.
how can I do that? I'm new to android development....please help
sure use WebView - Android documentation here: http://developer.android.com/reference/android/webkit/WebView.html
You can also consider using PhoneGap and make a hybrid native html5 app.
Hi you can use WebView for this purpose please have alook as the example is given below
res/layout/main.xml –
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
the WebViewActivity.java is as follows
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class WebViewActivity extends Activity {
private WebView webView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://www.google.com");
}
}
do not forget to have permission at manifest
<uses-permission android:name="android.permission.INTERNET" />
You can display the web content using these ways,
Through cross platforms, such as PhoneGap with jQuery Mobile or Sencha touch etc,.
Through Android WebView class.
If you try to display a web content using Android WebView class, refer this sample tutorial.

simplest way to load android webview

what is the simplest way to load android webview?
I have already specified webview in the activity layout, how can i load a website on it while running the emulator. I have had many problems with resources not identified and the main_activity.out.xml files have been giving me troubles. A simple webview to load a webpage would be nice.
...
<WebView
android:id="#+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
You are getting main_activity.out.xml because you are trying to compile Xml files (main_activity.out.xml have the focus and you clicked run). In general if this error happens you have to
Delete the xxx.out.xml
Open any .java file in src/ by double click in the file so it has focus and the cursor is in there
Run your project and everything should be OK now
to load WebView you have to declare your webview component in your xml
<WebView
android:id="#+id/myWebView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
and then in your activity in onCreate() method call
// get reference to your view
WebView webview = (WebView)findViewById(R.id.myWebView);
// load your WebView content
webview.loadUrl("http://google.com/");
Simplest way?
Get access to WebView via
WebView webview = (WebView)findViewById(R.id.webView1);
webview.loadUrl("http://stackoverflow.com/");
Greets
Flo
main_activity.out.xml has been created maybe beacuse you pressed the run button on Eclipse while your main_activity.xml was opened. Eclipse tryed to compile your xml and not your application.
To do that right, try to select the reference of your application inside the project explorer on the left and then click the Run button.
In order to manage at best the webview in your android project, just read the documentation:
http://developer.android.com/guide/webapps/webview.html

Load URL Within App

I am looking for a way to load an external website within a page in the app.
For example have a website link for a company on the main screen and when clicked have the transition effect to another page that displays the company website, but also allows you to include the header and footer for the page. You can also include options to go back, or other links.
I believe this is possible, so any help with this would be great. Thanks,
I believe you are talking about Android's WebView class.
http://developer.android.com/reference/android/webkit/WebView.html
A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.
http://developer.android.com/resources/tutorials/views/hello-webview.html
You just need to use the webview view. After that it's pretty simple to place the view wherever you want and send it to any url you'd like.
WebView mWebView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("http://www.google.com");
}
I currently am using this method and it works.
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class ThirdActivity extends Activity
{
WebView webview;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.html_view);
webview = (WebView)findViewById(R.id.viewHTML);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient());
webview.loadUrl("https://twitter.com/LaserPros");
}
}
don't forget your xml file mine is named html_view it has a webview in it with the id of viewHTML the file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewHTML"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
in the class activity the important thing to (and what most people miss when giving an answer) is to set your web view as the WebClient otherwise your phone will want to open the url in a external browser.

Categories

Resources