Pada tutorial yang lalu Android Menampilkan Data pada ListView kita sudah bisa menampilkan data kedalam ListView di Android. Namun ada satu kekurangan yakni ListView yang kita buat memiliki tampilan yang ala kadarnya. Pada artikel ini saya akan menunjukkan bagaimana cara membuat sebuah custom ListView sehingga memiliki tampilan yang menarik.
Layout
Hal pertama yang kita siapkan adalah layout. Disini kita membuat 2 buah layout xml, pertama adalah layout utama yang akan menampilkan ListView sedangkan yang kedua adalah layout yang digunakan untuk memformat item pada ListView supaya memiliki tampilan yang cukup menarik.
Berikut ini adalah kedua layout tersebut
file : activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> |
Layout diatas standar banget kita cuma menambahkan sebuah widget Listview.
Dan berikut ini adalah layout untuk format item. Perhatikan bagaimana susunan layoutnya yang sedemikian rupa serta widget apa saja yang ada didalamnya
file : list_item.xml
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 46 47 |
<?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" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="40dp" android:layout_marginRight="10dp" android:contentDescription="@string/hello_world"/> <TextView android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:textColor="#003366"/> </LinearLayout> <TextView android:id="@+id/majoring" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" /> <TextView android:id="@+id/age" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <TextView android:id="@+id/sex" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> |
Kelas Model
Rencananya pada item di ListView kita akan menampilkan data berupa gambar, nama, jurusan, umur dan jenis kelamin. Untuk itu kita perlu membuat sebuah kelas model yang merepresentasikan seorang mahasiswa.
Berikut adalah kelasnya
file : Student.java
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 |
package com.agungsetiawan.customlistview.domain; public class Student { private int image; private String name; private String majoring; private int age; private String sex; public int getImage() { return image; } public void setImage(int image) { this.image = image; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getMajoring() { return majoring; } public void setMajoring(String majoring) { this.majoring = majoring; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } } |
ArrayAdapter
Tengok lagi pada Android Menampilkan Data pada ListView, disitu kita menggunakan ArrayAdapter untuk bisa memasukkan data kesebuah ListView. Karena kita menginginkan layoutnya tidak sesederhana itu maka kita perlu membuat sebuah kustomisasi dari ArrayAdapter, disinilah inti dari membuat kustom layout pada ListView.
Berikut adalah kelas yang merupakan turunan dari ArrayAdapter
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
package com.agungsetiawan.customlistview.adapter; import java.util.List; import com.agungsetiawan.customlistview.R; import com.agungsetiawan.customlistview.domain.Student; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; public class StudentAdapter extends ArrayAdapter<Student> { List<Student> listStudent; Context context; int layout; public StudentAdapter(Context context, int layout, List<Student> listStudent) { super(context, layout, listStudent); this.context=context; this.layout=layout; this.listStudent=listStudent; } @Override public View getView(int position, View convertView, ViewGroup parent) { View v=convertView; StudentHolder holder; if(v==null){ LayoutInflater vi=((Activity)context).getLayoutInflater(); v=vi.inflate(layout, parent,false); holder=new StudentHolder(); holder.imageView=(ImageView) v.findViewById(R.id.image); holder.nameView=(TextView) v.findViewById(R.id.name); holder.majoringView=(TextView) v.findViewById(R.id.majoring); holder.ageView=(TextView) v.findViewById(R.id.age); holder.sexView=(TextView) v.findViewById(R.id.sex); v.setTag(holder); } else{ holder=(StudentHolder) v.getTag(); } Student student=listStudent.get(position); holder.imageView.setImageResource(student.getImage()); holder.nameView.setText(student.getName()); holder.majoringView.setText(student.getMajoring()); holder.ageView.setText(String.valueOf(student.getAge())); holder.sexView.setText(student.getSex()); return v; } static class StudentHolder{ ImageView imageView; TextView nameView; TextView majoringView; TextView ageView; TextView sexView; } } |
Kode diatas lumayan membutuhkan pemahaman yang mendalam. Jika sudah terbiasa pasti akan mudah untuk dipahami.
Main Activity
Saatnya kita menulis kode untuk Activity utama kita. Activity inilah yang akan menampilkan ListView yang telah kita buat diatas tadi.
Sebelumnya siapkan gambar dengan ukuran 32×32 pixel, kalian bisa mencarinya di Find Icon dan letakkan di folder res/drawable-mdpi.
file : MainActivity.java
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
package com.agungsetiawan.customlistview; import java.util.ArrayList; import java.util.List; import com.agungsetiawan.customlistview.adapter.StudentAdapter; import com.agungsetiawan.customlistview.domain.Student; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.widget.ListView; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView listView=(ListView) findViewById(R.id.listView); List<Student> listStudent=new ArrayList<Student>(); Student student,student2,student3; student=new Student(); student.setImage(R.drawable.note32); student.setName("Agung Setiawan"); student.setMajoring("Electrical"); student.setAge(23); student.setSex("male"); listStudent.add(student); student2=new Student(); student2.setImage(R.drawable.mail32); student2.setName("Hauril Maulida Nisfari"); student2.setMajoring("Electrical"); student2.setAge(21); student2.setSex("female"); listStudent.add(student2); student3=new Student(); student3.setImage(R.drawable.home32); student3.setName("Akhtar"); student3.setMajoring("Aero Space"); student3.setAge(22); student3.setSex("male"); listStudent.add(student3); listView.setAdapter(new StudentAdapter(this,R.layout.list_item,listStudent)); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } } |
Pada kelas diatas kita membuat 3 buah objek mahasiswa kemudian memasukkan kedalam sebuah list. Pada baris yang saya tandai kita mengeset array adapter untuk ListView yang akan menampilkan data mahasiswa. Array adapter yang digunakan adalah array adapter kustom yang telah kita buat tadi dengan parameter berupa context yaitu kelas Activity itu sendiri, kemudian parameter kedua yaitu layout item, dan paramter ketiga berupa list mahasiswa.
Running dan Screenshot
Jalankan program dan berikut adalah hasilnya
Penutup
Demikian tutorial singkat tentang membuat kustom ListView, semoga bermanfaat 😀
Pada tulisan selanjutnya saya akan menulis mengenai penggunaan basisdata di Android
mas mau tanya , kalau ingin ambil id dari list adapternya gmna ya pada custom adapter sprti diatas ?
bgaimana cara menampilkan banyak data ke listview seperti seribu data??
mohon bantuannya….
terima kasih
mas bagaimana cara menampilkan data dari oracle?