Android Calculater & TableLayout Tutorial

Web Hosting
In this tutorial I will show you how to create table layout and a simple calculator. See the output below.


First I will discuss you how to create table layout in android. Heres the code for the activity_main.xml.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tl_main"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal" >
    
    <TableRow
        android:id="@+id/tr_first"
        android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingTop="5dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp" >

        <EditText
            android:id="@+id/et_result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:layout_span="4"
            android:inputType="number" />
        
    </TableRow>
    
    <TableRow
        android:id="@+id/tr_second"
        android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="5dp"
    android:paddingRight="5dp" >

        <Button
            android:id="@+id/btn_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="1" />

        <Button
            android:id="@+id/btn_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="2" />

        <Button
            android:id="@+id/btn_three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="3" />

        <Button
            android:id="@+id/btn_plus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="+" />
        
    </TableRow>
    
     <TableRow
        android:id="@+id/tr_third"
        android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="5dp"
    android:paddingRight="5dp" >

        <Button
            android:id="@+id/btn_four"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="4" />

        <Button
            android:id="@+id/btn_five"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="5" />

        <Button
            android:id="@+id/btn_six"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="6" />

        <Button
            android:id="@+id/btn_minus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="-" />
        
    </TableRow>
    
      <TableRow
        android:id="@+id/tr_fourth"
        android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="5dp"
    android:paddingRight="5dp" >

        <Button
            android:id="@+id/btn_seven"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="7" />

        <Button
            android:id="@+id/btn_eight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="8" />

        <Button
            android:id="@+id/btn_nine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="9" />

        <Button
            android:id="@+id/btn_times"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="*" />
        
    </TableRow>
    
      <TableRow
        android:id="@+id/tr_fifth"
        android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="5dp"
    android:paddingRight="5dp" >

        <Button
            android:id="@+id/btn_zero"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="0" />

        <Button
            android:id="@+id/btn_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="C" />

<Button
            android:id="@+id/btn_equals"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="=" />

        <Button
            android:id="@+id/btn_divide"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="/" />
         <!--  android:layout_column="3"-->
    </TableRow>
</TableLayout>

Note: The most important for me to remember about table layout are:

  • android:layout_span="4" - just see the output above for edittext that's the function of this code.
  • android:layout_column="3" - means you are the one to specify where column do you want to put the certain button or whatsoever.

Next is the complete code for our simple calculator. The MainActivity.java


package com.example.tablelayout;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends Activity implements OnClickListener{
String res, res_plus, res_minus, res_times, res_divide;
Integer  wswitch;
Double answer = 0.0;
EditText result;
Button one, two, three, four, five, six, seven, eight, nine, zero, plus, minus, times, divide, clear, equals;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initializeVars();
}
public void initializeVars(){
result = (EditText)findViewById(R.id.et_result);
one = (Button)findViewById(R.id.btn_one);
two = (Button)findViewById(R.id.btn_two);
three = (Button)findViewById(R.id.btn_three);
four = (Button)findViewById(R.id.btn_four);
five = (Button)findViewById(R.id.btn_five);
six = (Button)findViewById(R.id.btn_six);
seven = (Button)findViewById(R.id.btn_seven);
eight = (Button)findViewById(R.id.btn_eight);
nine = (Button)findViewById(R.id.btn_nine);
zero = (Button)findViewById(R.id.btn_zero);
plus = (Button)findViewById(R.id.btn_plus);
minus = (Button)findViewById(R.id.btn_minus);
times = (Button)findViewById(R.id.btn_times);
divide = (Button)findViewById(R.id.btn_divide);
equals = (Button)findViewById(R.id.btn_equals);
clear = (Button)findViewById(R.id.btn_clear);
one.setOnClickListener(this);
two.setOnClickListener(this);
three.setOnClickListener(this);
four.setOnClickListener(this);
five.setOnClickListener(this);
six.setOnClickListener(this);
seven.setOnClickListener(this);
eight.setOnClickListener(this);
nine.setOnClickListener(this);
zero.setOnClickListener(this);
plus.setOnClickListener(this);
minus.setOnClickListener(this);
clear.setOnClickListener(this);
times.setOnClickListener(this);
divide.setOnClickListener(this);
equals.setOnClickListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
switch (arg0.getId()){
case R.id.btn_one:
res = result.getText().toString()+"1";
result.setText(res);
break;
case R.id.btn_two:
res = result.getText().toString()+"2";
result.setText(res);
break;
case R.id.btn_three:
res = result.getText().toString()+"3";
result.setText(res);
break;
case R.id.btn_four:
res = result.getText().toString()+"4";
result.setText(res);
break;
case R.id.btn_five:
res = result.getText().toString()+"5";
result.setText(res);
break;
case R.id.btn_six:
res = result.getText().toString()+"6";
result.setText(res);
break;
case R.id.btn_seven:
res = result.getText().toString()+"7";
result.setText(res);
break;
case R.id.btn_eight:
res = result.getText().toString()+"8";
result.setText(res);
break;
case R.id.btn_nine:
res = result.getText().toString()+"9";
result.setText(res);
break;
case R.id.btn_zero:
res = result.getText().toString()+"0";
result.setText(res);
break;
case R.id.btn_plus:
res_plus = result.getText().toString();
result.setText("");
wswitch = 1;
break;
case R.id.btn_minus:
res_minus = result.getText().toString();
result.setText("");
wswitch = 2;
break;
case R.id.btn_times:
res_times = result.getText().toString();
result.setText("");
wswitch = 3;
break;
case R.id.btn_divide:
res_divide = result.getText().toString();
result.setText("");
wswitch = 4;
break;
case R.id.btn_equals:
switch(wswitch){
case 1:
if(res_plus.matches("") || result.getText().toString().matches("")){
result.setText("");
}else{
answer = Double.parseDouble(res_plus)+Double.parseDouble(result.getText().toString());
res = Double.toString(answer);
result.setText(res);
}
break;
case 2:
if(res_minus.matches("") || result.getText().toString().matches("")){
result.setText("");
}else{
answer = Double.parseDouble(res_minus)-Double.parseDouble(result.getText().toString());
res = Double.toString(answer);
result.setText(res);
}
break;
case 3:
if(res_times.matches("") || result.getText().toString().matches("")){
result.setText("");
}else{
answer = Double.parseDouble(res_times)*Double.parseDouble(result.getText().toString());
res = Double.toString(answer);
result.setText(res);
}
break;
case 4:
if(res_divide.matches("") || result.getText().toString().matches("")){
result.setText("");
}else{
answer = Double.parseDouble(res_divide)/Double.parseDouble(result.getText().toString());
res = Double.toString(answer);
result.setText(res);
}
break;
}
break;
case R.id.btn_clear:
result.setText("");
break;
}
}

}

Web Hosting
That's all. Enjoy Happy Coding, don't forget to post a comment for clarifications.