SKR4307: Mobile Applications

Sem. II 2019/2020
Lab Exercise 4b: Android Simple Programming – Calculator app

Step 1: Building the interface - activity_main.xml file

For the calculator app, we are require the following elements.

1. TextView
2. Buttons

TextView
We use the textView to show users the numbers they have written and also to display
the result of the calculations we are going to do.
Buttons
Each of the numbers will have a different button, from 0-9 and we will have four
additional buttons for addition, subtraction, multiplication and division.
Other than this, we require a button to calculate the operation, a button for decimals,
and a button to clear the display.

Requirements
EditText To display numbers and the result.
Button Digits 0-9
Button Operational buttons (+, -, *, /, =)
Button Decimal button
Button Clear display button

Figure 1: Calculator app UI

Layout – RelativeLayout
Step 2: Coding the Functionality – MainActivity.java
i. Creating objects for the UI elements in activity_main.xml file.

Create objects for all 15+ buttons and an object for the EditText.

Button btn_1, btn_2, btn_3, btn_4, btn_5, btn_6, btn_7,

btn_8, btn_9, btn_0, btn_Add, btn_Sub, btn_Mul,
btn_Div, btn_calc, btn_dec, btn_clear;

EditText ed1;

Variables to store first number and second number. Type is float.

float Value1, Value2;

Boolean variables to check the operation (+, -, *, /) selected by the user.

boolean isAdd, isSub, isMul, isDiv;

ii. Fetching the values from the UI in the activitity_main.xml file.

Inside the onCreate function, fetch all values and assign it to the created object
in (i) using the findViewById() method.

btn_0 = (Button)findViewById(R.id.btn_0);
:
.

ed1 = (EditText)findViewById(R.id.edText1);

Fetching the value of ‘btn_0’, which is the ID of the button zero, and storing it
in the object ‘btn_0’ that created earlier in the main activity file.

iii. Changing the EditText value by button pressing

 Use the setOnClickListener() function.

btn_0.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ed1.setText(ed1.getText()+”0”);
}
});

:
.

The editText already fetches the value that it is already displaying, null in this
case, and then adds 0 to it.

If don’t fetch the existing value then it becomes impossible to enter multiple digit
numbers.

Do this on repeat mode for each of the numbers as well as the decimal.

iv. Operational function buttons – setOnClickListener() function.

btn_Add.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

if(ed1 == null){
ed1.setText(“”);
}else

Value1 = Float.parseFloat(ed1.getText()
+ “”);
isAdd = true;
ed1.setText(null);

}
}
});
:
.

Use the simple function getText() to handle the operation. Since the addition
button is pressed, set it’s boolean equivalent variable to true. After press the add
button we have to input another number set EditText to display null value.

v. Calculating functionality – setOnClickListener() function.

 The code when button = is presses after inputting another integer.

btn_calc.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
Value2 = Float.parseFloat(ed1.getText() +
“”);

if(isAdd == true) {
ed1.setText(Value1 + Value2 +””);
isAdd = false;
}

if(isSub == true) {
ed1.setText(Value1 – Value2 +””);
isSub = false;
}
:
.
});

vi. The reset button - setOnClickListener()

btn_clear.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
ed1.setText(“”);
});