Anda di halaman 1dari 48

BAB 2: MENGENAL KOMPONEN ANDROID

2.1

Memulai Proyek

Untuk memulai proyek, ikuti langkah-langkah berikut:


1. Dengan menggunakan windows explorer, bukalah direktori
D:\android\eclipse_luna lalu klik ganda icon

Eclipse

2. Lalu akan ditampilan lingkungan kerja Eclipse. Pada saat ini


kita telah siap untuk membuat proyek yang baru.
3. Pada Eclipse pilih File New Other seperti gambar berikut

4. Kemudian akan muncul kotak dialog New dan pilih File


Android Project seperti gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
1

5. Lalu akan akan dimunculkan jendela New Android Project.


Isikan seluruh fieldnya seperti gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
2

Lalu klik Next seterusnya dan Finish. Langkah ini berlaku


untuk setiap pembuatan projek baru Android.
Tips: Untuk menjalankan projek dengan cepat, alangkah baiknya
memulai emulator terlebih dahulu agar proses percobaan aplikasi
dapat dilakukan dengan cepat. Langkah-langkahnya cukup
mudah:
1. Klik kanan pada folder projek (di bagian kiri IDE). Sebagai
contoh lihat gambar berikut:
2. Pilih Run As >> Android Application
3. Tunggu beberapa saat sampai emulator telah dimulai
4. Selesai. Anda dapat langsung bekerja dengan kode
aplikasi dan langsung menjalankan dengan cara nomor 2

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
3

2.2

EditText dan Button

Proyek pertama berikut ini adalah EditText and Button, yaitu


aplikasi sederhana yang menggunakan dua buah komponen
dasar, yaitu EditText dan Button. Pada gambar XX diberikan
tampilan hasil akhir proyek ini.

MINI CASE 2

EditText and Button

Step 1
Buat projek baru dengan nama edittext_and_button
Step 2
Akan ditambahkan bebera komponen. Untuk menambahkan
komponen User Interface, pada panel Package, klik ganda Layout
/ main.xml seperti pada gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
4

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

Lalu pada bar Text Fields, klik dan drag 1 buah Edit Text ke atas
kanvas hitam. Lakukan juga hal yang sama untuk 3 buah Button
dari Form Widgets. Lalu jangan lupa menyimpan hasil modifikasi
dengan cara menekan tombol CTRL-S

Step 3
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
5

Lakukan sedikit perubahan kode program. Caranya pada panel


Package, klik edittext_and_button.java lalu modifikasi isinya
sehingga menjadi seperti kode sumber berikut:

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 www.ivan.siregar.biz;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
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("Nothing 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("Button1");
break;
case R.id.Button02:
text.setText("Button2");
break;
case R.id.Button03:
text.setText("Button3 ");
break;
}
}
}

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,


yaitu baris 5-6, 9, 16-17, 23-34
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
6

Baris 23-34 adalah event handler apabila button yang telah


dibuat pada widget di klik.
Lalu simpan hasil modifikasi dengan CTRL-S

Step 4
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 tesebut akan membantu.

Kemudian pada panel bagian bawah, pada tab Properties, aturlah


properti On click menjadi myClickHandler seperti gambar
berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
7

Perhatikan bahwa myClickHandler adalah nama method yang


terdapat pada kode sumber 1 yaitu baris 23. Penulisannya harus
benar-benar sama (case sensitive).
Step 5
Lakukan hal yang
@+id/Button03

sama

untuk

@+id/Button02

dan

Step 6
Periksalah file layout main.xml s

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
8

Cuplikan hasilnya adalah sebagai berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
9

Step 7
Sampai saat ini, seluruh proses sudah selesai dikerjakan.
Saatnya untuk melihat hasil akhir.
Klik kanan pada
edittext_and_button Run As Android
Application lalu akan dihasilkan emulator Android, seperti gambar
berikut ini.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
10

2.3

Spinner

Proyek kedua berikut ini adalah Spinner, yaitu aplikasi


sederhana untuk menyusun pilihan ketika akan memilih sebuah
jawaban dan menyimpannya di textbox.

MINI CASE 3

Spinner

Step 1
Buat projek baru dengan nama spinner

Step 2
Lakukan extend seluruh file Spinner hingga menemukan
main.xml, dengan cara melakukan klik pada tanda
sehingga
diberikan hasil seperti gambar berikut.

Step 3
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
11

Lalu akan ditampilkan jendela editor komponen (widget) seperti


gambar di bawah ini.

Lalu pada bar Form Widgets, klik dan drag 1 buah Spinner ke
atas kanvas hitam. Lakukan juga hal yang sama untuk Button
dan EditText. Lalu jangan lupa menyimpan hasil modifikasi
dengan cara menekan tombol CTRL-S

Step 4
Lakukan sedikit perubahan kode program. Caranya pada panel
Package, klik
spinner.java lalu modifikasi isinya sehingga
menjadi seperti kode sumber berikut:
1
2
3
4
5
6

package www.ivan.siregar.biz;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.widget.*;
android.view.View;

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
12

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

public class spinner extends Activity


{
Spinner Spinner01;
Button Button01;
EditText EditText01;
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
Spinner01 = (Spinner)findViewById (R.id.Spinner01);
Button01 = (Button)findViewById (R.id.Button01);
EditText01 = (EditText) findViewById(R.id.EditText01);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, array);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item
Spinner01.setAdapter(adapter);
Button01.setOnClickListener( new clicker());
}

// Berhubungan dengan button melalui XML


// Bagian ini untuk handler button pada widget
private static final String[] array = {"minggu", "senin", "selasa", "rabu
"kamis", "jumat", "sabtu"};
class clicker implements Button.OnClickListener
{
public
void onClick(View v)
{
String s = (String) Spinner01.getSelectedItem();
EditText01.setText(s);
}
}
}

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,


yaitu baris 5-6, 10-13, 20-27, 32-42
Baris 32-42 adalah event handler apabila button yang telah
dibuat pada widget di klik.
Lalu simpan hasil modifikasi dengan CTRL-S

Step 5
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
13

Selanjutnya handler yang telah dibuat, akan dipasangkan pada


button widget. Caranya, klik main.xml dan editor widget akan
muncul. Lalu pilih tombol pertama. Gambar tesebut akan
membantu.

Kemudian pada panel bagian bawah, pada tab Properties, aturlah


properti On click menjadi clicker seperti gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
14

Perhatikan bahwa clicker adalah nama method yang terdapat


pada kode sumber 2 yaitu baris 27. Penulisannya harus benarbenar sama (case sensitive).

Step 6
Periksalah file layput activity_main.xml s

Cuplikan hasilnya adalah sebagai berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
15

Step 7
Sampai saat ini, seluruh proses sudah selesai dikerjakan.
Saatnya untuk melihat hasil akhir.
Klik kanan pada
spinner Run As Android Application lalu
akan dihasilkan emulator Android, seperti gambar berikut ini.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
16

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
17

2.4

Checkbox

Proyek keempat berikut ini adalah Checkbox, yaitu aplikasi


sederhana yang menggunakan dua buah komponen dasar, yaitu
EditText dan Button disertai Checkbox.

MINI CASE 4

Checkbox

Step 1
Buatlah projek baru dengan nama checkbox.

Step 2
Sekarang akan ditambahkan bebera komponen. Untuk
menambahkan komponen User Interface, pada panel Package,
klik ganda Layout / main.xml seperti pada gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
18

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

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
19

Lalu pada bar Form Widgets, klik dan drag 2 buah CheckBox ke
atas kanvas hitam. Lakukan juga hal yang sama untuk Button
dan EditText. Lalu jangan lupa menyimpan hasil modifikasi
dengan cara menekan tombol CTRL-S.

Step 4
Lakukan sedikit perubahan kode program. Caranya pada panel
Package, klik
checkbox.java lalu modifikasi isinya sehingga
menjadi seperti kode sumber berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
20

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

package www.ivan.siregar.biz;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.widget.*;

public class checkbox extends Activity


{
Button Button01;
CheckBox CheckBox01, CheckBox02;
EditText EditText01;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main); // bind layout
EditText01=(EditText)this.findViewById(R.id.EditText01);
CheckBox01 = (CheckBox) findViewById(R.id.CheckBox01);
CheckBox02 = (CheckBox) findViewById(R.id.CheckBox02);
Button01 = (Button) findViewById(R.id.Button01);
Button01.setOnClickListener(new clicker());
}
// Berhubungan dengan button melalui XML
// Bagian ini untuk handler button pada widget
class clicker implements Button.OnClickListener
{
public void onClick(View v)
{
String r = "";
if (CheckBox01.isChecked())
{
r = r + "hello" + "\n";
}
if (CheckBox02.isChecked())
{
r = r + "android" + \n;
}
EditText01.setText(r);
}
}
}

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,


yaitu baris 5-6, 10-12, 19-24, 28-43
Baris 28-43 adalah event handler apabila button yang telah
dibuat pada widget di klik.
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
21

Lalu simpan hasil modifikasi dengan CTRL-S

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

Kemudian pada panel bagian bawah, pada tab Properties, aturlah


properti On click menjadi clicker seperti gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
22

Perhatikan bahwa myClickHandler adalah nama method yang


terdapat pada kode sumber 1 yaitu baris 23. Penulisannya harus
benar-benar sama (case sensitive).
Cuplikan hasilnya adalah sebagai berikut:

Step 6
Sampai saat ini, seluruh proses sudah selesai dikerjakan.
Saatnya untuk melihat hasil akhir.
Klik kanan pada
checkbox Run As Android Application lalu
akan dihasilkan emulator Android, seperti gambar berikut ini.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
23

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
24

2.5

Radio Group

Proyek keempat berikut ini adalah Radio Group, disini kita akan
belajar bagaimana membuat pilihan dalam bentuk radio buttons
yang terkumpul dalam sebuah radio group.

MINI CASE 5

Radio Group

Step 1
Buatlah projek baru dengan nama radiobuttons_and_group.

Step 2
Sekarang akan ditambahkan bebera komponen. Untuk
menambahkan komponen User Interface, pada panel Package,
klik ganda Layout / main.xml seperti pada gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
25

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

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
26

Lalu pada bar Form Widgets, klik dan drag 2 buah RadioButton
ke atas kanvas hitam. Lakukan juga hal yang sama untuk
Button, TextView dan EditText. Lalu jangan lupa menyimpan hasil
modifikasi dengan cara menekan tombol CTRL-S

Step 10
Pada proyek kali ini kita perlu merubah kode pada main.xml. Pilih
main.xml pada pilihan Views.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
27

Step 11
Rubah kode pada main.xml menjadi kode sumber seperti berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@+id/TextView01" />
<RadioGroup android:id="@+id/RadioGroup01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:id="@+id/RadioButton01"
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
28

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

android:text="Jababeka"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton android:id="@+id/RadioButton02"
android:text="Bojong Gede"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RadioGroup>
<Button android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pilih" />
<EditText android:id="@+id/EditText01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@+id/EditText01" android:textSize="18sp"
android:layout_x="70px"
android:layout_y="182px" />
</LinearLayout>

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,


yaitu baris 8-11, 13-25, 30, 35. Yang harus diperhatikan adalah
baris 12-24. Ketika kita akan membuat radio buttons kita harus
memasukkan buttons-butons tersebut dalam satu grup, agar
sewaktu kita sudah memilih salah satu buttons dalam satu grup
maka buttons yang lain akan dinonaktifkan secara otomatis.
Mungkin anda akan lebih mengerti saat menjalankan program
nanti.
Sedangkan
pada
baris-baris
selanjutnya
terdapat
android:text=value dimana value tersebut adalah text yang
akan muncul pada buttons dan dapat anda ganti sesuka hati.

Step 12
Setelah merubah kode pada main.xml maka akan didapat
gambar seperti berikut

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
29

Step 18
Lakukan perubahan kode program. Caranya pada panel Package,
klik radiobuttons_and_group.java lalu modifikasi isinya sehingga
menjadi seperti kode sumber berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package www.ivan.siregar.biz;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.widget.*;

public class radiobuttons_and_group extends Activity


{
TextView TextView01;
RadioGroup RadioGroup01;
RadioButton RadioButton01, RadioButton02;
Button Button01;
EditText EditText01;
/** Called when the activity is first created. */
@Override
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
30

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
54
55
56

public void onCreate(Bundle savedInstanceState)


{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
RadioGroup01 = (RadioGroup)
findViewById(R.id.RadioGroup01);
RadioButton01 = (RadioButton)
findViewById(R.id.RadioButton01);
RadioButton02 = (RadioButton)
findViewById(R.id.RadioButton02);
Button01 = (Button) findViewById(R.id.Button01);
EditText01 = (EditText) findViewById(R.id.EditText01);
EditText01.setText("");
TextView01 = (TextView) findViewById(R.id.TextView01);
TextView01.setText("Dimanakah letak President University
?");
Button01.setOnClickListener(new clicker());
}
// Berhubungan dengan button melalui XML
// Bagian ini untuk handler button pada widget
class clicker implements Button.OnClickListener
{
public void onClick(View v)
{
if (v == Button01)
{
if (RadioButton01.isChecked())
{
EditText01.setText("Jababeka");
}
if (RadioButton02.isChecked())
{
EditText01.setText("Bojong Gede");
}
}
}
}
}

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,


yaitu baris 5-6, 10-14, 22-34, 39-55
Baris 39-55 adalah event handler apabila button yang telah
dibuat pada widget di klik.
Lalu simpan hasil modifikasi dengan CTRL-S

Step 19
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
31

Sampai saat ini, seluruh proses sudah selesai dikerjakan.


Saatnya untuk melihat hasil akhir.
Klik kanan pada
radiobuttons_and_group Run As Android
Application lalu akan dihasilkan emulator Android, seperti gambar
berikut ini.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
32

2.6

Marquee

Proyek ketiga selanjutnya adalah Marquee, yaitu aplikasi


sederhana yang membuat tulisan bergerak dari samping(ticker).

MINI CASE 6

Marquee

Step 1
Buatlah projek baru dengan nama marquee.

Step 2
Sekarang akan ditambahkan bebera komponen. Untuk
menambahkan komponen User Interface, pada panel Package,
klik ganda Layout / main.xml seperti pada gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
33

Step 3
Lalu pada bar Form and Widgets, klik dan drag sebuah Button ke
atas kanvas hitam. Lakukan juga hal yang sama untuk EditText
dan TextView. Hasil yang anda peroleh berbeda? Jangan
khawatir, sekarang lanjutkan dengan langkah selanjutnya.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
34

Step 4
Kita akan mengubah kode program pada main.xml. Caranya,
pilih main.xml pada tab View.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
35

Step 5
Ubah kode program main.xml menjadi seperti kode sumber
berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:text="@string/btn_name"
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content" ></Button>
<EditText android:text=""
android:id="@+id/edit"
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
36

android:layout_width="fill_parent"
android:layout_height="wrap_content" ></EditText>
</LinearLayout>
<TextView
android:id="@+id/result"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=""
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"></TextView>
</LinearLayout>

Step 6
Ubah kode program pada strings.xml menjadi seperti kode
sumber berikut ini:
1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="utf-8"?>


<resources>
<string name="app_name">marquee</string>
<string name="btn_name">Nama:</string>
<string name="funky_format">Nama saya &lt;b&gt;
%1$s&lt;/b&gt;</string>
<color name="white">#ffffff</color>
</resources>

Step 7
Selanjutkan lakukan perubahan kode program. Caranya pada
panel Package, klik marquee.java lalu modifikasi isinya sehingga
menjadi seperti kode sumber berikut:
1
2
3
4
5
6
7

package www.ivan.siregar.biz;
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.text.TextUtils;
android.text.Html;
android.view.View;

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
37

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

import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class marquee extends Activity
{
EditText edit;
TextView result;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
edit=(EditText)findViewById(R.id.edit);
result=(TextView)findViewById(R.id.result);
result.setSelected(true);
Button btn=(Button)findViewById(R.id.button);
btn.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v)
{
applyFormat();
}
});
}
private void applyFormat()
{
String format=getString(R.string.funky_format);
String simpleResult=String.format(format,
TextUtils.htmlEncode(edit.getText().toString()));
result.setText(Html.fromHtml(simpleResult));
}
}

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,


yaitu baris 5-10, 14-15, 23-34, 37-43
Baris 37-43 adalah event handler apabila button yang telah
dibuat pada widget di klik.
Lalu simpan hasil modifikasi dengan CTRL-S

Step 8
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
38

Sampai saat ini, seluruh proses sudah selesai dikerjakan.


Saatnya untuk melihat hasil akhir. Perlu diperhatikan bahwa
marquee akan berjalan apabila teks yang diisikan lebih panjang
daripada panjang textview.
Klik kanan pada
marquee Run As Android Application lalu
akan dihasilkan emulator Android, seperti gambar berikut ini.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
39

2.4

Dialog

Proyek keempat berikut ini adalah Dialog, disini kita akan


belajar bagaimana menggunakan kotak dialog semacam alert
dan lainnya.

MINI CASE 7

Dialog

Step 1
Buatlah projek baru dengan nama dialog.

Step 2
Sekarang akan ditambahkan beberapa komponen. Untuk
menambahkan komponen User Interface, pada panel Package,
klik ganda Layout / main.xml seperti pada gambar berikut:

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
40

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

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
41

Lalu pada bar Form Widgets, klik dan drag 4 buah Button ke atas
kanvas hitam. Lalu jangan lupa menyimpan hasil modifikasi
dengan cara menekan tombol CTRL-S

Step 4
Pada proyek kali ini kita perlu merubah kode pada main.xml. Pilih
main.xml pada pilihan Views.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
42

Step 5
Rubah kode pada main.xml menjadi kode sumber seperti berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contoh Dialog" />
<Button
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
43

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

android:id="@+id/toast"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contoh Toast" />
<Button
android:id="@+id/alert"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contoh Alert" />
<Button
android:id="@+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contoh Dialog Progress" />
</LinearLayout>

Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,


yaitu baris 12, 15, 18, 21, 24, 27, dan 30. Pada baris-baris
selanjutnya terdapat android:text=value dimana value tersebut
adalah text yang akan muncul pada buttons dan dapat anda
ganti sesuka hati.

Step 6
Lakukan perubahan kode program. Caranya pada panel Package,
klik radiobuttons_and_group.java lalu modifikasi isinya sehingga
menjadi seperti kode sumber berikut:
1
2
3
4
5
6

package www.ivan.siregar.biz;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.view.View.OnClickListener;

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
44

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
54
55
56
57
58
59
60
61
62

import android.widget.*;
import android.app.*;
import android.content.DialogInterface;
public class dialog extends Activity
implements OnClickListener{
Button toast, alert, progress;
/** Called when the activity is first created. */
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
toast = (Button)findViewById(R.id.toast);
alert = (Button)findViewById(R.id.alert);
progress = (Button)findViewById(R.id.progress);
toast.setOnClickListener(this);
alert.setOnClickListener(this);
progress.setOnClickListener(this);
}
// Berhubungan dengan button melalui XML
// Bagian ini untuk handler button pada widget
public void onClick(View v){
if(v == findViewById(R.id.toast)){
Toast.makeText(this, "Contoh Dialog dengan
Toast", Toast.LENGTH_LONG)
.show();
}
if(v == findViewById(R.id.alert)){
AlertDialog.Builder kotakalert = new
AlertDialog.Builder(this);
kotakalert.setMessage("Contoh Kotak Alert");
kotakalert.setNeutralButton("OK", new
DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(getApplicationContext(), "Tombol OK
diklik",
Toast.LENGTH_LONG).show();
}
});
kotakalert.show();
}
if(v == findViewById(R.id.progress)){
ProgressDialog dialog = new ProgressDialog(this);
dialog.setCancelable(true);
dialog.setMessage("Proses Loading");
dialog.show();

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
45

}
Bagian yang dimodifikasi terdapat pada baris yang dicetak tebal,
yaitu baris 5-9, 12-13, 20-25, 30-60
Baris 30-60 adalah event handler apabila button yang telah
dibuat pada widget di klik.
Lalu simpan hasil modifikasi dengan CTRL-S

Step 7
Sampai saat ini, seluruh proses sudah selesai dikerjakan.
Saatnya untuk melihat hasil akhir.
Klik kanan pada
radiobuttons_and_group Run As Android
Application lalu akan dihasilkan emulator Android, seperti gambar
berikut ini.

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
46

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
47

Modulku jangan dijual yah, kan mau diterbitkan bulan ini, so


jangan macam-macam kalian, tak kasih nilai E !!!!!

www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
48

Anda mungkin juga menyukai