My first Android project in Eclipse: Multiplication Table Generator App using TextWatcher and OnClickListener

After removing the configuration errors that came during running the auto generated Hello World project, I decided to write a Multiplication Table Generator App on Android platform. This is my first android app other than HelloWorld. In this article, I am going to explain how I created the App. It describes the use of TextWatcher and OnClickListener interfaces for event handling.

Multiplication Table Generator contains the EditText-ipNumberTxt component for reading user input – a number. It contains two Buttons '+' and '–' to increment/decrement the number in EditText. The generated output is displayed in TextView-outputTXT. The multiplication table is generated on afterTextChanged event of EditText field.

The download link for complete project is given at end of article.

AndroidManifest.xml file :

An Android application is described the file "AndroidManifest.xml". This file must declare all activities, services, broadcast receivers and content provider of the application. It must also contain the required permissions for the application.

Make sure the AndroidManifest.xml file contains following piece of information.

    <application android:icon="@drawable/icon"

    android:label="@string/app_name">

        <activity android:name=".FirstAndroid1Activity"

                  android:label="@string/app_name">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

GUI Creation

GUI creation is done via the rich editor provided on ADT. The GUI code generated in XML works much similar to HTML.

The UI contains RelativeLayout for control Buttons, EditText and upper TextView component. For displaying output

The UI("res/layout/main.xml") has following Structure:

<LinearLayout>

<RelativeLayout>

<TextView> App Name at Top </TextView>

<Button> + Button </Button>

<EditText> Input Text Field </EditText>

<Button> - Button </Button>

</RelativeLayout>

  <TextView> Result Area </TextView>

</LinearLayout>

String attributes

Android allows you to create attributes for resources, e.g. for strings and / or colors. These attributes can be used in your UI definition via XML or in your Java source code.  The file "res/values/string.xml" contains such attributes.

Our string.xml file :

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

<resources>

    <string name="hello">Welcome to Multiplication Table App</string>

    <string name="app_name">Multiplication Table</string>

    <string name="genButton">Generate Table</string>

    <string name="inc">+</string>

    <string name="dec">-</string>

</resources>

These string resources are applied to UI components using following tag :

android:text="@string/NAME_OF_ATTRIBUTE_ON_STRING.XML_FILE"

eg : The following sets ‘+’ to incButton.

<!-- Increment Button -->

<Button android:id="@+id/incButton"

  android:text="@string/inc">

</Button>

Main Activity Class

Activity represents the presentation layer of an Android application, e.g. a screen which the user sees. An Android application can have several activities and it can be switched between them during runtime of the application.

// FirstAndroid1Activity.java

public class FirstAndroid1Activity extends Activity {

     Button incButton, decButton;

     EditText ipNumberTxt;

     TextView outputTXT;

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

     @Override

     public void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.main);

         // get resources

         incButton = (Button) findViewById(R.id.incButton);

         decButton = (Button) findViewById(R.id.decButton);

         ipNumberTxt = (EditText) findViewById(R.id.inputNumber);

         outputTXT = (TextView) findViewById(R.id.outputTXT);

     }

}

ButtonClickListener for INC/DEC buttons

To change values to ipNumberTxt on  onClick event of incButton and decButton, create following class MultiplicationTableButtonClickListener which implements OnClickListener interface.

// MultiplicationTableButtonClickListener.java

public class MultiplicationTableButtonClickListener

implements OnClickListener {

     EditText valueField;

     boolean isIncreaseBtn;

     public MultiplicationTableButtonClickListener(

EditText valueField, boolean isIncreaseBtn) {

         this.valueField = valueField;

         this.isIncreaseBtn = isIncreaseBtn;

     }

     @Override

     public void onClick(View v) {

         String strVal = valueField.getText().toString().trim();

         int intVal = 0;

         if (!strVal.isEmpty()) {

              intVal = Integer.parseInt(strVal);

         }

         // change value, do not need to calculate multiplication table

         if (isIncreaseBtn) {

              valueField.setText(String.valueOf(++intVal));

         } else {

              valueField.setText(String.valueOf(--intVal));

         }

     }

}

Add following code to FirstAndroid1Activity class

     incListener = new MultiplicationTableButtonClickListener(ipNumberTxt, true);

     decListener = new MultiplicationTableButtonClickListener(ipNumberTxt, false);

     incButton.setOnClickListener(incListener);

     decButton.setOnClickListener(decListener);

The multiplication table logic :

Create a class with public static String getStringTable(int n) method.

// MultiplicationTable.java

public class MultiplicationTable {

     public static String getStringTable(int n) {

         StringBuilder sb = new StringBuilder();

         for (int i = 1; i <= 10; i++) {

              sb.append(n + " x " + i + " = " + i * n + "\n");

         }

         return sb.toString();

     }

}

TextWatcher Implementation :

To generate multiplication table on afterTextChanged event, create following class MultiplicationListener which implements TextWatcher interface.

// MultiplicationListener.java

public class MultiplicationListener implements TextWatcher {

     TextView textView;

     EditText valueField;

     public MultiplicationListener(TextView textView, EditText valueField) {

         this.textView = textView;

         this.valueField = valueField;

     }

     @Override

     public void afterTextChanged(Editable s) {

         String number = valueField.getText().toString().trim();

         if (!number.isEmpty() && !number.equals("0")) {

              textView.setText(MultiplicationTable.getStringTable(Integer.parseInt(number)));

         }

     }

     @Override

     public void beforeTextChanged(CharSequence s, int start, int count, int after) {  }

     @Override

     public void onTextChanged(CharSequence s, int start, int before, int count) { }

}

Add the following lines of code on FirstAndroid1Activity class 

// TextWatcher listener

MultiplicationListener mulListener;

mulListener = new MultiplicationListener(outputTXT, ipNumberTxt);

ipNumberTxt.addTextChangedListener(mulListener);

NOTE: In MultiplicationTableButtonClickListener, we just change the value on input fields. The generation of new table is done automatically because we are adding MultiplicationListener(implementation of TextWatcher interface).

The First App is ready !

Download the project code from here.