3. Selection Widget-GridView Bab Adding List Data Adding Spinner Data Adding List with AutoComplete Bab 5...

(1)

(2)

2

Kata Pengantar

Puji syukur penulis penjatkan kehadirat Allah SWT, yang atas rahmat-Nya maka penulis dapat menyelesaikan penyusunan buku yang berjudul “Kumpulan Project Aplikasi Android Untuk Pemula”. Penulisan buku adalah merupakan salah satu tugas dan persyaratan untuk menyelesaikan mata kuliah pemrogaman lanjut di jurusan teknik informatika PENS.

Dalam Penulisan buku ini penulis merasa masih banyak kekurangan-kekurangan baik pada teknis penulisan maupun materi, mengingat akan kemampuan yang dimiliki penulis. Untuk itu kritik dan saran dari semua pihak sangat penulis harapkan demi penyempurnaan pembuatan buku ini.

(3)

3

Daftar Isi

Pengenalan Android

Android adalah sistem operasi yang berbasis Linux untuk telepon seluler seperti telepon pintar dan komputer tablet. Android menyediakan platform terbuka bagi para pengembang untuk menciptakan aplikasi mereka sendiri untuk digunakan oleh bermacam peranti bergerak. Awalnya, Google Inc. membeli Android Inc., pendatang baru yang membuat peranti lunak untuk ponsel. Kemudian untuk mengembangkan Android, dibentuklah Open Handset Alliance, konsorsium dari 34 perusahaan peranti keras, peranti lunak, dan telekomunikasi, termasuk Google, HTC, Intel, Motorola, Qualcomm, T-Mobile, dan Nvidia.

Pada saat perilisan perdana Android, 5 November 2007, Android bersama Open Handset Alliance menyatakan mendukung pengembangan standar terbuka pada perangkat seluler. Di lain pihak, Google merilis kode–kode Android di bawah lisensi Apache, sebuah lisensi perangkat lunak dan standar terbuka perangkat seluler.

Di dunia ini terdapat dua jenis distributor sistem operasi Android. Pertama yang mendapat dukungan penuh dari Google atau Google Mail Services (GMS) dan kedua adalah yang benar–benar bebas distribusinya tanpa dukungan langsung Google atau dikenal sebagai Open Handset Distribution (OHD).

(7)

7

Bab 1

Sebelum memulai pemrogaman android, terlebih dahulu kita harus menyiapkan developers tools yang berupa:

- Android SDK di

http://developer.android.com/sdk/index.html

- JDK (Jika Belum Tersedia) di

http://java.sun.com/javase/downloads/index.jsp

- Eclipse IDE di

http://www.eclipse.org/downloads/

- ADT Plugin

http://developer.android.com/sdk/eclipse-adt.html

Setelah semua file pada link diatas kita download. Selanjutnya lakukan instalasi JDK terlebih dahulu. Untuk melakukan instalasi JDK cukup klik dua kali pada file setup JDK dan klik next hingga instalasi selesai. Setelah JDK terinstall maka kita bisa langsung melanjutkan step berikutnya dalam memulai pemrogaman android. Sekilas muncuk pertanyaan, mengapa harus menginstall JDK?? Ya, karena dasar pemrogaman android adalah java. Sehingga kita perlu menginstall JDK terlebih dahulu.

(8)

8

1. Melakukan Konfigurasi Android SDK pada

Eclipse IDE

Sekarang saatnya kita untuk memulai pemrogaman android. Pertama tama kita letakkan semua file yang didownload pada halaman sebelumnya pada satu folder yang sama agar mudah dicari.

1. Jalankan aplikasi Eclipse IDE

Gambar 1 Loading screen Eclipse IDE

2. Extract isi archive file android SDK yang telah didownload

(9)

9 3. Jika muncul notifikasi untuk menentukan lokasi workspace, anda bisa tentukan lokasi workspace terserah anda atau membiarkannya default. Workspace adalah tempat dimana nantinya project yang anda buat akan disimpan. Jika telah masuk ke tampilan utama Eclipse pilih menu Help install New Software.

Gambar 3 Menu Pilihan Install New Software 4. Klik add

(10)

10

5. Pilih archive dan cari lokasi dimana tadinya anda mendownload file ADT. Kemudian pilih file tersebut dan beri nama lalu klik OK.

Gambar 5 Kotak Dialog Add Site

6. Maka Akan muncul tampilan sebagai berikut, jika ingin menginstall ADT dan Android SDK secara online masukkan link berikut https://dl-ssl.google.com/android/eclipse/

(11)

11 7. Lalu beri centang pada Developer Tools dan klik next. Kemudian lakukan proses installasi dengan mengikuti petunjuk yang ada hingga selesai.

8. Setelah ADT terinstall lakukan konfigurasi SDK dengan membuka menu WindowPreferences.

Gambar 7 Menu Preferences

9. Kemudian pilih menu android dan klik browse. Cari lokasi dimana folder Android SDK yang telah anda ekstrak tadi. Kemudian Klik OK. Jika konfigurasi berhasil maka akan muncul seperti pada gambar

(12)

12

Sekarang anda sudah bisa memulai untuk mendevelop aplikasi android. Jumlah SDK yang muncul pada menu preferences sebelumnya bergantung pada berapa banya versi SDK yang anda download.

2. Membuat Project Baru

Setelah proses konfigurasi selesai kini kita akan melanjutkan ke tahap selanjutnya yaitu membuat project baru/project pertama kita.

1. Buka Eclipse IDE, kemudian pilih FileNewAndroid Project

(13)

13 2. Beri nama project kemudian klik next

Gambar 10 Memberi nama project 3. Pilih SDK yang akan digunakan

(14)

14

4. Isi package name sesuai dengan keinginan anda. Pada contoh dalam buku ini package yang digunakan sesuai dengan yang tertera pada Source Code

Gambar 12 Memberi nama Package 5. Dan project baru pun selesai dibuat

(15)

15 6. Untuk menjalankan project dibutuhkan emulator. Untuk membuat emulator. Pilih menu WindowsAVD Manager kemudian pilih new

Gambar 14 Tampilan window AVD Manager

7. Isi nama,tipe SDK dan Size SD Card kemudian klik Create AVD

(16)

16

Nah sekarang kita bisa menjalankan project android yang baru saja kita baru tadi dengan klik kanan pada project dan pilih Run As Android Application.

3. First Android App

Sekarang saatnya untuk membuat aplikasi android pertama kita, silahkan dimulai dengan mengikuti langkah langkah berikut:

1. Buat project baru dengan kriteria -Project Name= coba

-SDK= Android 2.1 -Application Name= coba -Package Name=com.tes.coba -Create Activity=cobaActivity

2. Buka folder coba/res/layout/main.xml kemudian replace dengan kode dibawah

<?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:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="Name:" />

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"

(17)

17 android:layout_height="wrap_content">

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="Address:" />

<TextView android:layout_width="wrap_content" android:id="@+id/textnama"

android:layout_height="wrap_content" android:text="" />

<TextView android:layout_width="wrap_content" android:id="@+id/textaddress"

android:layout_height="wrap_content" android:text="" />

</LinearLayout> </LinearLayout>

3. Maka tampilan pada tab graphical layout akan menjadi seperti ini

(18)

18

4. Buat class baru pada coba/src/com.tes.coba dengan nama Restaurant.java. kemudian isi dengan kode dibawah

Gambar 17 Membuat Class baru

package com.eepis.basicForm; public class Restaurant {

private String name = ""; private String address = ""; public String getName() {

return (name); }

public void setName(String name) { this.name = name;

(19)

19 public String getAddress() {

return (address); }

public void setAddress(String address) { this.address = address;

} }

5. Pada class cobaActivity isi dengan kode berikut package com.tes.coba; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView;

public class BasicActivity extends Activity { /** Called when the activity is first created. */

Restaurant r=new Restaurant(); @Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Button save=(Button) findViewById(R.id.save); save.setOnClickListener(onSave);

}

private View.OnClickListener onSave=new View.OnClickListener() { @Override

public void onClick(View v) {

// TODO Auto-generated method stub EditText name=(EditText)findViewById(R.id.name); EditText address=(EditText)findViewById(R.id.addr);

(20)

20 TextView textNama=(TextView)findViewById(R.id.textnama); TextView textAddress=(TextView)findViewById(R.id.textaddress); r.setName(name.getText().toString()); r.setAddress(address.getText().toString()); textNama.setText(r.getName()); textAddress.setText(r.getAddress()); } }; }

6. Kemudian jalan aplikasi dengan cara klik kanan pada project dan pilih Run AsAndroid Application. Hasilnya adalah sebagai berikut

(21)

21

Bab 2

Pada android untuk melakukan design layout atau tampilan aplikasi kita cukup dimudahkan dengan menggunakan xml file. Ditambah lagi tersedianya layout designer yang WYSIWYG(what you see is what you

get) tentu saja amat memudahkan para developer android dalam

mendevelop aplikasinya.

1. Basic Layout-Membuat Simple Date Button

Kita akan membuat sebuah button pada aplikasi android kita yang nantinya jika kita klik maka akan muncul tanggal dan waktu saat ini. 1. Buat project baru dengan kriteria sebagai berikut:

Project Name :SimpleDateButton Package :com.eepis.android SDK version :Android 2.1 2. Ketik kode berikut pada main.xml

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

(22)

22

3. Ketik kode berikut pada SimpleDateButton.java(Main Class) package com.eepis.android; import java.util.Date; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button;;

public class SimpleDateButton extends Activity { /** Called when the activity is first created. */

Button btn; @Override

btn =(Button) findViewById(R.id.myButton); btn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) { updateTime(); }

}); }

public void updateTime(){

btn.setText(new Date().toString()); }

(23)

23 4. Hasil tampilan program ketika dijalankan

Gambar 19 Simple Date Button

2. Basic Layout-UI Hierarcy

UI Hierarcy merupakan aturan peletakan dan pengurutan dalam layout android. Untuk lebih jelasnya bisa dilihat pada project berikut

1. Buat project baru dengan kriteria sebagai berikut: Project Name :UIHierarcy

Package :com.eepis.android SDK version :Android 2.1

(24)

24

2. Ketik kode berikut pada main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res /android" android:id="@+id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:id="@+id/LinearLayout02" android:layout_height="wrap_content" android:layout_width="fill_parent"> <EditText android:id="@+id/Edittext01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="X Coord"> </EditText> <EditText android:id="@+id/Edittext02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"

android:text="Y Coord">

</EditText> </LinearLayout> <LinearLayout android:id="@+id/LinearLayout03" android:layout_height="wrap_content" android:layout_width="fill_parent"> <Button android:id="@+id/Button01" android:layout_width="wrap_content"

(25)

25 android:layout_height="wrap_content" android:layout_weight="1" android:text="red"> </Button> <Button android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="green"> </Button> </LinearLayout> </LinearLayout>

3. Ketik kode berikut pada UIHierarcy.java(Main Class) package com.eepis.android; import java.util.Date; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button;;

public class UIHierarcy extends Activity { /** Called when the activity is first created. */

Button btn1; Button btn2; @Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main2);

btn1 = (Button) findViewById(R.id.Button01);

(26)

26 btn1.setOnClickListener(null); btn2 = (Button) findViewById(R.id.Button02); btn2.setOnClickListener(null); } }

4. Hasil tampilan program ketika dijalankan

Gambar 20 UI Hierarcy

3. Basic Layout-Table Layout

Tabel merupakan design layout yang umum digunakan terutama dalam android. Karena layout android berbasi xml file yang dimana mirip dalam desain layout web yang juga menggunakan xml dan css.

1. Buat project baru dengan kriteria sebagai berikut: Project Name :TableLayout

(27)

27 2. Ketik kode berikut pada main.xml

<TableLayoutxmlns:android="http://schemas.android .com/apk/res/android"

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:stretchColumns="*"> <TableRow>

<TextView android:text="CTRL 0"

android:gravity="right" android:padding="3dip"/>

</TableRow>

<TextView android:text="Save as"

android:padding="3dip"/>

<TextView android:text="CTRL+Shift+s"

android:gravity="right" android:padding="3dip"/>

</TableRow>

</TableLayout>

3. Tak perlu melakukan modifikasi pada file java. Dan jika dijalankan maka tampilannya akan seperti berikut

(28)

28

4. Basic Layout-Relative Layout

Relative layout juga termasuk seringkali digunakan dalam desain layout android. Dikarena penentuan posisi layout objek yang cukup mudah. Dimana pada layout ini objek yang kita buat mengacu pada objek atau bagian pada screen.

1. Buat project baru dengan kriteria sebagai berikut: Project Name :RelativeLayout

<RelativeLayoutxmlns:android="http://schemas.andr oid.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff0000ff" android:padding="10px"> <TextView android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ffff0077"

android:text="Type Here" /> <EditText android:id="@+id/entry" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/label" /> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content"

(29)

29 android:layout_below="@+id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10px" android:text="ok" /> <Button android:id="@+id/cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/entry" android:layout_toLeftOf="@+id/ok" android:layout_alignTop="@+id/ok" android:text="Cancel" /> </RelativeLayout>

(30)

30

5. Basic Layout Absolute Layout

Absolute layout pada android memungkinkan kita untuk meletakkan object sesuai yang kita inginkan pada posisi yang sudah kita tentukan secara absolute. Jadi kita harus benar benar tahu berapa posisi koordinat untuk mengatur posisi sebuah object pada layout android. 1. Buat project baru dengan kriteria sebagai berikut:

Project Name :AbsoluteLayout Package :com.eepis.android SDK version :Android 2.1

(31)

31 Gambar 23 Absolute Layout

6. Basic Widget-Radio Button

Radio button adalah sebuah selection widget berupa pilihan yang bisa dipilih salah satu.

1. Buat project baru dengan kriteria sebagai berikut: Project Name :RadioButton

<TableLayout

xmlns:android="http://schemas.android.com/apk/res /android"

android:layout_width="fill_parent"

(32)

32

android:stretchColumns="1"> <TableRow>

</TableRow>

</TableRow>

<TextView android:text="Type:" /> <RadioGroup android:id="@+id/types"> <RadioButton android:id="@+id/take_out"

android:text="Take-Out" />

<RadioButton android:id="@+id/sit_down"

android:text="Sit-Down" />

<RadioButton android:id="@+id/delivery"

android:text="Delivery" />

</RadioGroup>

</TableRow>

<Button android:id="@+id/save"

android:layout_height="wrap_content"

android:text="Save" />

</TableLayout>

3. Ketik kode berikut pada RadioButton.java package com.eepis.android; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.RadioButton; import android.widget.RadioGroup;

(33)

33 public class RadioButton extends Activity {

/** Called when the activity is first created. */

Restaurant r = new Restaurant();

@Override

Button save = (Button) findViewById(R.id.save);

save.setOnClickListener(onSave);

}

private View.OnClickListener onSave = new View.OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

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

EditText address = (EditText) findViewById(R.id.addr);

r.setName(name.getText().toString());

r.setAddress(address.getText().toString());

RadioGroup type = (RadioGroup) findViewById(R.id.types);

switch

(type.getCheckedRadioButtonId()) { case R.id.sit_down:

r.setTypes("sit_down"); break;

case R.id.take_out:

(34)

34

break;

case R.id.delivery:

r.setTypes("delivery"); break; } } }; }

Gambar 24 Radio Button Widget

7. Creating Layout without xml

Di android umumnya developer mendesain menggunakan xml layout. Namun android juga menyediakan opsi mendesain layout tanpa xml. Cukup menggunakan kode dari file java.

(35)

35 Project Name :Noxml

2. Ketik kode berikut pada Noxml.java package com.eepis.androud import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.RadioButton; import android.widget.RadioGroup; public class Noxml extends Activity {

Restaurant r = new Restaurant(); RadioButton rb;

@Override

Button save = (Button) findViewById(R.id.save);

save.setOnClickListener(onSave);

rb=new RadioButton(getBaseContext()); rb.setText("Wrapped");

}

public void onClick(View v) { EditText name = (EditText) findViewById(R.id.name);

(36)

36 r.setName(name.getText().toString()); r.setAddress(address.getText().toString()); RadioGroup types=(RadioGroup) findViewById(R.id.types); types.addView(rb); switch (types.getCheckedRadioButtonId()) {

case R.id.sit_down:

r.setTypes("sit_dawn");

break;

r.setTypes("take_out");

break;

(37)

37 Gambar 25 Membuat Layout tanpa xml

8. Advanced Layout-ScrollView

ScrollView pada android digunakan untuk menampilkan layout yang memanjang baik ke samping atau kebawah. Fungsi cukup sama ketika kita membuka sebuah web page.

1. Buat project baru dengan kriteria sebagai berikut: Project Name :ScrollView

<ScrollView

(38)

38 <TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="1" > <TableRow >

</TableRow>

</TableRow>

3. Ketik kode berikut pada ScrollView.java package com.eepis.android;

(39)

39 import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.RadioButton; import android.widget.RadioGroup;

public class ScrollView extends Activity { Restaurant r = new Restaurant(); RadioButton rb,rt,rs,rc;

@Override

Button save = (Button) findViewById(R.id.save); save.setOnClickListener(onSave); rb=new RadioButton(getBaseContext()); rb.setText("Wrapped"); rt=new RadioButton(getBaseContext()); rt.setText("Wrapped"); rs=new RadioButton(getBaseContext()); rs.setText("Wrapped"); rc=new RadioButton(getBaseContext()); rc.setText("Wrapped"); }

public void onClick(View v) { EditText name = (EditText) findViewById(R.id.name);

r.setName(name.getText().toString());

r.setAddress(address.getText().toString());

RadioGroup types=(RadioGroup) findViewById(R.id.types);

(40)

40 types.addView(rb); types.addView(rt); types.addView(rs); types.addView(rc); switch (types.getCheckedRadioButtonId()) {

case R.id.sit_down:

r.setTypes("sit_dawn"); break;

r.setTypes("take_out"); break;

(41)

41

Bab 3

Selection widget adalah widget yang digunakan untuk melakukan pemilihan fungsi apa yang ingin dijalankan. Pada contoh project yang akan kita buat adalah ListView,Spinner dan GridView.

1. Selection Widget-ListView

ListView merupakan widget pada android untuk menampilkan pilihan dalam bentuk list baik berurutan maupun tidak. Dan setiap pilihan dalam list bisa diberi fungsi sendiri sendiri.

1. Buat project baru dengan kriteria sebagai berikut: Project Name :ListView

Package :com.eepis.android SDK version :Android 2.1 2. Ketik Kode berikut pada main.xml

<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/selection" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff0000cc"

Selection Widget

(42)

42 android:textStyle="bold" /> <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" android:drawSelectorOnTop="false"/> <TextView android:id="@android:id/empty" android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="Empty set"/>

</LinearLayout>

3. Ketik kode berikut pada ListView.java package com.eepis.android; import android.app.ListActivity; import android.os.Bundle; import android.view.View; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.TextView; public class ListView extends ListActivity { /** Called when the activity is first created. */ TextView selection;

String[] items = {"this","is","a","really","really2", "really3","really4","really5","silly","list"};

@Override

setListAdapter(new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1,

items));

(43)

43 }

protected void onListItemClick(ListView l,View v,

int position,long id){ super.onListItemClick(l, v, position, id);

String text = "position:"+position+""+items[position]; selection.setTag(text);

} }

Gambar 27 Simple ListView

2. Selection Widget-Spinner

Spinner bisa dikatakan mirip dengan dropdown menu, dimana untuk memilih kita harus klik terlebih dahulu pada widget tersebut untuk memunculkan pilihan.

(44)

44

1. Buat project baru dengan kriteria sebagai berikut: Project Name :Spinner

3. Ketik kode berikut pada spinner.java package com.eepis.android; import android.app.Activity; import android.os.Bundle; import android.view.View;

(45)

45 import android.widget.AdapterView;

import android.widget.Spinner; import android.widget.TextView;

public class Spinner extends Activity implements AdapterView.OnItemSelectedListener{

TextView selection; String[] items =

{"this","is","a","really","really2",

"really3","really4","really5","silly","list "};

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); selection= (TextView) findViewById(R.id.selection); Spinner spin=(Spinner) findViewById(R.id.spinner); spin.setOnItemSelectedListener(this);

ArrayAdapter<String> aa=new ArrayAdapter<String>(this, android.R.layout.simple_spinner_dropdown_it em,items); aa.setDropDownViewResource(android.R.layout.simpl e_spinner_dropdown_item); spin.setAdapter(aa); } @Override

public void onItemSelected(AdapterView<?> parent, View v, int position,

long id) {

(46)

46

selection.setText(items[position]); }

@Override

public void

onNothingSelected(AdapterView<?> parent) { // TODO Auto-generated method stub

selection.setText(""); }

}

Gambar 28 Spinner

3. Selection Widget-GridView

GridView merupakan selection widget dengan tampilan berupa grid. Yaitu mirip dengan tampilan tile icons pada windows.

(47)

47 1. Buat project baru dengan kriteria sebagai berikut:

Project Name :GridView

Package :com.eepis.android SDK version :Android 2.1 2. Ketik kode berikut pada main.xml

3. Ketik kode berikut pada GridView.java package com.eepis.android;

(48)

48 import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.ArrayAdapter; import android.widget.AdapterView; import android.widget.GridView; import android.widget.TextView;

public class GridView extends Activity implements AdapterView.OnItemClickListener{

TextView selection; String[]items={

"this","is","a","really","really2","really3","rea lly4","really5","silly","list"};

@Override

Public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); selection= (TextView) findViewById(R.id.selection); GridView gv=(GridView) findViewById(R.id.grid);

ArrayAdapter<String> aa=new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1,items); gv.setAdapter(aa);

gv.setOnItemClickListener(this);

}

@Override

public void onItemClick(AdapterView<?> parent, View v, int position,

long id) {

(49)

49

selection.setText(items[position]); }

}

(50)

50

Bab 4

Kali ini kita akan membahas lebih lanjut tentang selection widget. Khusus untuk bab ini ada class khusus yang digunakan pada setiap percobaan. Berikut class tersebut:

Restaurant.java

package com.coba.tes; public class Restaurant {

private String name = ""; private String address = ""; private String type=""; public String getName() {

return (name); }

public String getType(){ return(type); }

public void setType(String type){ this.type=type;

}

public void setName(String name) { this.name = name;

}

public String getAddress() { return (address); }

public void setAddress(String address) { this.address = address;

}

public String toString(){ return(getName());

Selection Widget-Advanced

(51)

51 }

}

1. Adding List Data

Kita akan mencoba untuk menambah data ke dalam list selection widget yang telah kita buat.

1. Buat project baru dengan kriteria sebagai berikut: Project Name :AddingList

<RelativeLayout

android:layout_height="fill_parent">

<TableLayout android:id="@+id/details"

android:layout_alignParentBottom="true" android:stretchColumns="1">

<TextView android:text="Name:" /> <EditText android:id="@+id/name" /> </TableRow> <TableRow> <TextView android:text="Address:" /> <EditText

(52)

52 android:id="@+id/addr" /> </TableRow> <TableRow> <TextView android:text="Type:" /> <RadioGroup android:id="@+id/types"> <RadioButton android:id="@+id/take_out" android:text= "Take-Out" />

android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Save" /> </TableLayout> <ListView android:id="@+id/restaurants" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_above="@id/details" /> </RelativeLayout>

3. Ketik kode berikut pada AddingList.java package com.eepis.android;

(53)

53 import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; import android.widget.RadioGroup; public class AddingList extends Activity {

List<Restaurant> model = new ArrayList<Restaurant>(); ArrayAdapter<Restaurant> adapter = null;

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

Button save = (Button) findViewById(R.id.save); save.setOnClickListener(onSave);

ListView list = (ListView) findViewById(R.id.restaurants);

adapter = new ArrayAdapter<Restaurant>(this, android.R.layout.simple_list_item_1, model); list.setAdapter(adapter);

}

private View.OnClickListener onSave = new View.OnClickListener() {

@Override

(54)

54

Restaurant r = new Restaurant(); EditText name = (EditText) findViewById(R.id.name);

r.setName(name.getText().toString()); r.setAddress(address.getText().toString()); RadioGroup types = (RadioGroup)

findViewById(R.id.types); switch (types.getCheckedRadioButtonId()) { case R.id.sit_down: r.setType("sit_down"); break; case R.id.take_out: r.setType("take_out"); break; case R.id.delivery: r.setType("delivery"); break; } adapter.add(r); } }; }

(55)

55 Gambar 30 Adding List Item

2. Adding Spinner Data

Untuk menambahkan data pada Spinner hampir mirip dengan penambahan data pada ListView. Jadi cermati baik baik.

1. Buat project baru dengan kriteria sebagai berikut: Project Name :AddingListSpinner

(56)

56

<RelativeLayout

android:layout_alignParentBottom="true"

android:stretchColumns="1">

<Spinner android:id="@+id/spinner"

android:layout_alignParentTop="true"

android:layout_above="@id/details" /> <TableRow>

<TextView android:text="Name:"

/> <EditText android:id="@+id/name" /> </TableRow> <TableRow> <TextView android:text="Address:" /> <EditText android:id="@+id/addr" /> </TableRow> <TableRow>

<TextView android:text="Type:"

/>

<RadioButton

android:id="@+id/take_out" android:text= "Take-Out" />

(57)

57

<RadioButton

android:id="@+id/sit_down" android:text= "Sit-Down" /> <RadioButton android:id="@+id/delivery" android:text="Delivery" /> </RadioGroup> </TableRow>

</TableLayout>

<TextView android:id="@+id/selection"

android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff0000cc" android:textStyle="bold" android:textSize="14pt" /> </RelativeLayout>

3. Ketik kode berikut pada AddingListSpinner.java package com.eepis.android; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Adapter; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Button;

(58)

58 import android.widget.EditText; import android.widget.ListView; import android.widget.RadioGroup; import android.widget.Spinner; import android.widget.TextView;

public class AddingListSpinner extends Activity implements AdapterView.OnItemSelectedListener{

List<Restaurant> model = new ArrayList<Restaurant>(); ArrayAdapter<Restaurant> aa = null;

TextView selection; @Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);

selection= (TextView) findViewById(R.id.selection); Button save = (Button) findViewById(R.id.save); save.setOnClickListener(onSave);

Spinner spin=(Spinner) findViewById(R.id.spinner); spin.setOnItemSelectedListener(this); aa=new ArrayAdapter<Restaurant>(this, android.R.layout.simple_spinner_dropdown_item,model); aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdo wn_item); spin.setAdapter(aa); }

private View.OnClickListener onSave = new

View.OnClickListener() { @Override

(59)

59 // TODO Auto-generated method stub Restaurant r = new Restaurant();

EditText name = (EditText)

findViewById(R.id.name);

EditText address = (EditText)

findViewById(R.id.addr);

r.setName(name.getText().toString()); r.setAddress(address.getText().toString()); RadioGroup types = (RadioGroup) findViewById(R.id.types); switch (types.getCheckedRadioButtonId()) { case R.id.sit_down: r.setType("sit_down"); break; case R.id.take_out: r.setType("take_out"); break; case R.id.delivery: r.setType("delivery"); break; } aa.add(r); } }; @Override

public void onItemSelected(AdapterView<?> parent, View v, int position,

long id) {

selection.setText(model.get(position).toString()); }

@Override

(60)

60

// TODO Auto-generated method stub selection.setText("");

} }

Gambar 31 Adding Spinner Data

3. Adding List with AutoComplete

AutoComplete merupakan fitur yang memberikan kemudahan dengan menebak teks yang akan diinputkan user. Kali ini kita akan menggabungkkan dengan percobaan Adding List.

(61)

61 1. Buat project baru dengan kriteria sebagai berikut:

Project Name :AutoComplete Package :com.eepis.android SDK version :Android 2.1

<RelativeLayout

android:layout_alignParentBottom="true"

android:stretchColumns="1">

<Spinner android:id="@+id/spinner"

android:layout_alignParentTop="true"

android:layout_above="@id/details" /> <TableRow>

<TextView android:text="Name:"

/> <AutoCompleteTextView android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="wrap_content" android:completionThreshold="3" />

(62)

62 </TableRow> <TableRow> <TextView android:text="Address:" /> <EditText android:id="@+id/addr" /> </TableRow> <TableRow>

<TextView android:text="Type:"

/>

<RadioButton

android:id="@+id/take_out" android:text= "Take-Out" />

<RadioButton

android:id="@+id/sit_down" android:text= "Sit-Down" /> <RadioButton android:id="@+id/delivery" android:text="Delivery" /> </RadioGroup> </TableRow>

</TableLayout>

<TextView android:id="@+id/selection"

android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff0000cc" android:textStyle="bold" android:textSize="14pt" /> </RelativeLayout>

(63)

63 3. Ketik kode berikut pada AutoComplete.java

package com.eepis.android; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.text.Editable; import android.text.TextWatcher; import android.view.View; import android.widget.Adapter; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; import android.widget.RadioGroup; import android.widget.Spinner; import android.widget.TextView;

public class AutoComplete extends Activity

implements AdapterView.OnItemSelectedListener,TextWatcher{ /** Called when the activity is first created. */

List<Restaurant> model = new ArrayList<Restaurant>(); ArrayAdapter<Restaurant> aa = null;

String[] items = {"this","is","a","really","really2", "really3","really4","really5","silly","list"};

TextView selection;

AutoCompleteTextView name; @Override

(64)

64

selection= (TextView) findViewById(R.id.selection); Button save = (Button) findViewById(R.id.save); save.setOnClickListener(onSave);

Spinner spin=(Spinner) findViewById(R.id.spinner); spin.setOnItemSelectedListener(this); aa=new ArrayAdapter<Restaurant>(this, android.R.layout.simple_spinner_dropdown_item,model); aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdo wn_item); spin.setAdapter(aa);

name = (AutoCompleteTextView) findViewById(R.id.name); name.addTextChangedListener(this);

name.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line,items)); }

private View.OnClickListener onSave = new View.OnClickListener() {

@Override

// TODO Auto-generated method stub Restaurant r = new Restaurant(); EditText address = (EditText) findViewById(R.id.addr);

r.setName(name.getText().toString()); r.setAddress(address.getText().toString()); RadioGroup types = (RadioGroup)

findViewById(R.id.types); switch (types.getCheckedRadioButtonId()) { case R.id.sit_down:r.setType("sit_down"); break; case R.id.take_out: r.setType("take_out"); break; case R.id.delivery: r.setType("delivery");

(65)

65 break; } //model.listIterator().previous().toString(); aa.add(r); } }; @Override

public void onItemSelected(AdapterView<?> parent, View v, int position,long id) {

selection.setText(model.get(position).toString()); }

@Override

public void onNothingSelected(AdapterView<?> arg0) { selection.setText("");

}

@Override

public void afterTextChanged(Editable s) { }

@Override

public void beforeTextChanged(CharSequence s, int start, int count,int after) {

}

@Override

public void onTextChanged(CharSequence s, int start, int before, int count) {

} }

(66)

66

(67)

67

Bab 5

Saatnya kita beralih ke design layout lebih lanjut. Setelah kita mempelajarai dasar dasar layout pada bab selanjutkan kini kita akan memasuki tahap layout lanjutan.

1. Date And Time Widget

1. Buat project baru dengan kriteria sebagai berikut: Project Name :DateTime

<LinearLayout xmlns:android="http://schemas.android.com/apk/res /android" android:id="@+id/widget28" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/lblDateAndTime" android:layout_width="fill_parent" android:layout_height="47px" android:background="#ff000099" android:textStyle="bold" /> <Button android:id="@+id/btnDate"

Advanced Layout

(68)

68

android:text="Set the Date" /> <Button

android:id="@+id/btnTime"

android:text="Set the Time" />

</LinearLayout>

3. Ketik kode berikut pada DateTime.java package com.eepis.android; import android.app.Activity; import android.os.Bundle; import android.app.DatePickerDialog; import android.app.TimePickerDialog; import android.view.View; import android.widget.Button; import android.widget.DatePicker; import android.widget.TimePicker; import android.widget.TextView; import java.text.DateFormat; import java.util.Calendar;

public class DateTime extends Activity {

/** Called when the activity is first created. */ DateFormat fmtDateAndTime =

DateFormat.getDateTimeInstance(); TextView lblDateAndTime;

Calendar myCalendar = Calendar.getInstance(); DatePickerDialog.OnDateSetListener d = new DatePickerDialog.OnDateSetListener() {

(69)

69 public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {

myCalendar.set(Calendar.YEAR, year); myCalendar.set(Calendar.MONTH, monthOfYear); myCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth); updateLabel(); } }; TimePickerDialog.OnTimeSetListener t = new TimePickerDialog.OnTimeSetListener() {

public void onTimeSet(TimePicker view, int hourOfDay, int minute) { myCalendar.set(Calendar.HOUR_OF_DAY, hourOfDay); myCalendar.set(Calendar.MINUTE, minute); updateLabel(); } };

private void updateLabel() {

lblDateAndTime.setText(fmtDateAndTime.format(myCalendar.g etTime()));

}

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); lblDateAndTime = (TextView) findViewById(R.id.lblDateAndTime);

Button btnDate = (Button) findViewById(R.id.btnDate); btnDate.setOnClickListener(new

View.OnClickListener() {

new DatePickerDialog(dateandtime.this, d, myCalendar.get(Calendar.YEAR),

(70)

70

myCalendar.get(Calendar.DAY_OF_MONTH)).show(); }

});

Button btnTime = (Button) findViewById(R.id.btnTime); btnTime.setOnClickListener(new

View.OnClickListener() {

public void onClick(View v) { new TimePickerDialog(dateandtime.this, t, myCalendar.get(Calendar.HOUR_OF_DAY), myCalendar.get(Calendar.MINUTE), true).show(); } }); updateLabel(); }// onCreate }

(71)

71

2. Tab Menu

Tab menu merupakan fitur layout untuk membagi tampilan menjadi bagian dari tab tab sebanyak yang kita butuhkan.

1. Buat project baru dengan kriteria sebagai berikut: Project Name :TabMenu

<LinearLayout xmlns:android="http://schemas.android.com/apk/res /android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabHost android:id="@+id/tabhost"

android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingTop="62px"> <AnalogClock android:id="@+id/tab1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_centerHorizontal="true"/>

(72)

72 <LinearLayout android:id="@+id/tab2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/a pk/res/android"> <TextView android:id="@+id/caption1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff0000ff"

android:text="Person Name"

android:textSize="20px"> </TextView> <EditText android:id="@+id/txtPerson" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="txtPerson" android:textSize="18sp"> </EditText> <Button android:id="@+id/btnGo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Go"> </Button> </LinearLayout> </FrameLayout> </TabHost> </LinearLayout>

3. Ketik kode berikut pada TabMenu.java package com.eepis.android;

(73)

73 import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.TabHost; public class TabMenu extends Activity {

@Override

public void onCreate(Bundle icicle) { super.onCreate(icicle);

TabHost tabs = (TabHost) findViewById(R.id.tabhost); tabs.setup(); TabHost.TabSpec spec; spec = tabs.newTabSpec("tag1"); spec.setContent(R.id.tab1); spec.setIndicator("1-Clock"); tabs.addTab(spec); spec = tabs.newTabSpec("tag2"); spec.setContent(R.id.tab2); spec.setIndicator("2-Login"); tabs.addTab(spec); tabs.setCurrentTab(0);

Button btnGo = (Button) findViewById(R.id.btnGo); btnGo.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) { EditText txtPerson = (EditText) findViewById(R.id.txtPerson); String theUser = txtPerson.getText().toString(); txtPerson.setText("Hola " + theUser); } }); } }

(74)

74

Gambar 34 Tab Menu

3. Slide Drawer

Slide drawer merupakan sub menu yang akan muncul jika kita klik drawer button di screen. Fitur ini miri dengan ketika kita membuka menu di android

1. Buat project baru dengan kriteria sebagai berikut: Project Name :SlideDrawer

<RelativeLayout

(75)

75 /android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FF4444CC" > <TextView android:id="@+id/label0" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:background="#ffcc3300"

android:text="SlidingDrawer Demo"

android:textSize="24sp" /> <SlidingDrawer android:id="@+id/drawer" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentBottom="true" android:content="@+id/content" android:handle="@+id/handle" > <ImageView android:id="@id/handle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <LinearLayout android:id="@id/content" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/label1" android:layout_width="fill_parent" android:layout_height="wrap_content"

(76)

76 android:background="#ff006666" android:text="Line 1" android:textSize="22sp" /> <TextView android:id="@+id/label2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff669900" android:text="Line 2" android:textSize="22sp" /> <TextView android:id="@+id/label3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff0000cc" android:text="Line 3" android:textSize="22sp" /> <TextView android:id="@+id/filler1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="6sp" /> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="4px" android:text=" btn1 - time? " /> <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="4px" android:text=" btn2 - close " /> </LinearLayout> </SlidingDrawer> </RelativeLayout>