2.1
Memulai Proyek
Eclipse
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
1
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
2
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
3
2.2
MINI CASE 2
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
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;
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.
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
7
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
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
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 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
Step 5
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
13
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
14
Step 6
Periksalah file layput activity_main.xml s
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
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.*;
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.
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
22
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
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>
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.*;
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
Step 19
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
31
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
32
2.6
Marquee
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
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));
}
}
Step 8
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
38
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
39
2.4
Dialog
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
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>
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
www.aplysit.com
Dilarang memperjualbelikan modul ini!
Kumpulan modul ini akan segera diterbitkan menjadi sebuah buku.
48