Whether you work a full-time job as an app developer, take on the periodic contract gig, or simply build smartphones apps as a hobby, one common task you’ll find yourself repeating time and time again is creating an “about” dialog. The about dialog provides a quick means for communicating the most important elements regarding an installed application. The about dialog has evolved into a fundamental tool for users and developers alike.

There is no right or wrong way to implement an about dialog. The key though is that the dialog should give the user at a glance the application title, version, and some sort of contact information. On a smartphone where there is limited screen real-estate, it helps if the dialog is not only informative, but also simple and professional looking. Smartphone users have also come to expect touchable “hot spots” that initiate actions such as opening a web page or dialing a support number.

After reinventing the wheel so to speak while coding the about dialogs for my first couple of Android apps, I eventually came up with a flexible template of sorts. The approach has some advantages besides the consistent look and feel it brings to my complete offering of applications. The implementation uses raw text files for both the legal fine print (i.e., my software user agreement) and also for the standard information (i.e., title, version, etc.). The latter file allows me to use basic HTML tags as formatting attributes. Finally, with just a couple of lines of code, I can activate numerous intents on the dialog, including launching web pages, dialing phone numbers, and composing emails.

This tutorial shows you how to create your own about dialog template. You can either follow the step-by-step instructions, or download the entire project and import it into Eclipse.

1.       Create a new Android project in Eclipse targeted at SDK 1.6 or higher.

2.       Add an about.xml file to your /res/layout folder. The layout is a simple table with two text views and one image view. Note we use the stretch column attribute so that our table columns adjust dynamically to the content we will provide in our raw text files.

about.xml

<?xml version="1.0" encoding="utf-8"?>


<TableLayout


xmlns:android="http://schemas.android.com/apk/res/android"


android:layout_width="wrap_content"


android:layout_height="wrap_content"


android:stretchColumns="*">


<TableRow>

<ImageView
android:layout_width="wrap_content"

android:layout_height="wrap_content"


android:src="@drawable/cube"


android:layout_gravity="left|center"/>


<TextView


android:id="@+id/info_text"

android:gravity="center"
android:layout_gravity="center"

android:layout_width="fill_parent"


android:layout_height="fill_parent" />


</TableRow>


<TableRow>


<TextView


android:id="@+id/legal_text"


android:layout_width="fill_parent"

android:layout_height="wrap_content"
android:textSize="10dip"

android:textStyle="italic"


android:layout_span="2"


android:layout_margin="8dip"


android:textColor="#cccccc" />


</TableRow>

</TableLayout>

3.       In the /res/drawable folder, include an image that you’ll want to represent your app. If you examine the layout for about.xml, you’ll see my image is called cube.png.

4.       In the /res/layout folder, you’ll provide a default main.xml file.

main.xml

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


android:orientation="vertical"


android:layout_width="fill_parent"


android:layout_height="fill_parent">

<TextView
android:layout_width="fill_parent"

android:layout_height="wrap_content"


android:text="This is a simple how to for creating an attractive and informative about box."/>

</LinearLayout>

5.       Before moving on to the source code, you’ll provide two text files for the about box. In your /res folder, you’ll want to create a new directory called /raw. Add two new files: legal.txt and info.txt. These files may contain whatever you’d like your dialog to display. The template will interpret legal.txt as plain text. However, when displaying the contents of info.txt, the code will attempt to honor HTML formatting attributes. Below I provided example content for the files to get you started.

legal.txt

All rights reserved. Not liable for any damage incurred from


use of this software including but not limited to: monetary loss,


temporary paralysis, halitosis, spontaneous combustion,


road rash, and or premature hair loss.


info.txt

<h3>My App</h3>
Version 1.0<br>

Copyright 2011<br>


<b>www.mywebsite.com</b><br><br>

1-800-555-1234

6.       The implementation for the AboutDialog.java class contains a standard dialog constructor, a utility method for reading raw files, and the familiar onCreate override. In this onCreate method, there are a couple noteworthy items. First, the use of the Html.fromHtml method when setting the text view that displays our info.txt content; this is how we are able to use HTML format tags. Also worth mentioning is the call to Linkify.addLinks; this is a handy static Android class that filters your text for things like e-mail addresses, phone numbers, and web URLs. When a pattern is recognized, the text is automatically changed to a link and associated with available intent providers. In our sample above, this means users will be able to tap on the website or the phone number, and the device will respond in kind by doing “the right” thing.

AboutDialog.Java

package com.authorwjf;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.text.Html;
import android.text.util.Linkify;
import android.graphics.Color;
import android.widget.TextView;
public class AboutDialog extends Dialog{
private static Context mContext = null;
public AboutDialog(Context context) {
super(context);

mContext = context;

/**
}
* Standard Android on create method that gets called when the activity initialized.

*/


@Override

public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.about);
TextView tv = (TextView)findViewById(R.id.legal_text);

tv.setText(readRawTextFile(R.raw.legal));


tv = (TextView)findViewById(R.id.info_text);


tv.setText(Html.fromHtml(readRawTextFile(R.raw.info)));


tv.setLinkTextColor(Color.WHITE);


Linkify.addLinks(tv, Linkify.ALL);

}
public static String readRawTextFile(int id) {

InputStream inputStream = mContext.getResources().openRawResource(id);

InputStreamReader in = new InputStreamReader(inputStream);
BufferedReader buf = new BufferedReader(in);

String line;

StringBuilder text = new StringBuilder();
try {
while (( line = buf.readLine()) != null) text.append(line);
} catch (IOException e) {
return null;

}

return text.toString();

}

}

7.       We need to create a Main.java file that will handle creating a standard Android menu and invoking the about dialog when needed.

Main.java
package com.authorwjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class Main extends Activity {
final public int ABOUT = 0;

/** Called when the activity is first created. */


@Override

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.main);


}

public boolean onCreateOptionsMenu(Menu menu) {

menu.add(0,ABOUT,0,"About");

return true;

}

public boolean onOptionsItemSelected (MenuItem item){
switch (item.getItemId()){
case ABOUT:
AboutDialog about = new AboutDialog(this);
about.setTitle("about this app");

about.show();

break;

}
return true;

}

}

There is no right or wrong way to implement an about dialog; however, the template presented in this post serves me well. If it meets your needs, feel free to add it to your library.

Figure A

My about dialog