Modul,Android,Tutorial

1. Praktikum ANDROID
ANDROID
FOR
BEGINNER MODUL 5
!
[ANDROID LISTVIEW]
!!!!!
SUDARYATNO
yatnosudar@gmail.com | @dodulz | facebook : yatno.sudar
Page 1 of 10

2. Praktikum ANDROID
ANDROID LISTVIEW
!
ListView adalah view group android yang digunakan untuk menampilkan item dengan tampilan
secara vertical list. ListView memiliki properti wajib yaitu layout_height, layout_width, dan ID.
ListView juga memiliki class ListActivity yang khusus menangani ListView.
!!!!!!!!!!
ListView mempunyai action listener yang digunakan ketika user memilih salah satu item yang
ada di listview. Ada beberapa macam action listener yang terdapat pada listview diantarannya
adalah :
• setOnItemClickListener adalah action ketika user menekan/tap salah satu item.
• setOnItemLongClickListener adalah action ketika user menekan/tap salah satu item dalam
waktu yang lama.
• setOnItemSelectedListener adalah action ketika user memilih item.
!
ListActivity
ListActivity adalah class Activity yang di khususkan untuk ListView. Sama seperti class activity,
ListActivity juga memiliki lifecycle. Yang membedakan dari kedua class ini tarletan pada
penggunaan ListActivity yang lebih sepesifik untuk ListView ketimbang Activity yang memiliki
lingkup global.
!
ArrayAdapter
Setiap ListView memiliki adapter, yang berfungsi sebagai array item dari ListView. ArrayAdapter
adalah kumpulan item-item list yang nantinnya akan digunakan oleh listview untuk ditampilkan.
Secara sederhana penggunaannya adalah sebagai berikut :
!!!!
Page 2 of 10

3. Praktikum ANDROID
Code diatas menjelaskan bagai ArrayAdapter digunakan untuk mengumpulkan atau mengkoleksi
dan mengkonversi item-item yang ada di String[] values. Dan lakukan set / mendaftarkan
list_view menggunakan method setAdapter di list_view.
!
Custom Adapter
Setiap item dapat di custom sesuai keinginan kita. Hal ini dilakukan untuk membuat listview
menjadi lebih menarik dan interaktif. Di satu sisi kita juga ingin menampilkan informasi lebih
banyak di setiap item listview. Perhatikan contoh dibawah ini :
Gambar diatas adalah halaman pemberitahuan yang ada pada aplikasi facebook android.
Halaman notifikasi tersebut merupakan listview yang adapternnya di custom sedemikian rupa
sehingga menampikan informasi yang di perlukan.
Page 3 of 10
list_view = (ListView) findViewById(R.id.list_view);
String[] values = new String[] { Android, iPhone,
WindowsMobile,
Blackberry, WebOS, Ubuntu, Windows7, Max OS X,
Linux, OS/2 };
ArrayAdapterString adapter = new
ArrayAdapterString(MainActivity.this,
android.R.layout.simple_list_item_1, values);
list_view.setAdapter(adapter);

4. Praktikum ANDROID
!
PRAKTIKUM
!S
imple ListView ! Tujuan : Mengenal listview dengan simple adapter.
Scope : ListView, XML, setAdapter, setOnClickListener !
1. Buat project baru dengan nama terserah Anda.
2. buat layout baru dengan simple_listview.xml
3. Tambahkan ListView pada simple_listview.xml dengan kriteria berikut :
1. id = simple_list
2. layout_width = fill_parent
3. layout_height = fill_parent
?xml version=1.0 encoding=utf-8?
LinearLayout xmlns:android=http://schemas.android.com/apk/res/
android
4. Di class MainActivity arahkan layout ke simple_listview.xml dengan code
setContentView(R.layout.simple_listview).
5. Buat object private ListView dan hubungkan dengan listview dengan id simple_list.
6. Buat String[] values dan isi String[] tersebut dengan value sesuka anda.
7. Buat ArrayAdapter seperti berikut :
Page 4 of 10
android:layout_width=match_parent
android:layout_height=match_parent
android:orientation=vertical
!
ListView
android:id=@+id/simple_list
android:layout_width=match_parent
android:layout_height=match_parent
/ListView
/LinearLayout
list_view = (ListView) findViewById(R.id.list_view);
String[] values = new String[] { Android, iPhone,
WindowsMobile,
Blackberry, WebOS, Ubuntu, Windows7, Max OS X,
Linux, OS/2 };
ArrayAdapterString adapter = new ArrayAdapterString(MainActivity.this,
android.R.layout.simple_list_item_1, values);

5. Praktikum ANDROID
8. Kemudia set adapter tersebut ke dalam list yang kita buat menggunakan method
list_view.setAdapter(adapter);
9. Dan Tambahkan action di list_view dengan menggunakan method setOnItemClickListener.
list_view.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView? arg0, View arg1, int arg2,long arg3) {
10. Berikut adalah code lengkap :
11. Jalankan Aplikasi
Page 5 of 10
Toast.makeText(MainActivity.this,Saya Pilih +
adapter.getItem(arg2).toString(),Toast.LENGTH_SHORT).show();
}
});
public class MainActivity extends Activity {
private ListView list_view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.simple_listview); !
list_view = (ListView) findViewById(R.id.simple_list);
String[] values = new String[] { Android, iPhone,
WindowsMobile,
Blackberry, WebOS, Ubuntu, Windows7, Max OS
X,
Linux, OS/2 };
final ArrayAdapterString adapter = new ArrayAdapterString(
MainActivity.this,
android.R.layout.simple_list_item_1, values);
list_view.setAdapter(adapter);
list_view.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView? arg0, View arg1, int
arg2,
long arg3) {
Toast.makeText(MainActivity.this,
Saya Pilih +
adapter.getItem(arg2).toString(),
Toast.LENGTH_SHORT).show();
}
});
}
}

6. Praktikum ANDROID
Custom ListView ! Tujuan : Membuat ListView dengan ArrayAdapter
Scope : ArrayAdapter, Bean, item view, getView !
1. Buat layout baru dengan nama main_list.xml
a. id=main_list_view
b. layout_width = fill_parent
c. layout_height = fill_parent
2. Buat layout baru dengan nama item_list.xml seperti berikut ini :
?xml version=1.0 encoding=utf-8?
LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
!
Page 6 of 10
android:layout_width=match_parent
android:layout_height=match_parent
android:orientation=vertical
android:padding=5dp !
LinearLayout
android:layout_width=match_parent
android:layout_height=wrap_content !
TextView
android:id=@+id/judul
android:layout_width=match_parent
android:layout_height=wrap_content
android:layout_weight=0.6
android:text=Hardisk OSX
android:textAppearance=?android:attr/textAppearanceLarge / !
TextView
android:id=@+id/harga
android:layout_width=match_parent
android:layout_height=match_parent
android:layout_gravity=center
android:layout_weight=1
android:text=Rp 2.000.000
android:textAppearance=?android:attr/textAppearanceMedium / !
/LinearLayout
TextView
android:id=@+id/keterangan
android:layout_width=match_parent
android:layout_height=wrap_content
android:text=SSD dengan kecepatan 7000 RPM
android:textAppearance=?android:attr/textAppearanceSmall / !
/LinearLayout

7. Praktikum ANDROID
3. Buat class baru dengan nama DetailHarga
Class diatas berfungsi sebagai object dari data yang ingin ditampilkan nantinnya. !
4. Buat class ArrayAdapter dengan nama AdapterDetailHarga class ini extends dari class
ArrayAdapter dan memanfaatkan object dari class DetailHarga.
Page 7 of 10
public class DetailHarga { !
public String harga;
public String title;
public String keterangan;
public String getHarga() {
return harga;
}
public void setHarga(String harga) {
this.harga = harga;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getKeterangan() {
return keterangan;
}
public void setKeterangan(String keterangan) {
this.keterangan = keterangan;
}
}
public class AdapterDetailHarga extends ArrayAdapterDetailHarga {
public Activity context;
public int textViewResourceId;
public AdapterDetailHarga(Activity context, int textViewResourceId) {
super(context, textViewResourceId);
this.context = context;
this.textViewResourceId = textViewResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
return super.getView(position, convertView, parent);
}
}

8. Praktikum ANDROID
code diatas digunakan sebagai kerangka adapter. Constructor digunakan untuk mengeset
Context dan layout item yang digunakan. Sedangkan method getView adalah inflanter dari
listview. !
5. Buat inner class dengan nama ViewHolder
Inner class tersebut digunakan sebagai object dari xml layout item_list, yang nantinya akan di
hubungkan dengan Widget yang ada di item_list. !
6. Ubah isi method getView dengan code berikut :
code diatas digunakan untuk menhubungkan data dengan item_list, kemudian akan di beri nilai
sesuai dengan data yang akan di inputkan nantinnya. !
view = layoutinflanter.inflate(textViewResourceId, null);
Code berikut digunakan untuk menginflat item_list kedalam listview sesuai dengan posisinnya. !
view.setTag(viewholder);
Page 8 of 10
static class ViewHolder{
public TextView harga;
public TextView keterangan;
public TextView judul;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = null;
if (convertView==null) {
LayoutInflater layoutinflanter =
context.getLayoutInflater();
view = layoutinflanter.inflate(textViewResourceId, null);
ViewHolder viewholder = new ViewHolder();
viewholder.harga = (TextView) view.findViewById(R.id.harga);
viewholder.keterangan = (TextView)
view.findViewById(R.id.keterangan);
viewholder.judul = (TextView) view.findViewById(R.id.judul);
view.setTag(viewholder);
}else{
view = convertView;
}
ViewHolder viewHolder=(ViewHolder) view.getTag();
DetailHarga detail = getItem(position);
viewHolder.harga.setText(detail.getHarga());
viewHolder.judul.setText(detail.getTitle());
viewHolder.keterangan.setText(detail.getKeterangan());
return view;
}

9. Praktikum ANDROID
digunakan untuk mengeset view sesuai dengan objectnnya yang ada di class ViewHolder. !
DetailHarga detail = getItem(position);
digunakan untuk mengabil data object yang nantinnya akan di set berdasarkan objectnya. !
7. Ganti code yang ada di class MainActivity dengan code berikut :
!
list_view = (ListView) findViewById(R.id.simple_list);
adapterDetailHarga = new AdapterDetailHarga(MainActivity.this, R.layout.item_list);
list_view.setAdapter(adapterDetailHarga); !c
ode diatas digunakan untuk mendeklarasikan ListView dan AdapterDetailHarga. Sedangkan
list_view.setAdapter digunakan untuk mengeset adapter yang bersangkutan kedalam ListView. !
for (int i = 0; i values.length; i++) {
DetailHarga detail = new DetailHarga();
detail.setHarga(Rp+String.valueOf(100000*(i+1)));
detail.setKeterangan(SSD murah meriah untuk Operatin System +values[i]);
detail.setTitle(SSD for +values[i]);
adapterDetailHarga.add(detail);
} !
Page 9 of 10
public class MainActivity extends Activity {
private ListView list_view;
private AdapterDetailHarga adapterDetailHarga;
String[] values = new String[] { Android, iPhone, WindowsMobile,
Blackberry, WebOS, Ubuntu, Windows7, Max OS X,
Linux, OS/2 };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.simple_listview); !
list_view = (ListView) findViewById(R.id.simple_list);
adapterDetailHarga = new AdapterDetailHarga(MainActivity.this,
R.layout.item_list);
list_view.setAdapter(adapterDetailHarga);
for (int i = 0; i values.length; i++) {
DetailHarga detail = new DetailHarga();
detail.setHarga(Rp+String.valueOf(100000*(i+1)));
detail.setKeterangan(SSD murah meriah untuk Operatin System
+values[i]);
detail.setTitle(SSD for +values[i]);
adapterDetailHarga.add(detail);
}
}
}

10. Praktikum ANDROID
Code diatas digunakan untuk menyimpan data kedalam object DetailHarga untuk kemudian di
tambahkan kedalam class ArrayAdapter. Semua data tersebut nantinnya akan di tampilkan
berdasarkan posisi item dan data yang dimasukan. !
8. Jalankan Aplikasi !
Page 10 of 10