Android Membuat Custom ListView

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

<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>

<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

<?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>

<?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

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;
	}	
}

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

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;
	}

}

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

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;
    }
   
}

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

Facebook Comments

Agung Setiawan

Create Things and Build Stuff

Android Membuat Custom ListView

Layout

Kelas Model

ArrayAdapter

Main Activity

Running dan Screenshot

Penutup

One thought on “Android Membuat Custom ListView”

Leave a Reply Cancel reply