Android Custom ListView

Haloo semua,

Kali ini saya akan membagikan cara menampilkan custom listview pada Android.

Pertama kalian buat activity_main.xml.  Di xml ini kalian bisa tambahkan attribut “android:cacheColorHint” pada widget listview, setau saya android:cacheColorHint ini berfungsi ketika kita melakukan scrool . Pada attribut  listview  ini gunakan warna transparent  (android:cacheColorHint=”@android:color/transparent”).   Silahkan coba sendiri perbedaaan setelah dan sebelum memakai attribut android:cacheColorHint.
gunakanakan juga attribut ini, untuk menentukan garis antara item1 dan seterusnya.

 android:divider="@android:color/darker_gray"
 android:dividerHeight="0.5dp"

oke, berikut koding activity_main.xml nya :

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

 <ListView
 android:id="@+id/list"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:cacheColorHint="@android:color/transparent"
 android:divider="@android:color/darker_gray"
 android:dividerHeight="0.5dp" />

</RelativeLayout>

sekarang perlu XML buat nampung per itemnya, silahkan lihat koding berikut :

<?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="horizontal"
 android:padding="10dp" >

 <ImageView
 android:id="@+id/menu_icon"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginRight="7dp"
 android:contentDescription="@string/app_name"
 android:src="@drawable/ic_launcher" />

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="center_vertical"
 android:orientation="vertical" >

 <TextView
 android:id="@+id/menu_label"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_vertical"
 android:text="@string/app_name"
 android:textColor="#333333"
 android:textSize="17sp" />

 <TextView
 android:id="@+id/menu_labe2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_vertical"
 android:paddingTop="5dp"
 android:text="@string/app_name"
 android:textColor="#b8b8b8"
 android:textSize="14sp" />
 </LinearLayout>

</LinearLayout>

Untuk mengkustom listview diperlukan juga custom adapter, untuk itu saya sudah sediakan custom adapter beserta penjelasannya. Kalo ada yang masih bingung silahkan komen.

berikut koding SampleAdapter.java :

package com.kreativdeveloper.customlistview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class SampleAdapter extends BaseAdapter {
 private LayoutInflater inflater;
 private String[] menu;
 private String[] submenu;
 private int[] icon;
 
 public SampleAdapter(Context c) {
 inflater = LayoutInflater.from(c);
 }
 
 /** method ini di gunakan untuk menampung data 
 * jadi array di adapter menampung array dari activity
 * contoh array menu menampung data dari array menu2 */
 public void setData(String[] menu2, String[] submenu2, int[] icon2) {
 this.menu = menu2;
 this.submenu = submenu2;
 this.icon = icon2;
 }
 
 @Override
 public int getCount() {
 return menu.length;
 }

 @Override
 public Object getItem(int position) {
 return menu[position];
 }

 @Override
 public long getItemId(int position) {
 return position;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
 
 ViewHolder holder;
 
 if(convertView == null) {
 /** gunakan xml untuk list itemnya */
 convertView = inflater.inflate(R.layout.list_item_menu, null);
 
 holder = new ViewHolder();
 
 holder.icon = (ImageView) convertView.findViewById(R.id.menu_icon);
 holder.title = (TextView) convertView.findViewById(R.id.menu_label);
 holder.subtitle = (TextView) convertView.findViewById(R.id.menu_labe2);

 /** untuk menampilkan data dari adapter 
 * contoh textview label1 di isi dari array menu */
 holder.icon.setImageResource(icon[position]); 
 holder.title.setText(menu[position]);
 holder.subtitle.setText(submenu[position]);
 
 convertView.setTag(holder);
 }
 else { holder = (ViewHolder) convertView.getTag(); }
 
 return convertView;
 }
 
 /** deklarasikan widget di sini */
 static class ViewHolder {
 ImageView icon;
 TextView title;
 TextView subtitle;
 }

}

Setelah membuat adapter lanjutkan ke Activity, di activity ini kalian akan menampilkan data dari adapter yang tadi dan di input ke listview. Silahkan lihat koding berikut beserta penjelasannya :

package com.kreativdeveloper.customlistview;
/**
 * https://kreativdeveloper.wordpress.com/
 * @author Yudi Rahmat 
 *
 */
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends Activity {
 SampleAdapter mAdapter;
 ListView mListView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 mListView = (ListView) findViewById(R.id.list);
 
 mAdapter = new SampleAdapter(this); 
 
 /** data array untuk di tampilkan dalam listview */
 String[] menu = {"KreativDeveloper 1", "KreativDeveloper 2", "KreativDeveloper 3", "KreativDeveloper 4", "KreativDeveloper 5"};
 String[] submenu = {"Submenu 1", "Submenu 2", "Submenu 3", "Submenu 4", "Submenu 5"};
 int[] icon = {R.drawable.icon_1, R.drawable.icon_2, R.drawable.icon_3, R.drawable.icon_4, R.drawable.icon_5};

 /** masukan array ke dalam adapter yang tadi dibuat, jangan salah posisi ya */
 mAdapter.setData(menu, submenu, icon);
 
 /** gunakan custom adapter yang tadi di buat */
 mListView.setAdapter(mAdapter);
 
 }

}

kalian juga bisa download source code nya disini download

jangan lupa tinggalkan komentar kalian disini :D