Sabtu, 19 April 2014

Browse » Home » » (Android) Tutorial Kalkulator Sederhana

(Android) Tutorial Kalkulator Sederhana


APLIKASI KALKULATOR PERTAMAKU

Secara default Ketika kita membuat sebuah project Android, Eclipse telah menciptakan sebuah project baru yang ketika dijalankan akan menampilkan tulisan Hello World. Project yang pertama kali dibuat hanya terdiri dari 2 widget, yaitu layout (LinearLayout) dan TextView. Dan Komponen TextView inilah yang akan menampilkan text “Hello World”.
Pada Tutorial Kali ini kita akan membuat sebuah aplikasi sederhana, yaitu kalkulator. Tutorial kali ini akan dibuat sesederhana mungkin agar bisa dipahami dengan mudah bagi pemula. Point utama dari tutorial ini adalah sebagai berikut:
  • -  Cara Awal pembuatan Project hingga Proses Menjalankan dan Pembuatan file APK.
  • -  Pemberian Event Untuk Komponen Button(Tombol) dengan 2 cara / 2 metode.
  • -  Pengenalan Terhadap Komponen2 sederhana / standar pada android, seperti TextView, EditText, dan Button.
  • -  Operasi Aritmatika Standar, seperti Perkalian, Pembagian, Penjumlahan, Dan Pengurangan. 

    1. Pembuatan Project
    Saya anggap sampai disini rekan rekan telah berhasil melakukan penginstallan Peralatan Tempur Android pada Eclipse. Untuk Tahan awal pembuatan project , berikut ini tahap tahap yang perlu dilakukan:
    1. Jalankan Eclipse. Bagi yang belum menentukan Workspace, silahkan terlebih dahulu WorkSpace tempat penyimpanan project yang anda kerjakan.
    2. Berikut ini adalah tahap-tahap pembuatan project baru (perhatikan gambar dengan baik): 



      Klik-> Android Project, setelah itu akan muncul window baru, dan lakukan sesuai dengan gambar dibawah: 

      page2image416 page2image584

      Setelah itu klik “finish”. Sampai disini Pembuatan Project baru berhasil.
      Jika berhasil, maka pada Package Explorer akan terdapat project yang telah kita buat, seperti gambar dibawah ini:

       page2image2824
      Pada Android Framework terdapat aturan aturan khusus yang berlaku. Android Frawework dirancang khusus untuk saling terintegrasi antara CodeBehind dan Layout View, dan lain lain. Berikut ini adalah keterangan lebih lengkap mengenai penempatan file file yang secara umum digunakan: 

      page3image488


      page3image5792


      Keterangan:
      1. Src, adalah lokasi penyimpanan file java sebagai Codebehind aplikasi. Ketika aka membuat sebuah class
        baru, maka lakukan klik kanan pada package diadalam folder src (melalui Ecplise) lalu pilih new class.
      2. Gen, adalah folder tempat penyimpanan file R.java. R.java adalah class yang degenerate secara otomatis
        setiap kali kita menambahkan komponen2 yang akan digunakan. Sebaiknya file ini jangan di kotak katik.
      3. Res, res menyimpan folder drawable ,layout, dan value. Drawable digunakan untuk lokasi penyimpanan file file image/gambar. Sedangkan layout digunakan untuk menyimpan file file .xml yang akan digunkan sebagai layout aplikasi, dan value adalah sebuah folder yang secara default terdapat sebuah file string.xml yang berisi element element “string” yang mengandung kalimat / text yang dapat dipanggil seketika. Untuk menambahkan file audio/video dapat ditambahkan sebuah folder didalam folder res, yaitu folder dengan
        nama “raw”.
      4. AndroidManifest.xml adalah sebuah file yang harus ada pada setiap project . Manifest adalah file yang
        berinteraksi langsung dengan Mesin Dalvix dan System Operasi Android sebelum Setiap Activity dieksekusi. Didalam manifest diregistrasikan class class yang bersifat “Activity” , dan bukan hanya itu, manifest juga menampung keterangan mengenai package aplikasi, versi minimal SDK, Permision, dan lain lain. Agar penjelasan tidak melebar kemana-mana dan mudah untuk dimengerti bagi pemula, maka kita lanjutkan ke tujuan awal, yaitu pembuatan aplikasi kalukator. 



      1. Pembuatan Layout Aplikasi
      Secara default layout yang tersedia adalah layout yang dibangun didalam komponen LinearLayout. Saya sarankan agar tidak membuat layout dengan AbsoluteLayout. Ada baiknya anda menggunakan LinearLayout / RelativeLayout. Berikut ini kira kira perbandingan yang akan terjadi pada Device yang berbeda.
      DiAsumsikan kita memiliki sebuat tampilan sebagai berikut:
      page4image3752 page4image4512
      Tombol 1 Tombol 2 Tombol 3
      Perbandingan Tampilan Antara LinearLayout dengan AbsoluteLayout pada Device berbeda: LinearLayout (Device dengan resolusi QVGA) AbsoluteLayout (Device dengan resolusi QVGA)
      page4image6800 page4image7560 page4image8320 page4image8480
      Tombol 1 Tombol 2 Tombol 3
      LinearLayout (Device dengan resolusi HVGA) AbsoluteLayout (Device dengan resolusi HVGA)
      Tombol 1 Tombol 2 Tombol 3
      page4image11160 page4image11920



      Perbedaan yang terjadi adalah:
      1. AbsoluteLayout bersifat Statik / tidak berubah , posisi widget2 yang diletakan akan tetap pada value yang diberikan, sehingga ketika tampilan aplikasi dibuat sesuai dengan resolusi layar yang kecil, maka pada saat dijalankan diDevice yang lebih besar, maka tampilan tidak akan sesuai dengan yang dibangun pada Device yang sebelumnya terlihat baik. Demikian juga sebaliknya, ketika tampilan dibuat baik pada device yang besar, makan tampilan layout akan berubah / acak – acakan ketika dijalankan di Device yang lebih kecil.
      2. Pada LinearLayout, tampilan layout dapat berubah sesuai dengan ukuran Device. Sehingga tampilan Sesuai dengan yang diharapkan. PILIH YANG MANA?
        Karena pada dasarnya kita ingin membuat aplikasi yang support pada setiap device, apalagi mengenai tampilan..
      Berikut ini tampilan aplikasi yang akan kita buat:
      Buka main.xml (pada folder layout) , dengan cara meng-klik2 kali file tersebut sehingga muncul pada editor. 

      page5image8472

      Edit Layout sehingga tampil seperti dibawah ini: 


      page6image1072

      Atau anda dapat meng-Copy kode dibawah ini, lalu paste-kan pada file Main.xml anda :


      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#777"
          android:orientation="vertical" >

          <EditText
              android:id="@+id/EditText01"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_margin="11dip"
              android:gravity="right|center"
              android:numeric="decimal"
              android:phoneNumber="true"
              android:text="0" >
          </EditText>

          <TextView
              android:id="@+id/TextView02"
              android:layout_width="fill_parent"
              android:layout_height="50dip"
              android:layout_marginRight="11dip"
              android:gravity="right|center"
              android:text="+"
              android:textColor="#fff"
              android:textSize="33sp"
              android:textStyle="bold" >
          </TextView>

          <EditText
              android:id="@+id/editText1"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_margin="11dip"
              android:gravity="right|center"
              android:numeric="decimal"
              android:phoneNumber="true"
              android:text="0" >
          </EditText>

          <TextView
              android:id="@+id/TextView01"
              android:layout_width="fill_parent"
              android:layout_height="50dip"
              android:layout_margin="13dip"
              android:layout_marginRight="11dip"
              android:background="#444"
              android:gravity="right|center"
              android:text="0"
              android:textColor="#fff"
              android:textSize="33sp"
              android:textStyle="bold" >
          </TextView>

          <LinearLayout
              android:id="@+id/linearLayout1"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:gravity="center" >

              <Button
                  android:id="@+id/Button03"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:text="+"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/Button02"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:text="x"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/Button01"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:text="-"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/button1"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:text="/"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>
          </LinearLayout>

          <Button
              android:id="@+id/button5"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_margin="13dip"
              android:text="="
              android:textSize="21sp"
              android:textStyle="bold" >
          </Button>


      </LinearLayout>


      Selanjutnya kita akan melakukan pembuatan/pemberian event pada setiap button/tombol yang telah disediakan. Seperti tujuan diatas, pemberian event akan dicontohkan dengan 2 metode, untuk selanjutnya silahkan pilih mana yang lebih mudah dan menyenangkan:

      2. Modifikasi Class yan menjadi Activity untuk tampilan main.xml
      Pemberian event dapat dilakukan dengan 2 cara, pada tutorial ini event untuk tombol tambah,kurang,dan hasil akan dilakukan dengan penambahan value pada property OnClick dari tombol tombol tersebut, dan kemudian menciptakan sebuah method yang merupakan event dari masing masing tombol. Dan metode selanjutnya adalah dengan implementasi OnClickListener pada CodeBehind / file KalkulatorSederhana.java.

      1. Metode pemberian value pada properties OnClick
      Inputkan nama method yang mejadi event dari masing masing tombol melalui DesignView di tampilan layout. Agar lebih jelas, perhatikan gambar dibawah ini: 

      page7image8752

      Caranya:
      Klik Tombol dengan tulisan       “+” satu kali, lalu pada window properties cari properties OnClick, lalu
      inputkan dengan tulisan “tambah” tanpa tanda kutip.
      Lakukan hal yang sama pada tombol       kurang dan hasil. Pada tombol kurang isi dengan value
      “kurang” dan pada tombol “=” isi dengan value “hasil”. Sehingga Kode pada main.xml akan berubah menjadi sebagai berikut: 

      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#777"
          android:orientation="vertical" >

          <EditText
              android:id="@+id/EditText01"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_margin="11dip"
              android:gravity="right|center"
              android:numeric="decimal"
              android:phoneNumber="true"
              android:text="0" >
          </EditText>

          <TextView
              android:id="@+id/TextView02"
              android:layout_width="fill_parent"
              android:layout_height="50dip"
              android:layout_marginRight="11dip"
              android:gravity="right|center"
              android:text="+"
              android:textColor="#fff"
              android:textSize="33sp"
              android:textStyle="bold" >
          </TextView>

          <EditText
              android:id="@+id/editText1"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_margin="11dip"
              android:gravity="right|center"
              android:numeric="decimal"
              android:phoneNumber="true"
              android:text="0" >
          </EditText>

          <TextView
              android:id="@+id/TextView01"
              android:layout_width="fill_parent"
              android:layout_height="50dip"
              android:layout_margin="13dip"
              android:layout_marginRight="11dip"
              android:background="#444"
              android:gravity="right|center"
              android:text="0"
              android:textColor="#fff"
              android:textSize="33sp"
              android:textStyle="bold" >
          </TextView>

          <LinearLayout
              android:id="@+id/linearLayout1"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:gravity="center" >

              <Button
                  android:id="@+id/Button03"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:onClick="tambah"
                  android:text="+"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/Button02"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:text="x"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/Button01"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:onClick="kurang"
                  android:text="-"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/button1"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:text="/"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>
          </LinearLayout>

          <Button
              android:id="@+id/button5"
              android:layout_height="wrap_content" >
          </Button>

      </LinearLayout>



      Manipulasi pada main.xml (layout) belum selesai sampai disni. Karena itu Kode Lengkap pada main.xml yang disajikan diatas belum finish. Untuk tahap akhir dalam memmodifikasi file main.xml, tahap yang kita lakukan adalah pemberian ID pada komponen-komponen penting yang akan digunakan.
      Beberapa komponen yang perlu diberikan ID agar mudah diingat adalah, :
      • !  Tombol Bagi (/) = @+id/ButtonBagi
      • !  Tombol Kali (x)= @+id/ButtonKali
      • !  Input Angka Pertama= @+id/EditTextAngka1
      • !  Input Angka Kedua= @+id/EditTextAngka2
      • !  TextView yang menampilkan operator aritmatika= @+id/TextViewOperator
      • !  TextView yang menampilkan hasil= @+id/TextViewHasil
        Gambar dibawah ini menerangkan Lokasi / Tempat pengubahan properties ID pada masing masing komponen: 



      page8image13656

      Setelah melakukan modifikasi tersebut, maka kode lengkap pada layout (main.xml) menjadi seperti ini:
      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#777"
          android:orientation="vertical" >

          <EditText
              android:id="@+id/EditTextAngka1"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_margin="11dip"
              android:gravity="right|center"
              android:numeric="decimal"
              android:phoneNumber="true"
              android:text="0" >
          </EditText>

          <TextView
              android:id="@+id/TextViewOperator"
              android:layout_width="fill_parent"
              android:layout_height="50dip"
              android:layout_marginRight="11dip"
              android:gravity="right|center"
              android:text="+"
              android:textColor="#fff"
              android:textSize="33sp"
              android:textStyle="bold" >
          </TextView>

          <EditText
              android:id="@+id/EditTextAngka2"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_margin="11dip"
              android:gravity="right|center"
              android:numeric="decimal"
              android:phoneNumber="true"
              android:text="0" >
          </EditText>

          <TextView
              android:id="@+id/TextViewHasil"
              android:layout_width="fill_parent"
              android:layout_height="50dip"
              android:layout_margin="13dip"
              android:layout_marginRight="11dip"
              android:background="#444"
              android:gravity="right|center"
              android:text="0"
              android:textColor="#fff"
              android:textSize="33sp"
              android:textStyle="bold" >
          </TextView>

          <LinearLayout
              android:id="@+id/linearLayout1"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:gravity="center" >

              <Button
                  android:id="@+id/Button03"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:onClick="tambah"
                  android:text="+"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/ButtonKali"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:text="x"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/Button01"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:onClick="kurang"
                  android:text="-"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>

              <Button
                  android:id="@+id/ButtonBagi"
                  android:layout_width="50dip"
                  android:layout_height="50dip"
                  android:text="/"
                  android:textSize="21dip"
                  android:textStyle="bold" >
              </Button>
          </LinearLayout>

          <Button
              android:id="@+id/button5"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_margin="13dip"
              android:onClick="hasil"
              android:text="="
              android:textSize="21sp"
              android:textStyle="bold" >
          </Button>


      </LinearLayout>



      Tahap Selanjutnya adalah modifikasi class yang merupakan Activity dari aplikasi. Hal yang perlu dilakukan adalah dengan membuka file .java kedalam Jendela Editor, sama seperti cara membuka file main.xml, cukup dengan meng-Klick 2 kali file .java. 

      :(   Capek nulisnya,

      Mohon maaf, tutorialnya panjang banget,
      Aku Share Dokumennya aja deh, teman teman bisa download lengkapnya.
      Teman teman bisa liat tutorialku di link ini aja :
      https://docs.google.com/file/d/0B6xSgrabA7o9UHBjeHJCWUpDbFU/edit





Diposting oleh Unknown di 13.19

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
© Copyright 2014 Novita Anjasari
Theme by Novita Anjasari