All Android devices have SQLite built-in and, consequently, Android applications can use this SQL database to store and manipulate data.

The SQLiteOpenHelper class needs to be derived and the two following methods implemented:

• onCreate: Called when the database is created for the first time. This is where the creation of tables and the initial population of the tables should happen.
• onUpgrade: Called when the database needs to be upgraded. The implementation should use this method to drop tables, add tables, or do anything else it needs to upgrade to the new schema version.

In addition to the two methods, the constructor also needs to be overrriden to indicate the database name as well as the version (starting at 1; if the database is older, onUpgrade will be used to upgrade the database).

Song Explorer v1

The work to do is to implement the Song Explorer app which will make use of a database to store data about artists and tracks. In version 1 of the app, the artists table will be created and populated with data. There will be two buttons namely Show Artists and Show Tracks. On pressing the Show Artists button, a list of artists will be retrieved from the database and displayed on the screen. Pressing the Show Tracks button will initially provoke an error as the version 1 database only contains information about artists. Version 2 of the app will solve the issue.

Note that two methods of the SQLiteDatabase class are useful here:

• execSQL: for executing inserts, updates and deletes
• rawQuery: for executing an SQL query and returning a Cursor object

Song Explorer v2

In version 2 of the Song Explorer app, we add a new table called tracks and populate it with some data. Since we are changing the database schema, we have to change the database version number and implement the onUpgrade method accordingly. Now, pressing the Show Tracks button displays a list of tracks.

Song Explorer v3

In version 3, we add two new buttons. The first one allows us to change the letters of the artists’ names to uppercase and the second one allows us to change the names to lowercase. While in the two previous versions we were concerned only with retrieving data, here we have to update data.

Android Studio allows us to design user interfaces in two ways. The first one is via the powerful Designer Tool which features a drag and drop interface and very complete object inspectors as well as the possibility to immediately preview any changes. The second one involves directly modifying the actual XML files. With Android Studio, one can easily switch between the two.

The basic building block for user interfaces in Android is a View object which is created from the View class. The visual structure of a user interface is generally defined using layouts which are subclasses of the View class. The most commonly used layouts are Linear Layout, Relative Layout and Frame Layout. Other objects such as a TextView, a Button and a Spinner among others are then placed within the layout. The position of those objects within the layout will depend on the type of layout used and on the different attributes of the objects.

A word on the spinner
The spinner is often called a drop-down in other environments. Two examples are shown below (From and To). When clicked on, a pop-up appears and this allows the user to select one of the items. The data source for a spinner is flexible and requires an adapter to work. Android has a number of adapters built-in but one which is simple to use is the ArrayAdapter.

Forex
The first application to develop is one which allows the user to convert among different currencies. The user chooses the currency to convert from and the currency to convert to using two different spinners, then enters the amount in an EditView and finally presses the ‘Convert’ button to get the result. For this user interface, a vertical Linear Layout is used to display the different objects mentioned above one below another.

ForexWithStyle
Now that we have our Forex app working, we want to make it look nicer. In Android, themes and styles are used to override the default look and feel of an application. Styles are just like CSS in web design. A theme is simply a collection of styles.

When building an app, styles are generally defined in /src/main/res/values/styles.xml. In ForexWithStyle we’ll apply the Material Design theme to the Forex app and simply modify some theme based colors which are usually used for branding.

To maintain compatibility with previous versions of Android, it is possible to have two styles.xml files (one found in /src/main/res/values/ and another one found in /src/main/res/values-21/) The latter will be used by devices running Android 5.0 (API 21) and above and the former by devices running previous versions of Android.

Android is a software stack for mobile devices that includes an operating system, middleware and key applications. Android is written by Google and most of its source code is released under the Apache license. Version 1.0 of Android was released in September 2008 and the latest version is currently 6.0 Marshmallow powering smartphones and tablets.

There are over one billion active monthly Android users and Android has become the best-selling mobile platform worldwide surpassing iOS (iPhone/iPad), Microsoft, Blackberry and Nokia with ease.

Android:

• is an application framework which runs on the Linux kernel
• has an ART virtual machine, compatible with a large subset of Java, optimized for mobile devices
• has an integrated browser based on the open source WebKit engine
• provides optimized graphics powered by a custom 2D graphics library
• supports 3D graphics based on the OpenGL ES specification with optional hardware acceleration
• has SQLite (SQL database) for structured data storage
• supports media for common audio, video and image formats (MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF)
• supports GSM telephony
• supports Bluetooth, EDGE, 3G, and WiFi
• supports a camera, GPS, compass, and accelerometer
• finally, provides a rich and powerful development environment called Android Studio which includes an emulator, tools for debugging and memory and performance profiling.

Developing applications for Android

The following needs to be true for someone to be able to develop an Android application:

• The development computer needs to have a Java Development Kit (Oracles’s JDK or OpenJDK are both fine).
• The Android Software Development Kit needs to be installed.
• Android Studio needs to be installed.
• Finally, Android platforms and other components need to be added to the SDK. One example might be the Android 5.1 to target the latest devices or the 2.3.3 platform in order to be able to develop and test applications for older devices running Android 2.2.3.

Java is a powerful programming language which fully supports the object-oriented programming model. A good and free, if somewhat outdated, reference for the language is Thinking in Java (3rd edition) and is available at:

• https://www.knowledge7.com/community/thinking-in-java-3/

A quick start: Hello World

The first application to develop is HelloWorld which should simply display a nice “Hello World!” message when launched. The content of the HelloWorld project as generated by Android Studio should be explored (build.gradle, AndroidManifest.xml, src/main/res/, src/main/java/, etc.) and understood. The HelloWorld app can then be launched on a real Android device to check whether it is working properly.

In Android, apps generally have layouts (screens) which are defined in XML files in src/main/res/layout and behaviour is defined in Java in various files found in src/main/java.

The Activity lifecycle

An activity represents a single screen with a user interface. An application can have multiple independent activities.

When an app starts, Android chooses what activity to start initially based on information found in AndroidManifest.xml and ultimately calls its onCreate method. A programmer can specify what the activity should do when it starts by overriding this method.

What Time Is It?

The second application to develop is called What Time Is It. It displays one button which fills in the whole of its activity. When the button is clicked, the text shown in the button will be updated to the current date and time.

The way to do that is to add an Android button to the activity (this can be done by dragging a button to the layout and making it matching the width and height of its parent (i.e. the whole activity)), modify onCreate to make sure that the button shows the current date and time initially and setOnClickListener to update the label to the current date and time each time the button is pressed. The recommended way to do that is to use a Java inner class.

In addition to the GPS, a mobile device generally have other various sensors like the camera, a compass and an accelerometer. Provided a suitable plugin exists, apps built using Cordova can leverage these sensors. For example, using Cordova Camera plugin, it is possible to add picture taking and picture browsing capabilities to an app.

The work to do is:

• Enhance the app to allow users to take a photo.
• Display the photo just taken in the mobile app.
• Save the photo to the photo album after capture.
• Retrieve a photo from existing photo library.

Mobile devices generally have various sensors like the camera, a GPS, a compass and an accelerometer. It is instructive to see how one can use the standard HTML5 API to, for example, know where the device is located. This then opens all sorts of possibilities like for example, displaying the songs which are the most popular where the user is.

The work to do is:

• Obtain the current coordinates using the HTML5 API. In Cordova, it is important to add the Geolocation plugin to the app.
• Use the Google Maps API to do reverse geocoding (i.e. determine country name given location). It is important to get a Google API key before attempting to use the Google APIs. If you are using Google Chrome, you may find the device sensors emulation feature useful.
• Display the artists and songs of the country we are located (if possible)
• Add a Google Map to the application to show where the user is.

jQuery Mobile has a number of elements like buttons and icons to make the user interface more usable. jQuery Mobile also provides a number of built-in themes as well as allow the developer to customise the CSS attributes of any element being shown.

The work to do is:

• Add a theme to the initial page (including the header and the footer)
• Use custom styles using normal CSS
• Create and use a custom theme made with ThemeRoller
• Fix the position of the header (or the footer)
• Add icons to buttons
• Group buttons

jQuery Mobile is a new Javascript-based web framework for smartphones and tablets. It is based on HTML5 and builds upon jQuery and jQuery UI.

The work to do is to update the website designed in the previous topic to use jQuery Mobile concepts and components:

• Add jQuery Mobile CSS and Javascript to an existing web application
• Change the web page to conform to the page anatomy of jQuery Mobile
• Add a simple pop-up dialog
• Transform a single-page document into a multi-page document
• Add different transitions between pages

The objective is to build a web application which renders properly on the limited screens of mobile devices.

HTML5 provides an API to store data locally in the browser (as opposed as on the server). This is called Local or Web Storage and all current browsers support it.

With Local Storage, it is possible to make web applications more responsive and impose less strain on servers and this is valuable when the number of concurrent users increases beyond a certain limit.

The work to do is:

• Use Local Storage to remember the name of the last country entered by the user.
• Track changes to Local Storage using the storage event.
• Use Local Storage to memorise the songs from a given artist in case the user wants to display details about that artist again. This minimises the number of requests which need to be done to the Web Service while also increasing responsiveness.

AJAX is a powerful technology. It allows client-side applications to send requests to servers and, when the data comes back (most probably in XML or JSON format), the application can manipulate the DOM and, hence, change the layout and content of the webpage being shown.

AJAX programming can be problematic because of the asynchronous behaviour. Callbacks need to be properly designed to prevent surprises.

The work to do is:

• Make AJAX queries to Last.fm to get the most popular songs of the three existing French artists
• Make AJAX queries to Last.fm to get the three most popular artists in France (as well as their songs)
• Allow the user to enter a country name and displays the three most popular artists in that country as well as their songs. At this point, it’s interesting to understand the difference between normal and AJAX form submission.

Javascript is a powerful and expressive programming language. Learning how to write Javascript properly by focusing on its good parts (and ignoring its bad parts) is a necessity if one wants to create maintainable code.

The work to do is:

• Show a simple alert while the webpage (created previously) is loading
• Use window.onload to execute code only when the whole content has been loaded
• Display the number of songs in an alert
• Show additional statistics like number of distinct countries and their names
• Hide all country names using Javascript and some CSS
• Use a timeout and callbacks to show/hide countries every second

The next step is to enhance the application to use jQuery (ready function, selectors, etc), one of the most formidable Javascript libraries ever.

jQuery can be used to easily:

• Display the table of songs with stripes (with the help of some CSS)
• Toggle the striped rows in the songs table when the mouse is over the table
• etc.

Finally, it is also important to know how to use a library like Underscore.js which provides a collection of useful functions (such as map, filter, uniq, etc.) to increase programmer productivity. Underscore.js simplifies existing (non-functional) Javascript code and, hence, make it more maintainable.