Hybrid Android Applications w/WebView

Many Android applications look entirely native but have at least a portion of the UI implemented using a WebView to display HTML and JavaScript.  (In this context, "native" means a UI created in the traditional Java/XML approach and not the NDK).

This post illustrates the use of WebView along w/WebViewClient and WebChromeClient.  I have created a small demonstration application ("AndroidWebView") which is available on github.

AndroidWebView has four tabs to demonstrate different use cases (screenshots below).

The first tab ("About") illustrates the simple use case of reading a locally stored HTML file into a WebView.  Using HTML is a frequent solution for non-interactive, wordy content such as T&C, EULA or perhaps application help pages.  As you can see AboutFragment.java was extremely simple to implement.

"About" tab selection

"Client" tab selection

The second tab ("Client") reads a remote web page and manages interaction w/the remote server using a WebViewClient.  Again ClientFragment,java is small and simple.

DemoWebViewClient.java reacts to events such as "page started", "page finished", "authorization requests", "errors", etc.  I have implemented the interesting methods to write log messages so we can view the progress using "adb logcat".

The received web page (above, on the right) and there are four navigation buttons (i.e. "Contact", "News", "Products", "Services") which are implemented as HTTP HREF(s).  Within DemoWebViewClient.shouldOverrideUrlLoading() I have arranged for the "News" button to invoke NewsDialogFragment.java rather than perform the usual HTTP GET.  This illustrates the use case of HTML content invoking an Android View.

It is useful to view the log output ("adb logcat") when viewing the "Client" tab.  When reviewing the log, you will see the various requests necessary to render the page.  This illustrates that you can detect and perhaps alter the content, or react to certain events.  The log output should look similar to this: DemoWebViewClient(20221): interceptRequest:http://www.digiburo.com/mobi/db_index.html DemoWebViewClient(20221): pageStarted:http://www.digiburo.com/mobi/db_index.html DemoWebViewClient(20221): load:http://www.digiburo.com/mobi/db_index.html DemoWebViewClient(20221): interceptRequest:http://www.digiburo.com/css/stylesheet2.css DemoWebViewClient(20221): load:http://www.digiburo.com/css/stylesheet2.css DemoWebViewClient(20221): interceptRequest:http://www.google-analytics.com/ga.js DemoWebViewClient(20221): load:http://www.google-analytics.com/ga.js DemoWebViewClient(20221): interceptRequest:http://www.digiburo.com/grafix/home_logo.png DemoWebViewClient(20221): load:http://www.digiburo.com/grafix/home_logo.png DemoWebViewClient(20221): interceptRequest:http://www.digiburo.com/grafix/canvas1.png DemoWebViewClient(20221): load:http://www.digiburo.com/grafix/canvas1.png DemoWebViewClient(20221): interceptRequest:http://www.google-analytics.com/__utm.gif? //deleted DemoWebViewClient(20221): load:http://www.google-analytics.com/__utm.gif? //deleted DemoWebViewClient(20221): pageFinished:http://www.digiburo.com/mobi/db_index.html

The third tab ("JS") illustrates interaction w/JavaScript.

JavaScriptFragment.java creates a WebChromeClient  DemoWebChromeClient.java which enables support like connecting the JavaScript console to write via the Android log or report loading progress.  If you wish to use JavaScript Alert() rather than an Android View, you will need to use WebChromeClient.onJsAlert() (which I have implemented for this purpose).  The "generateAlert" button produces a JavaScript alert.

JavaScriptFragment.java relies upon DemoJavaScript.java to expose Java methods which can be invoked from JavaScript.  I have implemented simple examples to illustrate using Android logging or return a String to JavaScript.  The "@JavascriptInterface" is limited in many ways regarding parameters and return results: primitives and Strings usually work but you will want to experiment before promising complicated arguments.  Note that generatePrimes() returns a String which contains a JSON formatted array, and this is a successful approach.  Pressing "generateLog" will cause an Android log message to be written (visible via "adb logcat").  "generatePrime" invokes a Java based prime number generator and returns the results as a JSON formatted String.

What about the use case of Java invoking JavaScript?  This is also possible and pressing "Invoke JavaScript" shows how.  "Invoke JavaScript" is a standard Android button which invokes WebView.loadUrl() for bridge.html which writes a log entry back to Java.

The fourth tab ("Simple") SimpleFragment.java demonstrates the trivial use case of reading a remote file without WebViewClient or WebChromeClient.  

Updated BackProp1 Now Available

I have recently updated the back propagation neural network "backprop1."

BackProp1 is a derivative of an image classification project I delivered in 2001.  It has been available on  SourceForge since 2009 (and my own web site prior to that).  BackProp1 consists of a library which can be embedded in your own projects and three demonstration applications:

1. demo1 is a point classifier which can determine if a point is above or below the line y = -5x + 2
2. demo2 is the XOR classifier
3. demo3 features an interactive UI and trains to recognize the digits 0-9.  You can select a pattern and then submit it for classification.  You can also flip the state of individual pixels and discover if the classifier will still recognize the pattern.

Get the latest version of backprop1 on github.

This new offering includes:

1. Demo3 now should look OK on any platform (was effectively broken on OS X).
2. Now builds w/gradle.

Spring Messaging w/JMS and Nevado

I have recently created some small demonstration applications to illustrate how to use Spring Messaging with ActiveMQ and Nevado/AWS as JMS providers.

Complete sources are available on GitHub.  You will need to obtain a copy of ActiveMQ to exercise SimpleQueueDriver and SimpleTopicDriver.  To use SqsQueueDriver w/AWS requires an AWS account.  Be sure to update aws.properties with your account information.

Since there is plenty of Spring documentation available, I'll skip the tutorial and directly address the sources on GitHub.

SimpleQueueDriver starts two listeners and then writes a TextMessage.  Even though there are two listeners, only one will receive the text message (property of being a queue).

SimpleTopicDriver also starts two listeners and then writes a TextMessage.  Both listeners will react to the message (property of being a topic).

SqsQueueDriver illustrates using Nevado as a JMS adapter for Amazon Web Services Simple Queue Service(SQS).  Nevado is valuable because SQS does not expose a JMS API, yet many enterprise architectures are hosted on AWS and rely upon JMS.

SqsQueueDriver also starts two listeners and then writes a TextMessage.  Even though there are two listeners, only one will receive the text message (property of being a queue).

WxTrax: Example Android 4.x Application Using Android Studio/Gradle

For your consideration I offer "WxTrax" which is a complete Android 4.x application that collects weather reports from the U.S. National Weather Service.  WxTrax illustrates the following concepts:

• Employs Android 4.x constructs (i.e. loaders, fragments, etc)
• Plays nice w/Android Studio (currently on preview version 0.2.6)
• Builds using Gradle (currently 1.7)
• Is decomposed into an application and a library
• Uses Google Maps V2
• AppWidget example
• Weather stations and observations are stored in SqlLite using a ContentProvider

Complete sources are available on GitHub

The US National Weather Service (NWS) makes weather reports available as a XML based web service.  Hourly weather observations are usually performed by automated stations colocated at airports, so the observations use the IATA location code (i.e. KPDX for Portland, KSEA for Seattle, KSFO for San Francisco, etc).  To obtain the current observation for Los Angeles you would use the URL http://www.weather.gov/xml/current_obs/KLAX.xml

WxTrax will allow you to specify stations of interest and collect these weather reports for you.  WxTrax can also display a Google Map w/the station location.

There is also the concept of a "favorite" station which always displays the most recent report on the "splash" page.  If you display the associated AppWidget, the favorite station temperature is given.

Now on to the sources...

WxTraxLib contains code I wrote in 2010 for the first version of this application.  There is no user interface code here, but it does contain the network support, weather observation collection, XML parser, ContentProvider, etc.  I like to decompose my applications into modular components like this.  The user interface tends to change quite a depending upon the product team while the supporting components tend to be more stable.  Breaking a project into modules allows for reuse across multiple products and makes for easier testing of the "headless" pieces.

WxTrax2 is new, freshly updated to use Android 4.x components.  All the UI components reside in this module, and depends upon WxTraxLib.

MainActivity exists to host fragments and handle the communication logic between them.  Fragment switching is performed within TabHelper.  You can add a station from the menu and a dialog will accept your command.  StationListFragment will display the known stations.  Selecting a station will show the collected observations (via ObservationListFragment).  A long press on a station row will allow you to delete a station or select it as the "favorite" station.  Selecting the "map" fragment allows Google Maps to display station locations.

Android Fragment Tour - Encore

I have updated FragmentDemo (GitHub) with a new Fragment (Fragment Five) that connects to a custom CursorAdapter.  Fragment Four uses a custom SimpleCursorAdapter.  Both example use Loaders/ContentProviders.

Android Fragment Tour

The time has come to embrace Android fragments, especially since well over half of devices are now on Android 4.x.  There are many tutorial applications available and here is one more on the pile.  This post and supporting example application demonstrate:

• Use of Android fragments (i.e. Fragment, ListFragment, DialogFragment or PreferenceFragment.
• Navigation between fragments and activities
• Use of the ActionBar, TabListener and menu support.
• Use of Custom ArrayAdapter
• Use of Custom CursorAdapter
• Using a ContentProvider/ContentResolver and Loader
• Use of maven

Complete application sources are available on github, the demonstration application was created on API 16 using Android Studio (thanks, JetBrains) and includes maven support.  This demonstration does not use the compatability libraries so you will need API 14 or later to successfully run.

At application start you should see these:

Tab 1

Tab 2

Tab 3

Tab 4

Tab 1 represents a simple form implemented as a Fragment.  (source)

Tab 2 illustrates a simple scrolling list of US states implemented as a ListFragment (source) with a resource (source) for the data source.  A short press on a row brings up a detail view (source) and a long press prompts for delete.  Short/long press interaction requires the use of a custom listener (source) to dispatch a request to MainActivity (source) for service.  The delete is not actually performed, but does provide an opportunity to illustrate the use of a PreferenceFragment (source)

Tab 3 is another ListFragment (source) example, this time w/a custom ArrayAdapter (source) and multiple row types (you can see from the above image there is a simple row w/a hex string and a more complex row w/radio buttons). The data source for Tab 3 comes from a ContentProvider (source) whose values are randomly generated at application startup (source).  One final feature of this example is that it employs a list header (source) and footer (source).  The footer contains a EditText and Button widgets which can be detected within ThreeFragment.java (source)

Tab 4 is yet another ListFragment example (source), this time w/a custom CursorAdapter (source) which employs a Loader fed from the ContentProvider (source).  As shown in the illustration, the row type consists of an image and a string.

All of these Fragments are "owned" by MainActivity (source) which also provides the ActionBar at the top of the display.  The ActionBar provides the tabs which are used for navigation between Fragments.  The tab navigation code resides within TabHelper (source).

About

Settings

Depending upon your phone, you might see three vertical dots at the top right of the display (or you might have a menu key).  There are two menu options, one for an "About" display and the other for "Settings" (user preferences).  Option menu dispatch is provided by MainActivity which invokes MenuActivity to display the menu fragments.

Note that MenuActivity (source) does not have tab navigation, so when a user selects a menu option the only way to return is the "back" button or by pressing the "FragDemo" icon on the ActionBar (top left). 

The "About" Fragment (source) is implemented as a WebView w/the HTML supplied as part of the application.

The "Settings" Fragment (source) is an example of a PreferenceFragment.

FragmentDemo can be built and deployed entirely from the command line using the Android maven plugin.  I created FragmentDemo using the "Android-QuickStart-Archetype as described here which was quite helpful.

What to code after "Hello, Android"

This post is for those of you who have decided to join the thundering herd of computer nerds who have decided to code for Android.  "Hello, Android" was easy... what happens next?

How about the "Three Activity" project?  The "Three Activity" application demonstrates

• Navigation between three separate displays (each backed by a dedicated Activity)
• How to pass arguments between Activity(s)
• How to create and use a Button
• How to create and use an EditText
• How to use Android log statements
• Special guest appearance w/AndroidManifest.xml

The "Three Activity" project is a simple application consisting of the three Activity(s) shown below.

StartActivity

MiddleActivity

EndActivity

Complete source code for this example is contained on GitHub