Tutorial membuat aplikasi kalkulator android studio

Nama : Johan Tamin

NIM : 1404505110

Jurusan : Teknologi Informasi, Universitas Udayana

Mata Kuliah : Pemrograman Mobile (C)

Dosen : I Putu Agus Eka Pratama, ST MT

Disini kita akan belajar membuat Aplikasi Kalkulator dalam Android Studio


Berikut langkah-langkah dalam membuat Aplikasi Kalkulator dalam Android Studio :
1) Buka Aplikasi Android Studio
2) Pilih New Project

3) Pilih nama aplikasi (disini kita namakan dengan "Kalkulator") beserta lokasi folder aplikasi-nya lalu klik next

4) Pilih Platform yang akan digunakan untuk menjalankan aplikasi, lalu klik next

5) Pilih Blank Activity, lalu klik next

6) Biarkan setting secara default, lalu klik next

7) Setelah selesai, maka akan muncul tampilan seperti berikut

8) Ketikkan script XML berikut ini ke dalam file activity_main.xml yang ada di /res/layout. (Pilih opsi Text disamping Design)

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="*"
android:stretchColumns="*"
android:background="#ffffff">
<!--Row 1 with single column-->
<TableRow
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center_horizontal">
<EditText
android:id="@+id/result_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="30dp"
android:layout_span="4"
android:padding="30dip"
android:background="#b0b0b0"
android:textColor="#000"/>
</TableRow>
<!--Row 2 with 4 columns-->
<TableRow
android:id="@+id/tableRow1"
android:layout_height="match_parent"
android:layout_width="match_parent">
<Button
android:id="@+id/Btn7_id"
android:text="7"
android:textSize="20dp"
android:layout_weight="1"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btn7Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btn8_id"
android:text="8"
android:textSize="20dp"
android:layout_weight="1"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btn8Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btn9_id"
android:text="9"
android:textSize="20dp"
android:layout_weight="1"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btn9Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btnmulti_id"
android:text="*"
android:textSize="20dp"
android:layout_weight="1"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btnmultiClicked"
android:gravity="center"/>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_height="match_parent"
android:layout_width="match_parent">
<Button
android:id="@+id/Btn4_id"
android:text="4"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="30dip"
android:textSize="20dp"
android:layout_weight="1"
android:onClick="btn4Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btn5_id"
android:text="5"
android:textSize="20dp"
android:layout_weight="1"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btn5Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btn6_id"
android:text="6"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="30dip"
android:textSize="20dp"
android:layout_weight="1"
android:onClick="btn6Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btndivide_id"
android:text="/"
android:layout_weight="1"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="30dip"
android:textSize="20dp"
android:onClick="btndivideClicked"
android:gravity="center"/>
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_height="match_parent"
android:layout_width="match_parent">
<Button
android:id="@+id/Btn1_id"
android:text="1"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="30dip"
android:layout_weight="1"
android:textSize="20dp"
android:onClick="btn1Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btn2_id"
android:text="2"
android:textSize="20dp"
android:layout_weight="1"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btn2Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btn3_id"
android:text="3"
android:textSize="20dp"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="30dip"
android:layout_weight="1"
android:onClick="btn3Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btnpersen_id"
android:text="%"
android:textSize="20dp"
android:layout_weight="1"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btnpersenClicked"
android:gravity="center"/>
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_height="match_parent"
android:layout_width="match_parent">
<Button
android:id="@+id/Btnplus_id"
android:text="+"
android:textSize="20dp"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="30dip"
android:layout_weight="1"
android:onClick="btnplusClicked"
android:gravity="center"/>
<Button
android:id="@+id/Btn0_id"
android:text="0"
android:textSize="20dp"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="30dip"
android:layout_weight="1"
android:onClick="btn0Clicked"
android:gravity="center"/>
<Button
android:id="@+id/Btnminus_id"
android:text=""
android:textSize="20dp"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="30dip"
android:layout_weight="1"
android:onClick="btnminusClicked"
android:gravity="center"/>
<Button
android:id="@+id/Btnequal_id"
android:text="="
android:textSize="20dp"
android:layout_weight="1"
android:background="#b0b0b0"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btnequalClicked"
android:gravity="center"/>
</TableRow>
<!--Row 3 with 2 columns-->
<TableRow
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center_horizontal"
>
<Button
android:id="@+id/Btnclear_id"
android:text="CLEAR"
android:textSize="20dp"
android:layout_weight="1"
android:background="#dcdcdc"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btnclearClicked"
android:gravity="center"/>
<Button
android:id="@+id/Btnexit_id"
android:text="EXIT"
android:textSize="20dp"
android:layout_weight="1"
android:background="#dcdcdc"
android:textColor="#000000"
android:padding="30dip"
android:onClick="btnexitClicked"
android:gravity="center"/>
</TableRow>
</TableLayout> 

Jika berhasil, maka design akan muncul sebagai berikut

9) Ketikkan script Java berikut pada file main_activity.java yang ada di /app/java/com.example (Setiap komputer memiliki pengaturan profile yg berbeda)

import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.EditText;
public class MainActivity extends ActionBarActivity {
public String str ="";
Character op = 'q';
float i,num,numtemp;
EditText showResult;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
showResult = (EditText)findViewById(R.id.result_id);
}
public void btn0Clicked(View v){
insert(0);
}
public void btn1Clicked(View v){
insert(1);
}
public void btn2Clicked(View v){
insert(2);
}
public void btn3Clicked(View v){
insert(3);
}
public void btn4Clicked(View v){
insert(4);
}
public void btn5Clicked(View v){
insert(5);
}
public void btn6Clicked(View v){
insert(6);
}
public void btn7Clicked(View v){
insert(7);
}
public void btn8Clicked(View v){
insert(8);
}
public void btn9Clicked(View v){
insert(9);
}
public void btnplusClicked(View v){
perform();
op = '+';
}
public void btnminusClicked(View v){
perform();
op = '-';
}
public void btndivideClicked(View v){
perform();
op = '/';
}
public void btnmultiClicked(View v){
perform();
op = '*';
}
public void btnpersenClicked(View v){
perform();
op = '%';
}
public void btnequalClicked(View v){
calculate();
}
public void btnclearClicked(View v){
reset();
}
public void btnexitClicked(View v){
exit();
}
private void reset() {
// TODO Auto-generated method stub
str ="";
op ='q';
num = 0;
numtemp = 0;
showResult.setText("");
}
public void exit()
{
this.finish();
Intent intent = new Intent(Intent.ACTION_MAIN);
intent.addCategory(Intent.CATEGORY_HOME);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
}
private void insert(int j) {
// TODO Auto-generated method stub
str = str+Integer.toString(j);
num = Integer.valueOf(str).intValue();
showResult.setText(str);
}
private void perform() {
// TODO Auto-generated method stub
str = "";
calculateNoShow();
numtemp = num;
}
private void calculate() {
// TODO Autogenerated
method stub
if(op == '+')
num = numtemp+num;
else if(op == '-')
num = numtemp-num;
else if(op == '/')
num = numtemp/num;
else if(op == '*')
num = numtemp*num;
else if(op == '%')
num = numtemp%num;
showResult.setText(""+num);
}
private void calculateNoShow() {
// TODO Autogenerated
method stub
if(op == '+')
num = numtemp+num;
else if(op == '-')
num = numtemp-num;
else if(op == '/')
num = numtemp/num;
else if(op == '*')
num = numtemp*num;
else if(op == '%')
num = numtemp%num;
}
}

10) Kini kita jalankan aplikasi kalkulator di emulator, klik tombol panah hijau di bagian atas

11) Pilih emulator yang akan dipakai untuk menjalankan aplikasi (Disini kita akan menggunakan emulator BlueStack)

12) Berikut merupakan tampilan aplikasi di bluestack

Uji Coba Aplikasi :

1) Kita akan mencoba dengan menekan angka pertama yaitu "1"

2) Kita tambahkan dengan angka kedua yaitu "2"

3) Hasilnya akan seperti berikut :

Selamat, Anda telah berhasil membuat aplikasi kalkulator!

Referensi :
1. Android Developer Team. Android Developer Training.
http://developer.android.com/training/index.html
2. Udacity. Android Developer For Beginner.
https://www.udacity.com/course/android-development-for-beginners--ud837
3. Safaat, Nazzarudin. Aplikasi Android, Teori dan Praktek Pengembangan. Informatika.
Bandung. 2015.