In the this lesson we will:

- write a calculator application

Translated by Taras Leskiv (http://android-by-example.blogspot.com/)

We will try to develop the simplest calculator, which takes two numbers and applies addition, subtraction, multiplication and division operations to them. The result is displayed as a complete expression.

Let’s create an project:

Project name: P0191_SimpleCalculator
Build Target: Android 2.3.3
Application name: SimpleCalculator
Package name: ru.startandroid.develop.simplecalculator
Create Activity: MainActivity

Open main.xml and draw the screen:

<?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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout1"
        android:layout_marginLeft="10pt"
        android:layout_marginRight="10pt"
        android:layout_marginTop="3pt">
        <EditText
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginRight="5pt"
            android:id="@+id/etNum1"
            android:layout_width="match_parent"
            android:inputType="numberDecimal">
        </EditText>
        <EditText
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginLeft="5pt"
            android:id="@+id/etNum2"
            android:layout_width="match_parent"
            android:inputType="numberDecimal">
        </EditText>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout2"
        android:layout_marginTop="3pt"
        android:layout_marginLeft="5pt"
        android:layout_marginRight="5pt">
        <Button
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:text="+"
            android:textSize="8pt"
            android:id="@+id/btnAdd">
        </Button>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:text="-"
            android:textSize="8pt"
            android:id="@+id/btnSub">
        </Button>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:text="*"
            android:textSize="8pt"
            android:id="@+id/btnMult">
        </Button>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:text="/"
            android:textSize="8pt"
            android:id="@+id/btnDiv">
        </Button>
    </LinearLayout>
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_marginLeft="5pt"
        android:layout_marginRight="5pt"
        android:textSize="12pt"
        android:layout_marginTop="3pt"
        android:id="@+id/tvResult"
        android:gravity="center_horizontal">
    </TextView>
</LinearLayout>

We have two input fields here, four buttons and a text field for output. Have a look at inputType attribute for EditText. It defines the type of the content. I’ve specified numberDecimal - that is field can only contain numbers and a dot, it will not allow letters. It is convenient as you don’t have to code any checkings.

For the TextView gravity attribute is specified. It defines how will the text in the TextView will be located. Don’t confuse it with layout_gravity which is responsible for TextView location in a ViewGroup.

Now we need to read field contents, define which buttons has been pressed and output the needed result. Open MainActivity.java and write the code:

public class MainActivity extends Activity implements OnClickListener {

  EditText etNum1;
  EditText etNum2;

  Button btnAdd;
  Button btnSub;
  Button btnMult;
  Button btnDiv;

  TextView tvResult;

  String oper = "";

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // find the elements
    etNum1 = (EditText) findViewById(R.id.etNum1);
    etNum2 = (EditText) findViewById(R.id.etNum2);

    btnAdd = (Button) findViewById(R.id.btnAdd);
    btnSub = (Button) findViewById(R.id.btnSub);
    btnMult = (Button) findViewById(R.id.btnMult);
    btnDiv = (Button) findViewById(R.id.btnDiv);

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

    // set a listener
    btnAdd.setOnClickListener(this);
    btnSub.setOnClickListener(this);
    btnMult.setOnClickListener(this);
    btnDiv.setOnClickListener(this);

  }

  @Override
  public void onClick(View v) {
    // TODO Auto-generated method stub
    float num1 = 0;
    float num2 = 0;
    float result = 0;

    // check if the fields are empty
    if (TextUtils.isEmpty(etNum1.getText().toString())
        || TextUtils.isEmpty(etNum2.getText().toString())) {
      return;
    }

    // read EditText and fill variables with numbers
    num1 = Float.parseFloat(etNum1.getText().toString());
    num2 = Float.parseFloat(etNum2.getText().toString());

    // defines the button that has been clicked and performs the corresponding operation
    // write operation into oper, we will use it later for output
    switch (v.getId()) {
    case R.id.btnAdd:
      oper = "+";
      result = num1 + num2;
      break;
    case R.id.btnSub:
      oper = "-";
      result = num1 - num2;
      break;
    case R.id.btnMult:
      oper = "*";
      result = num1 * num2;
      break;
    case R.id.btnDiv:
      oper = "/";
      result = num1 / num2;
      break;
    default:
      break;
    }

    // form the output line
    tvResult.setText(num1 + " " + oper + " " + num2 + " = " + result);
  }
}

I guess everything is clear in comments. Read values, define the button, perform an operation and output to the text field. Activity is a listener of the clicked buttons.

Save everything and run.

Let’s extend the functionality by making menu with clearing fields and exit items. Items will be named Reset and Quit.

Add two constants - these will be IDs of the menu items.

public class MainActivity extends Activity implements OnClickListener {

final int MENU_RESET_ID = 1;
 final int MENU_QUIT_ID = 2;

 EditText etNum1;

(add only the highlighted code)

And write code for menu creation and processing:

  // menu creation
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // TODO Auto-generated method stub
    menu.add(0, MENU_RESET_ID, 0, "Reset");
    menu.add(0, MENU_QUIT_ID, 0, "Quit");
    return super.onCreateOptionsMenu(menu);
  }

  // process menu item clicks
  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    // TODO Auto-generated method stub
    switch (item.getItemId()) {
    case MENU_RESET_ID:
      // clear the fields
      etNum1.setText("");
      etNum2.setText("");
      tvResult.setText("");
      break;
    case MENU_QUIT_ID:
      // exit the application
      finish();
      break;
    }
    return super.onOptionsItemSelected(item);
  }

Save everything and run. Two menu items appeared:

Reset - clears all the fields
Quit - closes the application

As your homework you can implement division by zero checking. And output a message using Toast or right into the result field.

In the next lesson we will:
- explore animation of View-components