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.
- Here I made two simple
EditText
with aTextView
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, 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
, TextView
s, and EditText
s.
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).