TUTORIAL ANDROID. Membangun Aplikasi Calculator Untuk Android. Indra Widiatmojo 25 Mei 2014

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 :

2

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.

3

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

4

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

<shape> <solid android:color="#74138C"/> <stroke android:width="1dp"/> <padding android:bottom="10dp" android:top="10dp" android:right="10dp" android:left="10dp"/> <shape>

5

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

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 <shape> <stroke android:width="3dp"/> <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>

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 <shape> <stroke android:width="3dp"/> <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>

6



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 <shape> <stroke android:width="1dp" android:color="#A5D3CA"/> <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>

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.

7

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

<style name="lbl_text"> #ffffff 30sp bold #000000 3 3 2

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" >
8

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

9

android:text="@string/load_default" /> <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" /> <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" /> <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" />

11



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.

1

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