About Box for an Android App

How to Build a Reusable About Dialog for Your Android Apps

The venerable About Box, whatever the Operating System, whatever the program the chances are it has an About option. There is a Wikipedia entry for it, http://en.wikipedia.org/wiki/About_box, and it is useful for support:

Hello, there is a problem with my application?

Hi, can you press About and tell me the version number?

Since it is likely to be required again and again it is worth having a ready made About Box class that can be easily added to any new App that is developed. As a minimum the About should display a dialog with a title, e.g. About My App, the Version Name from the manifest, some descriptive text (loaded from a string resource) and an OK button. This tutorial presents the code for an About Box class that can be dropped straight into any App.

The Version Name can be read from the PackageInfo class. (PackageInfo is obtained from PackageManager which itself is available from the App’s Context). Here is a method to read an App’s Version Name string.

[code lang=”Java”]static String VersionName(Context context) {
try {
return context.getPackageManager().getPackageInfo(context.getPackageName(),0).versionName;
} catch (NameNotFoundException e) {
return "Unknown";
}
}[/code]

Continue reading

Add a Simple List to an App

Lists are a basic building block of software. When writing applications getting a user to select an item from several options is a requirement that often occurs. Hence many frameworks have built in support for lists to make the programmer’s life easy, the Android SDK included. There is a View that can support a straightforward scrollable list of items, unsurprisingly called ListView. To support the ListView Android provides an extension to Activity, and yes it is called ListActivity. This tutorial shows how easy it is to add a list to an App using ListActivity. The example here will display a list of coffee types from which a user can select. It is easy to swap the list for anything required in your particular App.

In Eclipse open the App that needs a list selection screen. (Alternatively create a new project using the File menu, select New then Android Project. Fill in the Project Name, here MyAndroid is used. Click Next and select the build target from the installed APIs, any of the installed APIs will work, it can be changed later if required. Click Next and enter the Package Name in the required format, e.g. com.example, leave Create Activity checked and enter Main as the Activity name, click Finish.) The contents of the list are stored in a string array which can defined in a values file. With the res/values directory highlighted in the Eclipse Package Explorer use the File menu, select New then Android XML File. In the File box enter coffeelist.xml and click Finish. With coffelist.xml open select the XML view in the editior (using the tabs at the bottom of the edit dialog). Replace the contents with the following code to generate the source of the list for the program (see Copying Code from the Articles for tips).

[code lang=”xml”]<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="coffeeMenu">
<item>Filter</item>
<item>Americano</item>
<item>Latte</item>
<item>Espresso</item>
<item>Cappucino</item>
<item>Mocha</item>
<item>Skinny Latte</item>
<item>Espresso Corretto</item>
</string-array>
</resources>[/code]

Add a new class to the App (with the package highlighted under the src folder select New from the File menu then Class), here the new class is called CoffeeList, the class extends ListActivity. The class overrides OnCreate() as normal and there it can load the items for the list, replace the CoffeeList class in CoffeeList.java with this code: Continue reading

Button and Image Borders in Android with Nine Patch Files

When designing a User Interface you may want to change the default View backgrounds to give an App its own look. In most cases the backgrounds must be able to scale correctly for different size screens on a variety of devices. Android uses Nine Patch files to provide support for scaling of backgrounds as View sizes change.

Button Background Scaling Correct and Incorrect In this picture the word Text has a background that is a rounded rectangle (a black border with a grey background). The rectangle has then been uniformly scaled to fit in Longer Text. As a result of scaling the corners and vertical edges have distorted to give the rounded rectangle an unbalanced look. Compare that to the second Longer Text where the background has maintained its balance.

How 9 Patch Scaling WorksTo correctly scale the background selected parts of the image are scaled in a particular direction or not scaled at all. Which parts are scaled and in which direction are shown in this diagram. The X indicates that corners are not scaled, the vertical edges are scaled vertically, the horizontal edges are scaled horizontally and the central area is scaled in both directions. This is probably why it is called a Nine Patch file, a.k.a 9patch .

  • 4 Corners +
  • 2 Vertical Edges +
  • 2 Horizontal Edges +
  • 1 Central Area
  • = 9 Areas (Patches) in Total

Continue reading

Adding State Graphics to an ImageButton with Inkscape

A good User Interface should be intuitive and attractive. Sometimes simple pictures can replace words, or many words on a screen. Symbols, colors and pictures can make a screen attractive and easy to use. If the screen design is using buttons with symbols instead of text then the ImageButton can be used. Provide the button with custom designed graphics using programs such as Inkscape. Out of the box it supports three visual states, normal, focused and pressed. Without a custom image the states are just plan colored rectangles, grey for normal, orange for focus, dark yellow for pressing. However it is easy to add a custom image for each of these states using a graphics program. This allows an ImageButton to be made unique. Inkscape (http://inkscape.org) is a good program for producing graphics for the Android platform. Inkscape is:

  • Fully featured
  • Free
  • Supports multiple screen densities (vector based)
  • Access to thousands of free images via the Open Clip Art Library (http://www.openclipart.org/)
  • Plenty of online tutorials.

Images can also be generated with programs such as GIMP, (http://www.gimp.org) or Paint.NET (http://www.getpaint.net/), but working with vector instead of raster images makes it easier to produce the variety of sizes needed for multiple screen densities. Those that are not familiar with working in Inkscape can use the built in tutorials (under the Help menu) and tutorials at http://inkscapetutorials.wordpress.com/ to teach themselves.

In the following example an ImageButton is used to represent Play (or Start, or Go). Open a new Android project in Eclipse using the File menu, select New then Android Project. Fill in the Project Name, here Button Press is used. Click Next and select the build target from the installed APIs, any will do, for example Android 1.5 if it is installed. Click Next and enter the Package Name in the required format, for example biz.tekeye.buttonpress, leave Create Activity as default, click Finish. The three images to be used can be built in Inkscape, or alternatively they are available from the Open Clip Art Library (http://www.openclipart.org/) as a Scalable Vector Graphic (SVG) file:

Image ImageButton State Project Name Open Clip Art Name Open Clip Art Search
Play Button in Normal State normal normal.png Architetto — pulsante 02 pulsante
 Play Button with Focus focus focus.png Blue Play Button With Focus play button
 Play Button Pressed pressed pressed.png Play Button Green With Blue Border play button

Continue reading

Animated Images in Android

Android has good support for user interface animation. Views can be animated and it is easy to sequence images using the AnimationDrawable class. This article will show a simple animation using a sequence of traffic light images. The first step is to generate the required images to be sequenced. Each image represents one frame of the animation, they will usually be the same size with changes between each frame as required. Here the images are generated using the open source vector graphics program Inkscape (see http://inkscape.org). A copy of the image used is available from the Open Clip Art Library (http://www.openclipart.org/), searching for Traffic Lights Turned Off, select the image, click on the View Image button and save the file from your browser. Open the file in Inkscape.

Four images will make up the animation, they will show the sequence of traffic lights as used in the United Kingdom, red, red and yellow, green, yellow and back to red. The SVG image has all the lights available, they are just hidden behind a translucent circle. To generate the first image select the circle covering the red light and delete it. Then from the Edit menu use Select All, or Ctrl-A, to highlight the whole image. Using the File menu select Export Bitmap. In the Export Bitmap dialog under Bitmap size enter 150 in the Height box, choose a directory and file name for the file to be generated, e.g. red.png. Click the Export button to export the bitmap. Delete the circle covering the yellow light (click away from the image to remove the selection boxes, click the yellow and press Delete). Use Select All again and export as before to a file, e.g. red_yellow.png. Use the Edit menu and choose Undo, twice, restoring the covers for the red light and yellow light and then delete the circle covering the green light, as was done for yellow. Export to green.png. Again use undo to cover the green light then delete the circle covering the yellow light and export the bitmap in the same way as before to yellow.png.

Exporting an Image from Inkscape Continue reading

Portrait and Landscape Screen Layouts in Android

Portrait v LandscapeWhen developing an Android App the Activity screens that form the user interface should be useable in both portrait and landscape modes. Most Android devices can be used in either orientation so screen support for both is helpful to the user. To achieve this produce layouts for each mode, alternatively design the portrait layout and then wrap it a ScrollView. Here is a screen from a simple App (it converts a loan’s annual interest rate to the monthly rate and vice versa).

Portrait Screen in Android

Here is the layout for the screen, you can try the following layouts by copying them into a new project in Eclipse (see Copying Code from the Articles for tips). When running the simple example here use the QVGA screen when configuring the Android Virtual Device (AVD). Continue reading

Saving an Activity’s State when it’s Interrupted

Android developers soon become aware of the precarious existence of the Activities they code, with the Android operating system pausing, stopping or killing Activities as it sees fit (see the Android Lifecycle on the Android developer site and the article Testing Android’s Activity Lifecycle). Despite this users expect Applications to be robust, when the user returns to a screen, e.g. after taking a call, the screen is expected to be the same as when it was last seen, that includes any values entered into any fields.

The term state is used to describe what data an application has at a moment in time, what it is displaying and the work it is performing. For example a quiz App would know which questions have been asked, how many answers were correct or incorrect and which question was comming next. If a user running the App went and checked their email, on return to the quiz it would not be expected to have restarted. For the quiz to pick up where it left off the internal state of the quiz is preserved. Android has built in support for saving and restoring state, by overriding a couple of functions an Activity’s state can be preserved. Let us look at a simple App and its internal state. Try the following test with a single EditText in an Activity. Continue reading