Android - can I create an HTML5 screen in a native Android app? - android

I am trying to add a podcast and a youtube channel to my native Android app, but it seems it would be much easier if I just use HTML and access that media as it is on the web.
Is it possible to have an activity be HTML5 or a basic web view? If so, how can I do that?
Thanks!

Yes this is possible, have a look into WebView
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.
You may find some performance/compatability issues but this is the easiest solution and one that I would do as a first step.

Related

How does WebView work in a mobile device? (starts a new browser?)

I'm new to android. I have a question related to WebView.
It's not clear to me how WebView works.
When we use a WebView, does the mobile start a new browser in order to load
the URL (even if the url is online or locally stored on the mobile)?
Cause, I would like to create a native android app (test.apk) with WebView
and its's not clear to me if the app starts from the browser or from
an inline View.
Any tutorial or example would be very helpful
Thanks
A WebView is a view that displays web content right inside your app. It does not have fancy stuff like bookmarks or a history view, but you could build a full featured browser around a WebView. Imagine a WebView as a view that displays a web page.
If you want to start an external web browser app, you can use an Intent to let the system find a suitable app to handle your url.
Webview is :
View that displays web pages.
Provides no browser-like widgets, does not enable JavaScript
Uses WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out.
Check Android Webview for detailed information.

Webview load remote url

First, a disclaimer: i'm completely new to iphone, android or any mobile development. In the other side, i've been developing websites (php, javascript) for long time.
I have a website which is adapted for mobile and works great. But, there are some features i need such as prevent the screen from dimming (my site is designed to be used for many hours without user interaction while being permanently visible or for example being able to send notifications (with sound, etc., to attract user attention)).
This has lead me to consider a webview. From what i've seen, it's about creating a native app which just a webview (browser without toolbars) and using html and javascript to operate. It will use some native functions to perform some native actions (such as the ones i want).
I've searched around and i don't have a specific response to this: can i tell a webview to, permanently load the content from a remote site ? i mean, my site is php based (zend), with many jquery content manipulation. Can i tell him something like LOAD htp://www.mysyite.com and let him do everything else from it ? absolutely no local content applies, everything is remote. The webview would just be an "interface" to the website.
And additional question is: can i use jquery on it ? ajax calls ? geolocation ? i mean, in a browser i can, i just wonder if inside a webview i can.
I've read that phonegap does this. But most of the time, when taking about phonegap and about webview i general, i read people talking about loading locally the page not remotely in a permanent basis.
Finally, yes, i will build a native app in the future. But now, i simply don't have time to learn about android, ios and blackberry at the same time. Thanks a lot for your responses.
For Android only:
Can i tell him something like LOAD htp://www.mysyite.com and let him do everything else from it ? absolutely no local content applies, everything is remote. The webview would just be an "interface" to the website.
Yes, of course you can. Suppose you have a webview in an activity (it's really easy), you would load the web page something like:
WebView myWebView = .... // get a reference from XML or if you just created get its ref
myWebView.loadURL("http://www.mysite.com");
I would start with this API Guide article. Also, taken from WebView JavaDoc:
A WebView has several customization points where you can add your own behavior. These are:
Creating and setting a WebChromeClient subclass. This class is called when something that might impact a browser UI happens, for instance, progress updates and JavaScript alerts are sent here (see Debugging Tasks)
Creating and setting a WebViewClient subclass. It will be called when things happen that impact the rendering of the content, eg, errors or form submissions. You can also intercept URL loading here (via shouldOverrideUrlLoading()).
Modifying the WebSettings, such as enabling JavaScript with setJavaScriptEnabled().
Injecting Java objects into the WebView using the addJavascriptInterface(Object, String) method. This method allows you to inject Java objects into a page's JavaScript context, so that they can be accessed by JavaScript in the page.
Please be also aware that the webview is not that powerful as the phone's browser. Here is a SO thread where a friend posted an interesting question. You might find helpful the answers he got.

How to get the content of website in phonegap?

I have to design a android,ios application for my website.I searched and find out that phonegap can be good one for that.Please provide me info that how to get the content of website in phonegap?On the first page i have buttons like home,contact etc.On click of home button,the home page from website should be shown.
PhoneGap is set of libraries like jQuery.
You normally write html pages and include javascript files from phonegap.
Check out phonegap example project.
Look, what you are talking about is .html,.css,.js files that you can easily get after saving any web page from your web-browser.
Rest you can use in the www folder of your phonegap project. And I
would rather suggest you to go for webview present in the native
android that is nothing but actually would provide you the same
functionality that you have been looking for.
---Edit---
Now as you have said that you want the home page buttons like about us etc. that would be copied via web browser and would be there for you as far as the html code is concerned but if you want it to look well on a small mobile device that you should create a responsive designed html and you should read some good articles about responsive web design. That would actually change your way of thinking about creating applications via html within mobile devices.

Communication with embedded (UI)Webviews in existing iOS and Android Apps

This app already exists in the Apple App store and Android markets. It is an app that uses a lot of native code and is not a candidate to be fully html5ed.
Longwinded Description
I want to have a Web-based series of settings pages. Some of these pages will live locally on the mobile device, and some will be hosted on a remote server. The native app will need to communicate with the local web pages to get and set information in the webpage using javascript.
For instance, the first page shown in the WebView/UIWebview will be a local index page. If the remote website is down, the links on the index page to the remote pages will be greyed out. On loading the WebView, the native app will need to detect the reachability of that page and send javascript to the page to grey out the buttons. Likewise, some settings changes made in the local web pages need to be sent back to the Native app for processing.
Short and Sweet Requirements Summary
Embed remote and local webpages in a webview
Theses webpages will be the same for both Android and iOS
Local pages use JavaScript to get data from and send data to the Native Mobile App
Potential Solution Pathways
A. PhoneGap
I realize that Phonegap would work well for this if my application was entirely a web app. From my reading it seems like Phonegap doesn't really like to be embedded in a native app for part time work.
What? You say it's really easy and I've been grossly misinformed? Enlighten me oh wise one.
B. Roll My Own
I'm open to rolling my own solution, however the methods for getting and setting information via Javascript from the Webviews to the Native Apps seems quite disparate. More-so the getting than the setting (bogus URLs for iOS, very nice AddJavaScriptInterface for Android). Also, it seems like this path could lead to a severe maintenance headache in the future.
Say what? Your genius programmer friend has made a website describing this process in excruciating detail? Tell me more.
C. 3rd Party Library
The perfect 3rd party library that does everything I want (and more!) exists? Save me from my ignorance.
Decision
In the future, it seems like PhoneGap's 'Cleaver' project will be the best way to do this.
Since it's not ready for Android yet, it seems that the current (Early June '12) best solution for write-once-embedded-HTML is to use a fake URL scheme to communicate from the web page to the native app (both platforms can execute JS on the page directly when going from native app to web page).
For Android this is simpler to do. Take a look at WebView's addJavascriptInterface method. You can create your own object with methods that can be called directly in the HTML javascript.
iOS requires a bit of trickyness. Best solution for these types of problems is a couple things:
For callbacks to iOS you will need to basically make up your own URL scheme like native://somehost.com/somepath When your javascript wants to inform the iOS code use window.location = 'native://somehost.com/somepath';
Set the UIWebView delegate to an object that defines webView:shouldStartLoadWithRequest:navigationType: it will look something like this
if ([request.URL.scheme isEqualToString:#"native"]){
if([request.URL.host isEqualToString:#"somehost.com"]) {
//Do the code you need to do here, branch off depending
//on the path and/or host, you can parse parameters here too
return NO; //This will keep UIWebView from trying to actually load
//your made up scheme
}
}
return YES; //If the request isn't one you want to intercept return YES/true
//so UIWebView will load the page
To have your iOS code send information or call functions in your javascript you can use WebView's stringByEvaluatingJavaScriptFromString:. This will return the result of a javascript expression so you can also use it to get some information from the page itself. To call a function use something like this
[webview stringByEvaluationgJavaScriptFromString:#"myJavaScriptFunction();"]
You can also handle the made up scheme in Android by creating a custom WebViewClient and overriding the shouldOverrideUrlLoading method similarly to the iOS code above except the return calls are backwards, you return true if you handled the URL and the WebView should do nothing more, and false if you want the WebView to handle loading. Be sure to create and assign the custom WebViewClient to the WebView using setWebViewClient. To call javascript functions on the actual WebView do something like webview.loadUrl("javascript:myJavaScriptFunction();");
PhoneGap iOS has a concept called Cleaver where you can embed the web view into a native iOS app. Randy McMillian has a good example here. On the Android side work is being done to bring the same functionality. So we are not there yet but we will get there.

How to implement a complete HTML page on Android without using WebView

I have a string which consumes the html code of a form and I want to show that form in my app and it should also work further as on submit it should move forward to next page.
I used WebView, it just shows the page in a static way. It don't support buttons and DatePicker, so I DONT WANT WEBVIEW.
First off, WebView does support buttons, and you could support a DatePicker either by using an HTML/JS one or by doing something fancy to route a request to the Java side of things. I really suspect your insistence on not using WebView is going to prove unproductive.
That said, sure you should show your HTML in your app without using WebView... you could write your own web control or take another (Firefox is open source as is WebKit on which WebView is based, in fact so is WebView itself for that matter). That's going to be a heck of a lot of work though.

Categories

Resources