Tipster: Introduction

A tip calculator is quite a simple application. When you go with friends to a restaurant and wish to divide the check and tip, you simply add the tip percentage to the total and divide by the number of diners. I have seen this application on my simple cell phone too. So I thought of implementing it in Android as a means to learn how it all works.

When I looked at the various tutorials, each one demonstrated a specific set of features. I tried different tutorials and then set about to write an application which would be as close to a real world application. Obviously this meant using different features of the API. The end result was a good enough application which used lots of features all in one application.

I know that many developers want a short tutorial with just the code pieces and brief explanations. Somehow, I cannot just post code and few comments. I always end up writing such tutorials as if I am speaking out to a live person.

So here it is, whatever I learnt and applied, for your perusal.

 

Building Blocks

I am assuming that you have read the Google Android website and know a bit about Android applications. At least enough to know how to build and run the Hello World example. It would be best if you read through this set of API examples.

So, lets proceed.

Android uses XML files for the Layout of widgets. In our example project, the Android plugin for Eclipse generates a main.xml file for the layout. This file has the XML based definitions of the different widgets and their containers.

There is a strings.xml file which has all the string resources used in the application. A default icon.png file is provided for the application icon.

Then there is the R.java file which is automatically generated (and updated when any changes are made to main.xml). This file has the constants defined for each of the layout and widget. Do not edit this file manually. The plugin is does it for you when you do a clean build.

In our example we have Tipster.java as the main Java file or the Activity.

Creating the project using the Android Eclipse Plugin

Google tutorials highlight how to use the plugin. Using the Eclipse plugin, create an Android project named Tipster. The end result will be a project layout like the following screen shot.

project layout

Fig. 1 - Project layout for Tipster in Eclipse

Creating the Layout and placing the Widgets

The end goal is to create a layout as shown in the following screen shot.

screen layout

Fig. 2 - The Tipster screen layout.

Widgets and layouts:

For this screen layout we will use the following layouts and widgets

  • TableLayout - provides a good control over screen layout. This layout allows us to use the HTML Table tag paradigm to layout widgets
  • TableRow - this defines a row in the TableLayout. Its like the HTML TR and TD tag combined.
  • TextView - this View provides a label for displaying static text on the screen
  • EditText - this View provides a text field for entering values.
  • RadioGroup - this groups together radio buttons
  • RadioButton - this provides a radio button
  • Button - this is the regular button
  • View - we will use a View to create a visual separator with certain height and color attributes

Familiarize yourself with these widgets as you will be using these quite a lot in applications you build. When you go to the Javadocs for each of the above, do look up the XML attributes. This will help you correlate the usage in the main.xml layout file and the Java code (Tipster.java and R.java) where these are accessed.

I came across a UI tool Droid Draw, that lets you create a layout by drag-and-drop of widgets from a palette, just like any form designer tool. However, I would recommend that you create the layout by hand in XML, at least in your initial stages of learning Android. Later on you, as you learn all the nuances of the XML layout API, you can delegate the task to such tools.

The Layout file - main.xml

This file has the layout information. I have posted the file below. The source code comments make the file quite self-explanatory.

A TableRow widget creates a single row inside the TableLayout. So we use as many TableRows as the number of rows we want. In this tutorial we use 8 TableRows - 5 for the widgets till the visual separator below the buttons and 3 for the results area below the buttons and separator.

Open code in a window

TableLayout and TableRow

After examining the main.xml, you can gather that the TableLayout and TableRow are straightforward to use. You create the TableLayout once, then insert a TableRow. Now you are free to insert any other widgets like TextView, EditView, etc. inside this TableRow.

Do look at the attributes, especially android:stretchColumns,  android:layout_column,  android:layout_span which allow widget placement like the way you would use use a regular HTML table. I recommend that you follow the links to these attributes and read up on how they work for a TableLayout.

 

Controlling input values

Look at the EditText widget in the main.xml file at line 19. This is the first text field for entering the 'Total Amount' of the check. We want only numbers here. We can accept decimal numbers because real restaurant checks can be for dollars and cents, and not just dollars. So we use the android:numeric attribute with a value of decimal. So this will allow whole values like 10 and decimal values 10.12, but will prevent any other type of entry.

This is a simple and concise way to control input values, thus achieving two things -

  • saving us the trouble of writing validation code in the java file Tipster.java, and
  • ensuring that the user does not enter erroneous values.

This XML based constraints feature of Android is quite powerful and useful. You should explore all possible attributes that go with a particular widget to extract maximum benefits from this XML shorthand way of setting constraints.  In a future release, unless I have missed it completely in this relase, I wish that Android allows for entering ranges for the adroid:numeric attribute, so that we can define what range of numbers we wish to accept.

Since ranges are not currently available (to the best of my knowledge), you will see later on that we do have to check for certain values like zero or empty values to ensure our tip calculation arithmetic does not fail.

« 1 2 3 »