TUTORIAL ANDROID

Membangun Aplikasi Calculator Untuk Android

Indra Widiatmojo
25 Mei 2014

Pembuka
Kali ini penulis akan berbagi pengalaman tentang bagaimana cara membuat aplikasi
sederhanan didalam android (smart phone Android) bagi pemula. Disini penulis akan menggunakan
ADT (Android Developer Tools) Eclipse dan SDK Android untuk digunakan membuat aplikasi Android.
Saya harap kalian semua sudah mengerti tentang Eclipse atau fitur-fitur didalamnya dan cara
memakainya.
Sebagai contoh kali ini penulis akan berbagi cara bagaimana membuat aplikasi Calculator
didalam Android. Untuk membuat aplikasi Calculator tersebut saya akan membagi 2 cara
pengerjaannya yaitu pertama desain interface, dan yang kedua pengkodingan.

Desain Interface
Rencana desain calculator yang akan kita buat adalah sebagai berikut :

Untuk mendesain aplikasi diatas pertama buka Eclipse lalu klik file New pilih Android
Aplication Project sehingga akan muncul sebagai berikut :

Isikan Aplication Name, Project Name, dan Package Name setelah diisikan semua kemudian klik next
sampai muncul kotak dialog sebagai berikut :

Fungsi dari kotak dialog tersebut adalah untuk memasukan icon sistem yang akan kita buat ini. Kita
cukup klik browse dan pilih icon dari drive komputer kalian yang kalian suka. Setelah klik finish
sehingga project yang yang kita buat akan muncul di bagian explorer Eclipse.

Buka AndroidManifest.xml dan gantikan source code yang diblok dengan @android:style/theme.black
seperti pada gambar dibawah ini

Selanjutnya kita akan membuat gradasi warna untuk memperindah interface calculator yang
kita buat nantinya. Untuk membuat gradasi kita mulai dari folder projeck Calculator Of Math, pilih res
drawable_hdpi. Pada drawable_hdpi klik kanan pilih New Other Android Android XML File
sehingga akan muncul kotak dialog sebagai berikut

Pada file isikan dengan bg_button dan pada root Elementnya pilih selector setelah itu finish.

Isikan kode XML dibawah ini ke dalam yang ditunjukan oleh anak panah diatas
<item android:state_pressed="true">

<shape>
<solid android:color="#74138C"/>
<stroke android:width="1dp"/>
<corners android:radius="10dp"/>
<padding
android:bottom="10dp"
android:top="10dp"
android:right="10dp"
android:left="10dp"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#FF7DFF"
android:endColor="#990099"
android:angle="270"/>

<stroke android:width="3dp"/>
<corners android:radius="10dp"/>
<padding
android:bottom="10dp"
android:top="10dp"
android:right="10dp"
android:left="10dp"/>
</shape>
</item>

Tambahkan XML file kedalam folder drawable_hdpi dengan cara yang sama seperti sebelumnya
dengan nama bg_latar dan pada root Elementnya pilih selector setelah itu finish. Isikan kode XML
dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
<item>
<shape>
<gradient
android:startColor="#FFE4C4"
android:endColor="#A0522D"
android:angle="270"/>
<stroke android:width="3dp"/>
<corners android:radius="10dp"/>
<padding
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp"/>
</shape>
</item>

Tambahkan XML file kedalam folder drawable_hdpi dengan cara yang sama seperti sebelumnya
dengan nama bg_latarsoal dan pada root Elementnya pilih selector setelah itu finish. Isikan kode
XML dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
<item>
<shape>
<gradient
android:startColor="#ADFF2F"
android:endColor="#008000"
android:angle="270"/>
<stroke android:width="3dp"/>
<corners android:radius="10dp"/>
<padding
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp"/>

</shape>
</item>

Tambahkan XML file kedalam folder drawable_hdpi dengan cara yang sama seperti sebelumnya
dengan nama bg_text dan pada root Elementnya pilih selector setelah itu finish. Isikan kode XML
dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
<item>
<shape>
<gradient
android:startColor="#FFFFFF"
android:endColor="#C0F7FE"
android:angle="270"/>
<stroke
android:width="1dp"
android:color="#A5D3CA"/>
<corners android:radius="15dp"/>
<padding
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp"/>
</shape>
</item>

Referensi kode warna :

- http://www.sambidoplang.mobie.in/Warna
- http://www.infoindong.com/2013/01/kode-warna-html.html

Setelah selesai selanjutnya masuk ke res values pilih string.xml yang ada dalam projeck
Calculator Of Math.

Tambahkah code XML dibawah ini di tempat yang ditunjukan oleh anak panah di atas.
<string
<string
<string
<string
<string
<string
<string
<string
<string
<string
<string
<string
<string
<string
<string
<string
<string

name="lbl_defould">medium_text</string>
name="kali">X</string>
name="bagi">:</string>
name="plus">+</string>
name="min">-</string>
name="sin">Sin</string>
name="cos">Cos</string>
name="tan">Tan</string>
name="sama_dengan">=</string>
name="pangkat">^</string>
name="akar_quadrat">Sqrt</string>
name="modulus">Mod</string>
name="load_default">CE</string>
name="log">Log</string>
name="phi">Phi</string>
name="atan">Atan</string>
name="exeption">Exp</string>

<style name="lbl_text">
<item name="android:textColor" >#ffffff</item>
<item name="android:textSize" >30sp</item>
<item name="android:textStyle" >bold</item>
<item name="android:shadowColor" >#000000</item>
<item name="android:shadowDx" >3</item>
<item name="android:shadowDy" >3</item>
<item name="android:shadowRadius" >2</item>
</style>

Kode-kode XML diatas nantinya akan dipanggil di setiap komponen-komponen (button,

textView, textEdit, dll) pada desain interface calclulator.
Selanjutnya kita akan membuat interface calculator tersebut dengan cara buka folder res
layout pilih activity_main.xml. Kemudian ganti kode yang ada di dalam activity_main.xml dengan
kode XML dibawah ini.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_latarsoal"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
style="@style/lbl_text"
android:background="@drawable/bg_latar"
android:id="@+id/textView1"
android:layout_width="match_parent"

android:layout_height="wrap_content"
android:text="@string/lbl_defould"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
style="@style/lbl_text"
android:background="@drawable/bg_text"
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number" >
<requestFocus />
</EditText>
<EditText
style="@style/lbl_text"
android:background="@drawable/bg_text"
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="5dp"
android:paddingTop="5dp" >
<Button
android:id="@+id/button10"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonQuadrat"
android:text="@string/pangkat" />
<Button
android:id="@+id/button11"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonSQRT"
android:text="@string/akar_quadrat" />
<Button
android:id="@+id/button12"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonMOD"
android:text="@string/modulus" />
<Button
android:id="@+id/button4"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="ButtonC"

android:text="@string/load_default" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:paddingTop="5dp" >
<Button
android:id="@+id/button13"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonLog"
android:text="@string/log" />
<Button
android:id="@+id/button14"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonPHI"
android:text="@string/phi" />
<Button
android:id="@+id/button15"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonAtan"
android:text="@string/atan" />
<Button
android:id="@+id/button16"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonExp"
android:text="@string/exeption" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:paddingTop="5dp" >
<Button
android:id="@+id/button7"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonKali"
android:text="@string/kali" />
<Button
android:id="@+id/button8"
android:layout_width="65dp"
android:layout_height="65dp"

10

android:background="@drawable/bg_button"
android:onClick="buttonBagi"
android:text="@string/bagi" />
<Button
android:id="@+id/button1"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="ButtonPlus"
android:text="@string/plus" />
<Button
android:id="@+id/button9"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="buttonMin"
android:text="@string/min" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:paddingTop="5dp" >
<Button
android:id="@+id/button3"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="ButtonSin"
android:text="@string/sin" />
<Button
android:id="@+id/button5"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="ButtonCos"
android:text="@string/cos" />
<Button
android:id="@+id/button6"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="ButtonTan"
android:text="@string/tan" />
<Button
android:id="@+id/button2"
android:layout_width="65dp"
android:layout_height="65dp"
android:background="@drawable/bg_button"
android:onClick="ButtonSamaDengan"
android:text="@string/sama_dengan" />
</LinearLayout>

11

</LinearLayout>
</ScrollView>

Kode diatas bisa dilihat dalam bentuk navigator seperti pada gambar dibawah ini

Hasil dari koding XML diatas dapat kita liat hasil sementaranya dengan cara membuka Graphical
Layout pada activity_main.xml seperti yang ditandai dengan lingkaran merah pada gambar dibawah ini

12

Pengkodingan
Dalam pembuat aplikasi Android bahasa pemrograman yang digunakan adalah bahasa
pemrograman JAVA. Untuk memulainya kita harus membuka folder yang ada didalam project
Calculation Of Math. Buka rsc com.indra.calculationofmath MainActivty.java kemudian tulis
semua source code di bawah ini.
package com.indra.calculationofmath;
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.widget.EditText;
android.widget.TextView;

public class MainActivity extends Activity {

EditText txtNumber1, txtNumber2;
TextView lblHasil;
double number1, number2, hasil;
String operator;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
txtNumber1=(EditText)findViewById(R.id.editText1);
txtNumber2=(EditText)findViewById(R.id.editText2);
lblHasil=(TextView)findViewById(R.id.textView1);
txtNumber2.setVisibility(View.GONE);
lblHasil.setText(String.valueOf("0"));

13

}
public void ButtonC(View e) {
operator="";
lblHasil.setText(String.valueOf("0"));
txtNumber1.setText(String.valueOf(""));
txtNumber2.setText(String.valueOf(""));
txtNumber1.setVisibility(View.VISIBLE);
txtNumber2.setVisibility(View.GONE);
}
public void buttonKali(View e) {
operator="kali";
txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);
txtNumber2.requestFocus();
}
public void buttonBagi(View e) {
operator="bagi";
txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);
txtNumber2.requestFocus();
}
public void ButtonPlus(View e) {
operator="plus";
txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);
txtNumber2.requestFocus();
}
public void buttonMin(View e) {
operator="min";
txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);
txtNumber2.requestFocus();
}
public void buttonQuadrat(View e) {
operator="quadrat";
txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);
txtNumber2.requestFocus();
}
public void buttonMOD(View e) {
operator="Mod";
txtNumber2.setVisibility(View.VISIBLE);
txtNumber1.setVisibility(View.GONE);
txtNumber2.requestFocus();
}
public void ButtonSamaDengan(View e) {
try {
hasil_proses();
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Error"));
}
}

14

public void ButtonSin(View e) {

try {
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.sin(number1);
lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));
}
}
public void ButtonCos(View e) {
try {
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.cos(number1);
lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));
}
}
public void ButtonTan(View e) {
try {
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.tan(number1);
lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));
}
}
public void buttonSQRT(View e) {
try {
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.sqrt(number1);
lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));
}
}
public void buttonLog(View e) {
try{
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.log(number1);
lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {

15

lblHasil.setText(String.valueOf("Invalid Input"));
}
}
public void buttonPHI(View e) {
try {
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.PI*(number1);
lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));
}
}
public void buttonAtan(View e) {
try {
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.atan(number1);
lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));
}
}
public void buttonExp(View e) {
try {
number1=Double.parseDouble(txtNumber1.getText().toString());
hasil=Math.exp(number1);
lblHasil.setText(String.valueOf(hasil));
}
catch(Exception err) {
lblHasil.setText(String.valueOf("Invalid Input"));
}
}
private void hasil_proses() {
number1=Double.parseDouble(txtNumber1.getText().toString());
number2=Double.parseDouble(txtNumber2.getText().toString());
if (operator=="kali") {
hasil=number1*number2;
}
else if (operator=="bagi") {
hasil=number1/number2;
}
else if (operator=="plus") {
hasil=number1+number2;
}
else if (operator=="min") {
hasil=number1-number2;
}

16

else if (operator=="quadrat") {
hasil=Math.pow(number1, number2);
}
else if (operator=="Mod") {
hasil=number1 % number2;
}
lblHasil.setText(String.valueOf(hasil));
}
}

Setelah source code diatas ditulis secara lengkap dan benar untuk menjalankannya adalah
klik tanda
yang ada pada toolbar Eclipse, disamping itu saya juga sarankan bersamaan program
tersebut dijalankan juga harus memperhatikan console pada Eclipse untuk mengetahui apakah
program itu berjalan secara benar atau tidak. Untuk melihat console adalah dengan cara klik Window
Show View Console. Perhatikan gambar console dibawah ini.

2
3

Keterangan :
1. Proses berjalannya SDK / menjalankan SDK
2. Proses instalasi APK
3. Proses instalasi APK selesai
Proses diatas akan memakan waktu sedikit lama, tergantung spesifikasi komputernya.
Setelah proses compile program setelah dan sukses akan tampil hasilnya sebagai berikut seperti
gambar dibawah ini.

17

Setelah SDK berjalan, buka aplikasi menunya dan cari aplikasi calculatornya seperti pada gambar
dibawah ini

18

Jalankan programnya dan hasilnya akan seperti dibawah ini

Cara instalasi di smart phone :

Cari direktori penyimpan project Calculation Of Math pada drive komputer, setelah itu buka folder
CalculationOfMath bin CalculationOfMath.apk, kemudian copy-paste
CalculationOfMath.apk tersebut kedalam memory smart phone dan selanjutnya jalankan, secara
otomatis APK tersebut akan terinstal di smart phone.

Penutup
Semoga tutorial ini dapat bermanfaat dan dipakai sebagai bahan referensi yang dapat
memberikan wawasan luas dalam bidang IT pada khususya dan diharapkan dapat digunakan oleh para
pemula, mahasiswa baru ataupun siapa saja yang meminati bidang IT.

19