Tutorial details

Lesson 19. Creating a simple calculator | App Code for Sale | Preview

Lesson 19. Creating a simple calculator | Android Tutorial

How to write a calculator application

Overview PAGE TOP

In the this lesson we will:

  • write a calculator application

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.

bui.jpg

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 underlined 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.

Reference PAGE TOP

http://startandroid.ru/en/lessons/complete-list/225-lesson-19-creating-a-simple-calculator.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.