Mari Belajar Android!!!! (Part 2: Membuat Aplikasi Sederhana Android)

Hello, semua.

First of all, sorry to keep you waiting. Sulit sekali menemukan koneksi internet belakangan ini.

Pada postingan sebelumnya, kita sudah berkenalan dengan Pengembangan Aplikasi Android. Kita telah melihat bagaimana cara instalasi Android SDK pada Eclipse. Pada postingan kali ini, kita akan pedekate lebih dekat lagi dengan Pengembangan Aplikasi Android. Kita juga akan membuat aplikasi “Hello world” Android dan dilajutkan dengan aplikasi yang lebih advanced.

I. Membuat aplikasi “Hello World” Android

Sebelum memulai tahap ini, pastikan Android SDK sudah terinstall pada Eclipse anda. Jika belum, silahkan baca postingan berikut tentang Instalasi Android SDK di Eclipse:

http://harryteguh.wordpress.com/2011/01/23/mari-belajar-android-part-1-instalasi-android-di-eclipse/

Oke, mari kita mulai saja.

1.   Pada “menu “File”, pilih “New” => Project

2.   Pilih “Android Project”

3.   Pada box “New Android Project” anda diminta untuk mengisi “Project Name”, “Application Name”, “Package   Name”, dan “Activity”. Berikut adalah penjelasan dari masing-masing textbox yang harus diisi tersebut:

  • Project Name: nama dari direktori yang akan menyimpan file-file project kita.
  • Application Name: nama dari aplikasi Android yang kita kembangkan.
  • Package Name: Nama dari paket aplikasi. Nama paket ini harus memiliki minimal dua nama yang dipisahkan oleh tanda titik, contoh: com.teguh.android.
  • Activity: Nama kelas yang menjalankan proses atau fungsi dari aplikasi yang kita kembangkan. Pada box ini, kita juga harus menentukan platform Android SDK yang ingin digunakan. Kali ini akan kita gunakan SDK platform 2.3 yang telah kita download sebelumnya. Klik “Finish”

4.   Pada project yang telah kita buat tadi, kita akan menemukan 4 kelas yang harus selalu ada. Kelas-kelas ini terdiri dari 2 kelas “.java” dan 2 kelas “.xml”. Berikut adalah penjelasan dari kelas-kelas tersebut:

  • Hello.java: Kelas yang menjalankan proses atau fungsi dari aplikasi (Activity)
  • R.java: Menurut situs Android Developer, Kelas ini berfungsi sebagai index yang menghubungkan semua resource pada aplikasi yang dikembangkan. Kelas ini akan di-generate secara otomatis ketika kita membuat sebuah project dan TIDAK BOLEH DIMODIFIKASI.
  • Main.xml: Kelas ini adalah kelas yang mengatur GUI dari aplikasi Android yang kita kembangkan. GUI dari Android dapat dirancang dengan dua cara: dengan melakukan coding memakai bahasa XML, atau dengan cara  drag-and-drop (akan dibahas lebih lanjut pada postingan ini).
  • String.xml: Kelas “string.xml” berfungsi untuk menyimpan string object agar nilai dari string object tersebut nantinya dapat digunakan oleh komponen-komponen pada Android Eclipse (contoh: TextView, EditView, LinearLayout, dll). Biasanya digunakan untuk memberikan label aplikasi, keterangan aplikasi, dan mengubah warna latar belakang aplikasi.

5.   Pada tahap ini, kita akan memodifikasi kelas String.xml terlebih dahulu. Double klik “String.xml” dari direktori “res” => “values”. Lalu klik tab “string.xml” di sudut kiri bawah layar utama.

6.   Ketikkan kode berikut dan jangan lupa untuk di-save

<?xml version=“1.0” encoding=“utf-8″?>

<resources><string name=“hello”>Hola Mundo, I am El Androido!!!</string>

<string name=“app_name”>Hola Mundo</string>

</resources>

Kode di atas mendeklarasikan nama aplikasi dan keterangan yang ada di halaman aplikasi. Deklarasi nama aplikasi juga dapat dilakukan dengan tab “Resource”.

7.   Klik kanan pada project anda dan pilih “Run As” => “Android Application”

8.   Mengingat ini adalah pertama kalinya kita mulai mengoprek-oprek Android pada Eclipse, pesan “Android AVD Error” mungkin akan muncul. Klik “Yes” jika pesan ini muncul. Pesan ini muncul dikarenakan Android Virtual Device (AVD) kita belum ditentukan. Catatan: AVD bisa dikatakan sebagai kumpulan dari konfigurasi emulator.

9.   Pada box “Android SDK and AVD Manager”, klik “New”.

10.  Masukkan nama AVD, dan platform Android SDK yang digunakan berdasarkan keinginan anda. Untuk “SD Card”, “Skin”, dan “Hardware”, sebaiknya diisi sesuai gambar dibawah. Klik “Create AVD”. Catatan: Konfigurasi AVD juga dapat dilakukan sebelum project dijalankan dengan mengklik “Android SDK and AVD Manager” dari menu “Window”.

11.  Klik AVD yang telah kita tentukan tadi dan klik “Start” pada sisi kanan box “Android SDK and AVD Manager” sebelumnya. Lalu tunggu sampai emulator Android anda selesai booting. Catatan: Lamanya emulator anda booting kemungkinan besar tergantung dengan spesifikasi computer anda (seperti yang dialami penulis :p )

12.  Setelah emulator Android anda selesai booting, Klik tombol “Menu” pada emulator  untuk langsung membuka aplikasi yang telah kita buat tadi.

II. Membuat Aplikasi Sederhana (Dollar-to-Rupiah Converter)

Oke, kita telah mengetahui dasar-dasar pemrograman Android pada Eclipse dan telah membuat aplikasi paling pertama. Sekarang, kita akan mencoba membuat aplikasi yang sedikit lebih advanced, yaitu aplikasi Dollar-to-Rupiah Converter. Aplikasi ini adalah aplikasi Android yang berguna untuk mengkonversi mata uang Dollar Amerika menjadi Rupiah Indonesia. Here we go!

1.   Buat project Android yang baru dan beri nama. Misalnya: “AndroidProject”

2.   Beri juga nama untuk package-nya (ingat! minimal 2 nama dan dipisahkan dengan tanda titik), Activity (nama kelas yang melakukan fungsi), dan tentukan juga SDK yang ingin digunakan. Dalam praktek ini, penulis menggunakan Android SDK 2.3 update 9

3.   Kita mungkin ingin memberi label atau deskripsi tentang aplikasi ini. Untuk memberikan label, kita akan menggunakan kelas “string.xml”. Maka bukalah kelas “string.xml”. Kelas ini dapat dimodifikasi dengan 2 cara: dengan memakai antarmuka, atau dengan coding XML.

Jika ingin memakai antarmuka, anda hanya perlu menginput string object baru atau memodifikasi nilai string object yang sudah ada

Berikut adalah kode XML-nya jika anda lebih suka meng-coding:

<?xml version=“1.0” encoding=“utf-8″?>

<resources><string name=“hello”>Mengubah Dollar menjadi Rupiah</string>

<string name=“app_name”>Dollar to Rupiah Converter</string>

</resources>

Kita akan menggunakan string object “hello” untuk menulis deskripsi tentang aplikasi di halaman utama.

4.   Untuk merancang antarmuka aplikasi, klik kelas “main.xml” yang ada di direktori “res”=> “layout”. Perancangan antarmuka dapat dilakukan dengan dua cara: drag-and-drop atau coding XML.

Jika anda ingin menggunakan teknik drag-and-drop, berikut adalah langkah-langkah yang bisa anda lakukan:

4.1.  Pada kelas “main.xml”, klik tab “Graphical Layout” pada sudut kiri bawah editor area.

4.2.  Pada sisi kiri area hitam (layar aplikasi) di editor area, klik dan drag komponen-komponen berikut: TextView (3x),  EditText (2x),  Button (1x). Urutan dari komponen yang di-drag dapat dilihat pada gambar dibawah.

4.3.  Pada tab “Property”, ubahlah nilai dari masing-masing komponen sesuai dengan ketentuan berikut: (Note: Komponen => Atribut: Nilai)

TextView1:

TextView => Id: @+id/TextView01

TextView => Text: US $

TextView => Text Color: #EAC117

EditText1

EditText => Id: @+id/inputDollar

EditText => Text: (kosongkan)

EditText =>Layout width: fill_parent

TextView2:

TextView => Id: @+id/TextView02

TextView => Text: IDR Rp.

TextView => Text Color: #EAC117

EditText1

Deprecated => Editable: false

EditText => Id: @+id/outputRupiah

EditText => Text: (kosongkan)

EditText =>Layout width: fill_parent

Button

Button => Id: @+id/ButtonConvert

Button => Text: Convert to Rupiah

TextView3

TextView => Id: @+id/TextView3

TextView => Text: @string/hello (klik tombol yang bertanda “…”)

LinearLayout (klik area hitam)

LinearLayout => Background: #0000ff

LinearLayout => Id: @+id/ButtonConvert

LinearLayout => Text: Convert to Rupiah

Catatan: Cara ini memang lebih mudah namun mungkin akan sedikit membosankan. Don’t give up :)

Sementara itu, untuk merancang antarmuka dengan cara coding XML, anda mungkin perlu mengetahui basic-basic pemrograman XML. Ketikkan kode berikut pada tab “main.xml” di sudut kiri bawah editor area anda:

<?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”

android:background=”#0000ff”>

<TextView android:id=”@+id/TextView01″

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”US $”

android:textColor=”#EAC117″></TextView>

<EditText android:layout_height=”wrap_content”

android:id=”@+id/inputDollar”

android:layout_width=”fill_parent”>

</EditText>

<Button android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:id=”@+id/ButtonConvert”

android:text=”Convert To Rupiah”>

</Button>

<TextView android:id=”@+id/TextView02″

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”ID Rp”

android:textColor=”#EAC117″></TextView>

<EditText android:layout_height=”wrap_content”

android:layout_width=”fill_parent”

android:id=”@+id/outputRupiah”

android:editable=”false”></EditText>

<TextView android:id=”@+id/TextView03″ android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:textColor=”#EAC117″

android:text=”@string/hello”></TextView>

<!– nilai pada attribut “android:text” adalah nama dari string object “hello” yang kita tentukan pada kelas string.xml–>

</LinearLayout>

Pada komponen “TextView3”, kita menggunakan nilai yang diambil dari string object “hello” pada atribut “text”. Hasil final dari antarmuka aplikasi yang kita rancang akan terlihat seperti gambar dibawah.

5.   Setelah kita selesai merancang antarmuka aplikasi, kita akan membuat kelas fungsi yang mengkonversi nilai dolar menjadi rupiah. Untuk itu, bukalah kelas “Convert.java” dari “src”=>”nama.paket.anda”

6.   Ketikkanlah kode dibawah ini pada editor area anda:

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

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.Toast;

public class Convert extends Activity {

private EditText inputDolar;

private EditText outputRupiah;

private Button btnConvert;

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

//Memanggil ID komponen-komponen GUI

inputDolar=(EditText) findViewById(R.id.inputDollar);

outputRupiah=(EditText) findViewById(R.id.outputRupiah);

btnConvert=(Button)findViewById(R.id.ButtonConvert);

btnConvert.setOnClickListener(new View.OnClickListener() {

//memanggil method ConvertToRupiah

public void onClick(View v) {

ConvertToRupiah(v);

}

});

}

// Method untuk mengkonversi dolar ke rupiah

public void ConvertToRupiah(View view){

if(inputDolar.getText().length()==0){

Toast.makeText(this, “Please input a valid number!!!”, Toast.LENGTH_LONG).show();

return;

}

else{

try{

float dollar=Float.parseFloat(inputDolar.getText().toString());

//Diasumsikan $1 = Rp. 11.044

float resultOfConvertion= dollar * 11044;

outputRupiah.setText(String.valueOf(resultOfConvertion));}

catch(Exception e){

e.printStackTrace();

}

}}

7.   Save pekerjaan anda dan jalankan aplikasi. Hasil dari kerja kita dapat dilihat pada gambar berikut:

Selamat! Kita baru saja berhasil membuat aplikasi Android yang lebih canggih! Stay tune for more posts tentang Android J. See you again J

-Teguh

Referensi:

http://developer.android.com/resources/tutorials/hello-world.html

http://agusharyanto.net/wordpress/?p=190&cpage=1#comment-122

About these ads

5 Comments

  1. Jojon
    Posted February 13, 2011 at 10:52 am | Permalink | Reply

    Thanks :)

  2. jebrong
    Posted April 18, 2011 at 11:29 am | Permalink | Reply

    thanks bro tulisannya…

    mohon diperhatikan lagi tanda kurung kurawal yang ada pada listing convert.java nya.

  3. andri
    Posted September 24, 2011 at 4:55 pm | Permalink | Reply

    bang pada saat mengetikan source untuk memanggil ID kok gag bisa bang, kata si eclipse “id cannot be resolved or not field” kasih solusinya bang plzzz aku pengen belajar nehhh…..

  4. Posted September 28, 2011 at 5:29 pm | Permalink | Reply

    @ all: Sorry ya, blog ini udah lama nggak di maintain karena saking sibuknya. Mulai saat ini akan saya usahain maintain tiap hari :)

    @jebrong: oh iya. Sorry ya. Dan terima kasih karena udah dikoreksi :)

    @andri: maksudnya yang bagian berikut?

    inputDolar=(EditText) findViewById(R.id.inputDollar);
    outputRupiah=(EditText) findViewById(R.id.outputRupiah);
    btnConvert=(Button)findViewById(R.id.ButtonConvert);

    Kalo solusinya:
    1. Coba Andri “clean”-kan dulu project-nya
    2. Kalau gagal coba periksa apakah kata-kata setelah “R.id.” diatas sudah sesuai dengan nama ID elemen yang Andri tulis?

    Hope that helps :)

  5. Posted December 12, 2011 at 6:52 am | Permalink | Reply

    boleh dicoba nie… :)

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: