Belajar Membuat Aplikasi Android di Mac Bagian 2

VN:F [1.9.17_1161]
Akhirnya hari ini bisa kembali bermain main dengan eclipse dan android…wuihhh.
Karena saya juga masih dalam tahap belajar, berikut ini adalah catatan saya ketika belajar membuat aplikasi Android. Semoga bisa bermanfaat untuk para pemula …
Dan seperti pepatah bijak, sesama pemula dilarang saling mendahului … eiiit…
Ok, berikut ini tahapan nya :
Pertama tama tentu anda harus menjalankan eclipse nya ..
Kemudian, masuk ke menu File New Project dan pilih Android. Berikut ini adalah window yang keluar :

Create New Project Window
Dari window tsb yang di isi :
  • Project Name = helloName (ini saya akan modifikasi dari program helloWorld sederhana
  • Application Name = di samakan dengan Project Name
  • Package Name = com.sabukhitam.helloName (ini harus di isi dengan aturan name space di Java. Tujuannya dari pengaturan name space ini adalah agar tidak terjadi tumpang tindih saat misalnya kita membuat project yang besar dan membutuhkan package dari orang lain). Ini ada kaitannya dengan penyimpanan file nya juga dalam struktur folder tertentu
    Dari screen shot tsb saya salah dalam menulis tidak sesuai dengan aturan yang baku. harusnya com.sabukhitam.helloName
  • Di bawah Package Name, ada yang harus anda centang, yaitu Click Activity (tidak nampak di screen shot)
    Tujuannya adalah supaya Eclipse secara otomatis membuat Activty Default (Hello World)
  • Pilih juga target App : Dari screen shot saya memilih Android 2.3
  • Setelah itu klik Finish
Sampai dengan tahapan ini, Aplikasi sudah selesai, dan bisa dijalankan!
Nah gampang kan?
Berikut ini Screenshot Jika Aplikasi tsb dijalankan :

Tampilan Hello World Default Di Emulator Android
Nah Activity tsb adalah berasal dari sebuah file xml bernama main.xml
Berikut ini main.xml yang secara default di generate oleh Eclipse saat anda membuat Aplikasi dengan mencentang Create Activity :

Nah sekarang mari kita sedikit bermain main dengan main.xml ini
Ceritanya dalam aplikasi contoh yang sedang kita buat ini adalah membuat sebuah input, dimana user bisa menuliskan namanya dan mengirimkannya kepada Android – si robot cerdas berwarna hijau ini. Dan Android – si robot cerdas ini akan menyapa kembali.
Maka kita akan membuat layout di main.xml ini berubah :
  1. dua buah text view
  2. satu buah input text
  3. satu buah button
Nah singkat cerita berikut ini adalah copy paste code main.xml yang sudah saya rubah :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<TableLayout
android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/TableRow01">
<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:text="@string/masukan_nama"
android:layout_height="wrap_content"
android:onClick="clearMyName">
</TextView>
</TableRow>
<TableRow
android:id="@+id/TableRow02"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/inputTextNama"
android:text=" " />
</TableRow>
<TableRow
android:id="@+id/TableRow03"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_height="wrap_content"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:text="Kirim"
android:onClick="sayMyName">
</Button>
</TableRow>
<TableRow
android:id="@+id/TableRow04"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:text=" "
android:layout_height="wrap_content"
>
</TextView>
</TableRow>
</TableLayout>
Di eclipse, file layout dalam format xml tsb bisa diedit dalam format code atau bisa juga dalam format visual (switch antara mode ini tinggal klik tab saja)

Edit XML Layout Dalam Mode Graphic
Singkat cerita dalam file xml tsb di atas, saya menyimpan sebuah text View yang isi text nya kosong
?
1
2
3
4
5
<TextView
android:id=”@+id/TextView02?
android:layout_width=”wrap_content”
android:text=” ”
android:layout_height=”wrap_content”>
Dan yang perlu anda perhatikan juga pada file xml tersebut di atas, pada bagian button, saya memasukan kode sbb :
?
1
android:onClick="sayMyName"
Kode ini memberikan sebuah method agar ketika button tersebut di klik, maka akan memanggil method atau function sayMyName.
Ceritanya saat button kirim ditekan, maka secara sederhana akan mengupdate isi text tsb.
Dimana saya melakukan keajaiban tersebut?
Nah yang perlu di edit berikutnya adalah file helloName.java
Berikut ini adalah source code lengkap helloName.java yang sudah saya modifikasi :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package com.sabukhitam.helloName;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
public class helloName extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
public void sayMyName(View view) {
//setCon;tentView(R.layout.sayMyName);
//Grab handles to both text-entry fields
EditText inputTextNama =  (EditText) findViewById(R.id.inputTextNama);
String textNama = inputTextNama.getText().toString();
inputTextNama.setText(“”);
TextView OutputText = (TextView) findViewById(R.id.TextView02);
OutputText.setText(“Hallo Apa Kabar “+textNama+”?”);
findViewById(R.id.inputTextNama).clearFocus();
}
public void clearMyName(View view) {
TextView OutputText = (TextView) findViewById(R.id.TextView02);
OutputText.setText(” “);
}
}
Ada beberapa bagian dari code itu yang perlu Anda pahami.
Pertama public class helloName yang meng-extend activity. Singkat nya Activity di Android adalah yang berkaitan dengan user interface atau interaksi dengan user.
?
1
2
3
4
5
6
7
public class helloName extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
Kode di atas mengeset layout nya menggunakan main.xml yang berada pada folder resources / layout
Kode berikutnya adalah public void sayMyName(View view). Ini adalah method yang dipanggil saat button ditekan.
Berikut ini penjelasannya  :
?
1
2
3
EditText inputTextNama =  (EditText) findViewById(R.id.inputTextNama);
String textNama = inputTextNama.getText().toString();
inputTextNama.setText(“”);
Kode di atas, mengambil apa yang di ketikan oleh pengguna dan memasukannya dalam variabel textNama. Setelah itu menghapus isinya text nya dengan perintah setText(“”).
Sampai dengan tahap ini Aplikasi kita sudah “mengetahui Apapun yang diketikan oleh user” he he he
Kode Berikut nya :
?
1
2
TextView OutputText = (TextView) findViewById(R.id.TextView02);
OutputText.setText(“Hallo Apa Kabar “+textNama+”?”);
Penjelasan kode di atas juga sangat sederhana, yaitu kita merubah text kosong yang memang sudah kita siapkan pada main.xml di atas dengan perintah setText(“Hallo Apa Kabar “+textNama+”?”)
textNama adalah variabel yang didapatkan pada kode sebelumnya, yang isinya apa pun nama yang diketikan oleh user.
Nah saat program dijalankan, maka ketika user mengetikan namanya – misal Yuan – dan menekan tombol kirim, maka akan muncul kalimat sapaan dari Android :
“Hallo Apa Kabar Yuan?
Berikut ini adalah screen shot nya :

Tampilan Ketika Program Di Jalankan
Mudah bukan ? bukaaan …. he he he
Oke deh, selamat mencoba. Dan berikut ini source code dari pembelajaran saya hari ini.Source Code helloName

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)