Android Tutorial: Android Calculater & TableLayout Tutorial

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="/" />

</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;

}

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

Android Tutorial

Android Calculater & TableLayout Tutorial

No comments:

Post a Comment