Developing your first android app — Simple calculator

Hello everyone, welcome to Android Hunger. Here I am going to tell you ‘How to create your first android app !’

This is a simple app which takes two numbers and perform arithmetic operations like addition, subtraction, multiplication, and division on them.

First Android App — androidhunger.com
  • Here I made two simple EditText with a TextView for each of them.
  • 4 Buttons for each operation (addition, subtraction, multiplication and division)
  • A TextView for displaying a result.

In the previous post, I discussed on different UI layouts in android, here I used LinearLayout for designing the above screen, also nested some LinearLayouts with horizontal and vertical orientation for achieving it.

Below is the component tree of the view,

First Android App — androidhunger.com

First, we design the layout of the app, here we use XML to do it,

The code for `activity_main.xml`,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context="simplecalculator.avinashnethala.com.simplecalculator.MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fNum"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/firstNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textViews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sNum"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/secondNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="numberDecimal" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="25dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<Button
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#9fa8da"
android:text="+"
android:textColor="@color/colorAccent"
android:textSize="50sp" />
<View
android:layout_width="5dp"
android:layout_height="0dp" />
<Button
android:id="@+id/sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#9fa8da"
android:text="-"
android:textColor="@color/colorAccent"
android:textSize="50sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<Button
android:id="@+id/mul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#9fa8da"
android:text="*"
android:textColor="@color/colorAccent"
android:textSize="50sp" />
<View
android:layout_width="5dp"
android:layout_height="0dp" />
<Button
android:id="@+id/div"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#9fa8da"
android:text="/"
android:textColor="@color/colorAccent"
android:textSize="50sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="25dp" />
<TextView
android:id="@+id/res"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="35sp" />
</LinearLayout>

The functionality part is generally written in java,

In the `MainActivity` I initialize the widgets used like Button, TextViews, and EditTexts.

final EditText first = (EditText) findViewById(R.id.firstNum);
final EditText second = (EditText) findViewById(R.id.secondNum);
final TextView res = (TextView) findViewById(R.id.res);
Button sum = (Button) findViewById(R.id.add);
Button sub = (Button) findViewById(R.id.sub);
Button mul = (Button) findViewById(R.id.mul);
Button div = (Button) findViewById(R.id.div);

Now when these buttons are clicked a specific operation is performed, so I set OnClickListener to them.

sum.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Double fNum = Double.valueOf(first.getText().toString());
Double sNum = Double.valueOf(second.getText().toString());
res.setText(String.valueOf(fNum + sNum));
}
});

Above code is for addition operation, similarly, we perform for all other three operations(subtraction, multiplication, and division).

First Android App — androidhunger.com