Pengenalan Android: Hii Android

Tulisan pengenalan Android ini sebenarnya merupakan tutorial seleksi dari SIG (Special Interest Group) Mobile Application Development, Ristek Fasilkom UI. Setelah dipikir-pikir, kayaknya nih tutorial bagus juga buat dimasukkan ke blog. Ya, bisa sekalian berbagi ilmu juga sih dan sekalian update blog. Yup, silakan dinikmati. Jangan ragu untuk bertanya jika ada kesulitan. :D

Introduction to Android

Hii Android

Selamat datang di pengembangan aplikasi Android. Sebagai perkenalan awal kita dengan aplikasi Android, kita akan mencoba aplikasi bernama “Hii”.

Pengenalan Awal

Sebelumnya, pastikan dulu instalasi Android SDK, pengaturan IDE, dan pembuatan AVD sudah dilakukan dengan benar. Jika sudah, mari kita melangkah lebih jauh lagi.

1. Langkah pertama adalah melakukan pembuatan Android project. Pilih File > New > Android Project.

Gambar 1. Pemilihan Android Project

2. Isi detail dari project yang akan dibuat pada halaman yang muncul. Silakan diisi dengan nilai sebagai berikut.

Project name: HelloWorld
Application name: Hii
Package name: cs.mobile.apps
Create Activity: HelloWorld
Build Target: Android 2.2

Berikut ini adalah penjelasan singkat dari detail di atas.

  • Project name: nama project dalam Eclipse. Project name juga merupakan nama folder yang mengandung dokumen-dokumen project.
  • Application name: nama aplikasi yang akan muncul di Android device.
  • Package name: tempat nama package dimana semua source code yang dibuat disimpan di dalamnya. Kita bisa tentukan nama package sesuai keinginan, tapi pastikan nama package unik, tidak sama dengan project lain yang sudah ada.
  • Create activity: nama untuk class yang menjadi subclass dari Activity di Android. Activity adalah class yang dapat dijalankan dan melakukan suatu kerja. Activity hampir selalu digunakan sebagai dasar untuk sebuah aplikasi.
  • Build Target: Platform Android yang akan digunakan. Dalam hal ini, platform yang digunakan adalah Android 2.2 Froyo.

Gambar 2. Detail Project

3. Jika semua detail project sudah diisi, klik Finish. Dapat dilihat struktur project yang baru saja dibuat di bagian Package Explorer.

Gambar 3. Struktur Project Android “HelloWorld”

4. Buka file HelloWorld.java yang berada di HelloWorld > src > cs.mobile.apps. Kita akan melihat source code sebagai berikut.


package cs.mobile.apps;

import android.app.Activity;
import android.os.Bundle;

public class HelloWorld extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 }
}

Bisa dilihat, class HelloWorld yang dibuat adalah class turunan dari class Activity. Sebagaimana penjelasan sebelumnya, sebuah Activity merepresentasikan sebuah entitas yang dapat melakukan kerja. Sebuah aplikasi dapat memiliki banyak Activity, tapi user hanya bisa berinteraksi dengan satu buah entitas saja dalam satu waktu. Method onCreate() dieksekusi ketika Activity mulai dijalankan. Di method inilah inisialisasi dan pengaturan User Interface (UI) aplikasi dilakukan.

5.Sekarang ubah source code di atas menjadi berikut ini.


package cs.mobile.apps;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView; //jangan lupa import ini

public class HelloWorld extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 TextView tview = new TextView(this);
 tview.setText("Tutorial Perkenalan Android SIG Mobile Apps ^^");
 setContentView(tview);
 }
}

Dari kode di atas, kita akan menemukan class TextView. Class tersebut merupakan salah satu komponen dalam pembuatan User Interface (UI). Masih banyak komponen yang bisa digunakan untuk membuat tampilan, seperti tombol dan gambar.

6. Jika source code sudah siap, tekan tombol Run pada toolbar atau pilih Run > Run pada menubar. Karena aplikasi baru pertama kali dibuat, akan muncul pilihan berikut. Pilih bagian ‘Android Application’.

Gambar 4. Pemilihan Eksekusi Project

Akhirnya Android Emulator diluncurkan. Emulator biasanya butuh beberapa menit untuk booting. Tunggu sebentar ya. Nantinya kita akan mendapatkan tampilan sebagai berikut. Lihat, nama aplikasi kita yang tadi sudah didefinisikan, yaitu “Hii” muncul di bagian atas layar aplikasi.

Gambar 5. Tampilan Aplikasi “Hii”

Di samping tampilan aplikasi terdapat berbagai macam tombol untuk device maya ini.

Gambar 6. Tampilan Tombol dalam Emulator Android

Dari aplikasi “Hii”, jika kita menekan tombol Back , kita akan berada di menu Android device.

Gambar 7. Tampilan Menu Android Device

Icon yang disorot pada gambar di atas adalah aplikasi “Hii”, aplikasi yang kita buat. Jika kita menekan icon tersebut, kita akan kembali masuk ke dalam aplikasi “Hii”.

Catatan:
Gimana rasanya menunggu proses booting dari emulator? Cukup lama kan. Setelah emulator siap digunakan dan kita sudah mencoba aplikasi yang kita buat, emulator jangan ditutup. Menutup emulator dalam hal ini sama seperti mematikan (turn off) mobile phone yang baru saja dinyalakan. Biarkan emulator terus berjalan selama kita melakukan pengembangan program. Jika kita ingin melakukan update program, kita hanya perlu menekan tombol Run sama seperti menjalankan aplikasi pada awal pembuatan project.

Membangun User Interface (UI) dengan XML

Pada contoh di atas, kita membuat User Interface (UI) dengan pendekatan pemrograman, langsung dari kode Java. Kelemahan dari pendekatan ini adalah saat UI-nya sudah cukup kompleks dan kita ingin melakukan perubahan kecil pada UI, maka diperlukan usaha yang cukup besar untuk melakukannya. Tentu saja hal ini memusingkan developer.

Oleh karena itu, Android menyediakan pendekatan lain dalam membangun User Interface, yaitu dengan XML (EXtensible Mark-up Language). File XML ini ditaruh di tempat yang terpisah dari file Java. Jika Anda belum mengetahui apa itu XML, pelajari dulu mengenai XML di http://w3schools.com/xml/default.asp. Jika sudah mengerti, mari kita lihat bagaimana file XML ini bekerja.

1. Di bagian Package Explorer, buka HelloWorld > res > layout. Di sana kita akan menemukan file main.xml yang sudah dibuatkan secara otomatis sebelumnya. Di folder layout inilah disimpan informasi mengenai User Interface (UI).

Gambar 8. Posisi File main.xml

2. Buka file tersebut. Kita akan melihat isinya kurang lebih sebagai berikut.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>

<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello”
/>

</LinearLayout>

3. Gantikan isinya dengan XML berikut ini. Jangan lupa lakukan save pada file. Perhatikan perbedaannya dengan file XML sebelumnya.

<?xml version=”1.0″ encoding=”utf-8″?>
<TextView xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@+id/textview”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:text=”Ini tulisan dari file XML lho…”
/>

Penjelasan mengenai file XML di atas akan dijelaskan di bagian selanjutnya.

4. Buka kembali file HelloWorld.java. Sekarang modifikasi isinya menjadi berikut ini.


package cs.mobile.apps;

import android.app.Activity;
import android.os.Bundle;

public class HelloWorld extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 }
}

Pada kode di atas, kita mengatur tampilan aplikasi dari R.layout.main. R.layout.main ini merujuk ke file main.xml yang berada di folder layout.

5. Jalankan aplikasi lagi. Klik Run > Run pada menubar. Hasilnya akan didapatkan seperti berikut ini.

Gambar 9. Tampilan dengan File XML

Penggunaan file XML untuk pembuatan tampilan atau User Interface (UI) membuat pengerjaan aplikasi menjadi lebih “bersih”. File Java menangani logic dari program, sedangkan file XML menangani tampilan. Asyik kan? :D

Selanjutnya, mari kita bahas maksud dari file xml berikut ini yang digunakan pada aplikasi “Hii”.

<?xml version=”1.0″ encoding=”utf-8″?>
<TextView xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@+id/textview”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:text=”Ini tulisan dari file XML lho…”
/>

Di atas terdapat sebuah elemen View dengan taguntuk merepresentasikan tampilan teks. Selain itu, kita juga dapat membuat elemen View dengan tag yang berasal dari class yang meng-extends class View, seperti class Button dan CheckBox. Elemendi atas memiliki beberapa atribut, yaitu android:id (identitas unik untuk elemen), android:layout_width (lebar elemen terhadap layar), android:layout_height (tinggi elemen terhadap layar), dan android:text (teks yang akan ditampilkan).

Sekarang mari kita buat elemen View yang lain. Ubah file main.xml menjadi berikut ini.

<?xml version=”1.0″ encoding=”utf-8″?>
<Button xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@+id/button”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Tombol Apapaun…”
/>

Jalankan aplikasi kembali. Kita akan dapatkan hasilnya sebagai berikut.

Gambar 10. Tampilan Button dengan XML

Untuk memahami arti fill_parent dan wrap_content, silakan dicoba kombinasi nilai dalam atribut android:layout_width dan android:layout_height.

Penutup

Inilah sedikit perkenalan kita dengan Android. Sebenarnya masih banyak lagi dari Android yang bisa dieksplorasi lebih lanjut. Untuk ekspolarasi Android lebih jauh, silakan buka http://developer.android.com/. Di sana banyak konten-konten pembelajaran menarik yang bisa dibaca secara online. Bagaimana jika kita tidak terhubung internet? Kita juga memiliki konten-konten yang sama dengan http://developer.android.com/ yang bisa dibaca secara offline.

Cari folder android-sdk-windows (untuk pengguna Windows) di komputer kita masing-masing. Dari folder android-sdk-windows, masuk ke folder docs, buka index.html. Selanjutnya kita akan melihat tampilan berikut pada browser.

Gambar 11. Halaman Home pada Dokumentasi Android Offline

Untuk melihat-lihat class yang dapat dipakai di Android, klik tab Reference. Di sini kita bisa mencari dokumentasi class secara lengkap, melalui fitur pencarian atau list yang tersedia.

Gambar 12. Dokumentasi Class

Untuk melihat berbagai macam tutorial pembelajaran Android, klik tab Resources. Tersedia berbagai macam tulisan berbahasa inggris yang lumayan asyik untuk diikuti.

Gambar 13. Tulisan dalam Resources

Semoga tulisan singkat ini bisa menjadi pemahaman dasar untuk mempelajari pengembangan mobile application berbasis Android lebih lanjut. Harapannya, akan ada aplikasi-aplikasi mobile yang hebat dan bermanfaat dari tangan-tangan developer Indonesia. :D

Referensi

  • Burnette, Ed. 2010. Hello, Android: Intoducing Google’s Mobile Development Platform 3rd Edition. Texas, USA: The Pragmatic Bookshelf.
  • Google. 2011. Hello, World. Accessed on April, 3 2011.
About these ads

About ardialhaidar
Ardi, seorang mahasiswa Fasilkom UI yang menyukai Belimbing... :D

4 Responses to Pengenalan Android: Hii Android

  1. dicky says:

    ok..gan nih tutor dah gw coba n sukses thank’s y,,gw mo nanya nih kok folder docs di android-sdk-window yg gw instal gak ad padahal semua installan dah lengkap,,ohy btw gw pake android-sdk_r11-windows,,mohon pencerahannya gan..makasih

  2. ardialhaidar says:

    wah, maap baru comment. soalnya saya baru saja selesai uas… :D
    iya mas, klo download android-sdk versi terbaru emang ga langsung ada docs-nya. kita harus download dulu untuk ambil dokumentasi terbaru. caranya, dalam folder android-sdk-windows, running SDK Manager.exe, trus tunggu fetching selesai, trus pilih package docs deh.

    selamat mencoba… :D

  3. Puput says:

    bisa dijelaskan gak perbedaan penggunaan fill parent dan wrap parent itu untuk apa?

  4. Pingback: Pengenalan Android: Hii Android | Blog AgustianRA

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: