Membuat Aplikasi Calculator For Android

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

description

Kali ini penulis akan berbagi pengalaman tentang bagaimana cara membuat aplikasi sederhanan didalam android (smart phone Android) bagi pemula

Transcript of Membuat Aplikasi Calculator For Android

  • TUTORIAL ANDROID Membangun Aplikasi Calculator Untuk Android

    Indra Widiatmojo

    25 Mei 2014

  • 2

    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 :

  • 3

    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.

  • 4

    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

  • 5

    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

  • 6

    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

    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

  • 7

    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

    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.

  • 8

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

    medium_text X : + - Sin Cos Tan = ^ Sqrt Mod CE Log Phi Atan Exp #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.

  • 9

    android:layout_height="wrap_content" android:text="@string/lbl_defould" android:textAppearance="?android:attr/textAppearanceMedium" />

  • 10

    android:text="@string/load_default" />

  • 11

    android:background="@drawable/bg_button" android:onClick="buttonBagi" android:text="@string/bagi" />

  • 12

    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

  • 13

    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 android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.EditText; import 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"));

  • 14

    } 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")); } }

  • 15

    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) {

  • 16

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

  • 17

    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

    23

    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.

  • 18

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

  • 19

    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.