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