The application architecture
This section explores the architecture of the tutorial's sample application, beginning with a high-level glance at the completed project, then progressing through each of the major steps in its construction. You can follow along step by step to reconstruct the application yourself or you can download the complete project from the Resources section.
This tutorial demonstrates the construction of a simple image processing application, IBM Photo Phun. Figure 1 shows a screenshot from the Eclipse IDE with the project expanded to see the source and output files.
Figure 1. Eclipse project view
The application's UI is constructed with traditional Android development techniques, using a single layout file (main.xml) and a single Activity, implemented in IBMPhotoPhun.java. A single C source file, located in a folder named jni, beneath the project's main folder, contains the image processing routines. The NDK tool chain compiles the C source file into a shared library file named libibmphotophun.so. The compiled library file(s) are stored in the libs folder. A library file is created for each target hardware platform or processor architecture. Table 1 enumerates the application's source files.
Table 1. The required application source files
|IBMPhotoPhun.java||Extends the Android Activity class for UI and application logic|
|Ibmphotophun.c||Implements image processing routines|
|main.xml||Home page of the application UI|
|AndroidManifest.xml||Deployment descriptor for the Android application|
|sampleimage.png||Image used for demonstration purposes (feel free to substitute an image of your own)|
|Android.mk||Makefile snippet used by the NDK to construct the JNI library|
If you don't have a working Android development environment, now is a great time to install the Android tools. For more information on how to set up an Android development environment, see Resources for links to the required tools, plus some introductory articles and tutorials on developing applications for Android. Having a familiarity with Android is helpful in understanding this tutorial.
Now that you have an overview of the architecture and the application, you can see how it looks when running on an Android device.
Sometimes it's helpful to begin with the end in mind, so before you dive into the step-by-step process of creating this application, have a quick look at it in action. The following screenshots were captured from a Nexus One running Android 2.2 (Froyo). The images were captured using the Dalvik Debug Monitor Service (DDMS) tool, which installs as part of the Android Developer Tools Eclipse plug-in.
Figure 2 shows the home screen of the application with the sample image loaded. One quick look at the image and you will understand how I wound up as a programmer and not on the set of some television program, thanks to my "fit for radio" face. Please feel free to substitute your own image when building the application yourself.
Figure 2. Home screen of the IBM Photo Phun application
The buttons across the top of the screen allow you to change the image. The first button, Reset, restores the image to this original color image. Selecting the Convert Image button converts the image to grayscale, as shown in Figure 3.
Figure 3. Grayscale image
The Find Edges button starts with the original color image, converts it to grayscale, then performs a Sobel Edge Detection algorithm. Figure 4 shows the results of the edge detection algorithm.
Figure 4. Detecting the edges
Edge-detection algorithms are often used in machine vision applications as a preliminary step in a multi-step image processing operation. From this point, the final two buttons allow you to make the image darker or lighter by changing the brightness of each pixel. Figure 5 shows a brighter version of the grayscale image.
Figure 5. Increased brightness
Figure 6 shows the edges image a bit darker.
Figure 6. Decreased brightness
Now it is your turn.