Creating a simple calculator

  • 0

Creating a simple calculator

Category : Uncategorized

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.

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


Leave a Reply