AGENDA
Tutorials - Android
Mengenal Komponen Android

Pembahasan komponen-komponen dasar pada Android.



Hingga saat ini Anda telah menginstal dan melakukan konfigurasi terhadap seluruh program yang dibutuhkan dalam membuat aplikasi Android.

Sekarang akan dilanjutkan kepada pembahasan komponen-komponen dasar pada Android. Namun pada buku ini tidak seluruh komponen akan dibahas, hanya beberapa komponen saja yang sangat sering digunakan yaitu edittext, button, spinner, checkbox, radio group, dan ticker. Selebihnya dapat Anda eksplore sendiri.

Memulai Proyek

Untuk memulai proyek, ikuti langkah-langkah berikut:

1. Dengan menggunakan windows explorer, bukalah direktori D:\Android\eclipse lalu klik ganda icon  Eclipse
2. Lalu (kemungkinan) akan ditampilkan loading screen untuk beberapa saat, dan selanjutnya ditampilkan kotak dialog Workshop Launcher seperti gambar berikut:

Pada workspace isikan dengan D:\android\latihan dan kemudian klik tombol OK. Jika pilihan workspace tidak muncul, makan Anda dapat mengatur workspace secara manual dengan membuka File » Switch Workspace.

3. Lalu akan ditampilan lingkungan kerja Eclipse. Pada saat ini kita telah siap untuk membuat proyek yang baru

Pada bagian selanjutnya akan dibahas mengenai berbagai komponen-komponen dasar Android.

EditText dan Button

Proyek pertama berikut ini adalah EditText and Button, yaitu aplikasi sederhana yang menggunakan dua buah komponen dasar, yaitu edittext dan button.

Step 1

Pada Eclipse pilih File » New » Other seperti gambar berikut:

Step 2

Kemudian akan muncul sebuah kotak dialog New, dan pilihlah File » Android Project seperti gambar berikut:

Lalu klik Next >

Step 3

Lalu akan dimunculkan jendela New Android Project. Ingat, built target dapat diisi sesuai keinginan anda sesuai dengan versi OS Android yang mau anda pakai. Isi fieldnya seperti gambar berikut.:

Lalu klik tombol Finish.

Step 4

Lalu pada bagian kiri yaitu panel Package, klik kanan pada proyek  edittext_and_button » Run As » 2 Android Application seperti pada gambar berikut:

Step 5

Tunggulah beberapa saat lamanya, (tergantung spesifikasi computer yang Anda gunakan), dan sebagai hasil akhir akan ditampilkan emulator Android seperti gambar berikut ini:

Dalam hal ini kita hanya ingin membuktikan bahwa proyek tersebut akan bisa dijalankan, maka hingga pada langkah ini kita sudah yakin bahwa proyek tersebut dapat dijalankan. Sebaiknya Anda tidak menutup emulator Android agar nanti tidak butuh waktu lama untuk menjalankannya kembali.

Step 6

Lakukan extend seluruh file proyek, dengan cara melakukan klik pada tanda   sehingga diberikan hasil seperti gambar berikut.

Perhatikanlah bahwa R.java adalah sebuah class yang dihasilkan secara otomatis, yang berisikan text dan elemen user interface. Untuk melihat isi dari R.java, klik ganda file tersebut, dan isinya akan ditampilkan pada editor. Jangan melakukan modifikasi apapun terhadap file ini, paling tidak untuk saat ini. Tutupkan file R.java tersebut agar Anda tidak secara sengaja melakukan modifikasi. Modifikasi sembarang pada file ini akan membuat program tidak dapat berjalan sempurna, dan membingungkan diri Anda sendiri.

Step 7

Sekarang akan ditambahkan beberapa komponen. Untuk menambahkan komponen user interface, pada panel Package, klik ganda Layout / main.xml seperti pada gambar berikut:

Pastikan tab Layout terpilih pada bagian bawah.

Step 8

Lalu akan ditampilkan jendela editor komponen (widget) seperti gambar di bawah ini.

Lalu pada bar View, klik dan drag 1 buah Edit Text ke atas kanvas hitam. Lakukan juga hal yang sama untuk 3 buah Button. Hasilnya adalah sebagai berikut:

Lalu jangan lupa menyimpan hasil modifikasi dengan cara menekan tombol CTRL+S. Lalu tutuplah file main.xml tersebut.

Step 9

Pastikan bahwa hingga saat ini proyek yang dikerjakan dapat dijalankan dengan baik. Klik kanan pada   edittext_and_button » Run As » 2 Android Application lalu akan dihasilkan emulator Android. Lalu tutuplah emulator tersebut, dan lanjutkan ke langkah berikut.

Step 10

Periksalah isi file R.java dan perhatikan bahwa sekarang isinya telah berubah, karena hingga saat ini sudah ditambahkan 3 komponen baru. Sekali lagi, jangan memodifikasi file tersebut.

Step 11

Untuk membuat dan menggunakan atribut, pada panel Package pilih values » string  lalu klik ganda, seperti gambar berikut:

Step 12

Lalu akan dihasilkan editor properti seperti gambar berikut. Lalu klik tombol Add…

Step 13

Sebagai hasilnya adalah seperti gambar berikut, lalu pilih Color, dan tekan tombol OK

Step 14

Lalu Pada jendela Resource elemen, pilih Color, dan pada bagian kanan akan muncul Atribut for Color. Isikan field Nama: white dan field Value: #FFFFFF seperti gambar berikut ini:

Lalu klik kembali Color yang terdapat pada Resource Elements, sehingga Color berubah menjadi white (Color) seperti pada gambar berikut:

Lalu simpan hasil modifikasi dengan CTRL+S kemudian tutuplah file strings.xml tersebut.

Step 15

Pastikan kembali bahwa hingga saat ini proyek yang dikerjakan dapat dijalankan dengan baik. Klik kanan pada   edittext_and_button » Run As » 2 Android Application lalu akan dihasilkan emulator Android. Anda tidak perlu menutup emulator, agar proses menjalankan berikutnya tidak membutuhkan waktu lama.

Step 16

Sekarang, properti white tersebut akan dipasangkan pada background emulator. Pada panel Package, klik layout » main.xml dan akan ditampilkan jendela widget. Klik area yang berwarwa hitam, sehingga komponen terpilih, lalu pada tab Properties yang terdapat di bagian bawah klik property Background, lalu pada Value klik tombol … Gambar berikut akan sangat membantu:

Catatan:
Jika Tab Properties tidak muncul maka, Anda perlu ganti Java Perspective ke Java EE, seperti gambar berikut:

Step 17

Lalu pada jendela Reference Chooser, pilih Color » white lalu klik tombol OK

Hasilnya adalah seperti gambar berikut;

Step 18

Lakukan sedikit perubahan kode program. Caranya pada panel Package, klik  edittext_and_button.java lalu modifikasi isinya sehingga menjadi seperti source code berikut:

package www.ivan.siregar.biz;

import Android.app.Activity;
import Android.os.Bundle;
import Android.view.View;
import Android.widget.EditText;

public class edittext_and_button extends Activity {

    private EditText text;

    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main); // bind layout
        text = (EditText) findViewById(R.id.EditText01);
        text.setText("No button pressed");

    }

    // Berhubungan dengan button melalui XML
    // Bagian ini untuk handler button pada widget
    public void myClickHandler(View view) {
        switch (view.getId()) {
            case R.id.Button01:
                text.setText("Button 1 was clicked");
                break;
            case R.id.Button02:
                text.setText("Button 2 was clicked");
                break;

            case R.id.Button03:
                text.setText("Button 3 was clicked");
                break;
        }
    }
}

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal, yaitu baris 5-6, 9, 16-17, 21-36

Baris 19-34 adalah event handler apabila button yang telah dibuat pada widget di klik.

Lalu simpan hasil modifikasi dengan CTRL+S.

Step 19

Selanjutnya handler yang telah dibuat, akan dipasangkan pada button widget. Caranya, klik main.xml dan editor widget akan muncul. Lalu pilih tombol pertama, yaitu @+id/Button01. Gambar tersebut akan membantu.

Kemudian pada panel bagian bawah, pada tab Properties, ketikkan Value pada properti On click menjadi myClickHandler seperti gambar berikut:

Perhatikan bahwa myClickHandler adalah nama method yang terdapat pada source code pada Step 18 yaitu baris 23. Penulisannya harus benar-benar sama (case sensitive).

Step 20

Lakukan hal yang sama untuk @+id/Button02 dan @+id/Button03

Step 21

Periksalah file layout » main.xml

Cuplikan hasilnya adalah sebagai berikut:

Terilhat pada main.xml bahwa komponen yang baru saja dipasang telah didaftarkan pada file ini.

Step 22

Sampai saat ini, seluruh proses sudah selesai dikerjakan. Saatnya untuk melihat hasil akhir.

Klik kanan pada   edittext_and_button » Run As » 2 Android Application lalu akan dihasilkan emulator Android, seperti gambar berikut ini.

Klik tombol MENU dan pada screen akan ditampilkan hasil proyek seperti gambar berikut ini.

Lalu klik ke tiga tombol secara bergantian, dan perhatikan pesan yang ditampilkan pada EditText tersebut.

Catatan:

Jika Anda gagal melakukan latihan edittext_and_button, maka cobalah ulangi lagi seluruh langkah demi langkah. Hanya ini satu-satunya cara terbaik yang membuat Anda memahami lingkungan kerja Android.

Like or Share This Article




COMMENTS ( 0 )
 
Keep connected with us, mobile apps available now !!