Praktikum ANDROID

ANDROID

FOR

BEGINNER MODUL 5 ![ANDROID LISTVIEW]

!!!!!SUDARYATNO yatnosudar@gmail.com | @dodulz | facebook : yatno.sudar

Page � of �1 10

Praktikum ANDROIDANDROID 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 � of �2 10

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 � of �3 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" }; ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, values); list_view.setAdapter(adapter);

Praktikum ANDROID!PRAKTIKUM !Simple 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

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 � of �4 10

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 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" };

ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, values);

Praktikum ANDROID8. 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.

10. Berikut adalah code lengkap :

11. Jalankan Aplikasi

Page � of �5 10

list_view.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) { 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 ArrayAdapter<String> adapter = new ArrayAdapter<String>( 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(); } }); }}

Praktikum ANDROIDCustom 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 :

!Page � of �6 10

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 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>

Praktikum ANDROID3. 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 � of �7 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 ArrayAdapter<DetailHarga> { 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); }}

Praktikum ANDROIDcode 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 � of �8 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; }

Praktikum ANDROIDdigunakan 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);!code 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 � of �9 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); } }}

Praktikum ANDROIDCode 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 � of �10 10