Cara Membuat Custom Listview Dengan Gambar Dan Teks Di Android

Custom Listview adalah cara untuk menampilkan listview dengan cara menggabungkan atau menambahkan widget seperti Button, EditText, Imageview dan lain lain. contohnya seperti gambar di bawah ini.

Contoh tampilan Custom Listview

Nah untuk membuatnya yaitu pertama kita siapkan dulu gambar atau logo yang akan kita buat listview kemudia buat folder "drawable" di dalam folder "res" lalu copy dan paste gambar atau logo yang sudah kita siapkan tadi. 

Pada layout "activity_main.xml" tambahkan widget listview  dengan source code seperti berikut.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
     android:background="@drawable/bg2">

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textColor="#ffffff"
        tools:listitem="@android:layout/simple_list_item_1" >

    </ListView>

</LinearLayout>

Kemudian pada layout "custom_item_listview.xml" tambahkan widget dua buah textview dan sebuah imageview dengan source code seperti 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"
     >

    <ImageView
        android:id="@+id/img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />

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

        <TextView
            android:id="@+id/namarestoran"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/alamatrestoran"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="TextView"
            android:textColor="#ffffff" />

    </LinearLayout>

</LinearLayout>

Buat class baru pada package dengan nama "CustomBaseAdapter.java"

package com.custom.listview;

import java.util.ArrayList;

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 CustomBaseAdapter extends BaseAdapter {
private static ArrayList<EntitasRestoran> restoran;

private LayoutInflater mInflater;

public CustomBaseAdapter(Context context, ArrayList<EntitasRestoran> res) {
restoran = res;
mInflater = LayoutInflater.from(context);
}

public int getCount() {
return restoran.size();
}

public Object getItem(int position) {
return restoran.get(position);
}

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

public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater
.inflate(R.layout.custom_item_listview, null);
holder = new ViewHolder();
holder.nama = (TextView) convertView
.findViewById(R.id.namarestoran);
holder.alamat = (TextView) convertView
.findViewById(R.id.alamatrestoran);
holder.im = (ImageView) convertView.findViewById(R.id.img);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}

holder.nama.setText(restoran.get(position).getNamaResto());
holder.alamat.setText(restoran.get(position).getAlamatResto());
holder.im.setBackgroundResource(restoran.get(position).getPicResto());

return convertView;
}

static class ViewHolder {
TextView nama;
TextView alamat;
ImageView im;
}
}

Buat class baru pada package dengan nama "EntitasRestoran.java"

package com.custom.listview;

public class EntitasRestoran {
String namaresto = "";
String alamatresto = "";
int pic;

public String getNamaResto() {
return namaresto;
}

public void setNamaResto(String n) {
this.namaresto = n;
}

public String getAlamatResto() {
return alamatresto;
}

public void setAlamatResto(String a) {
this.alamatresto = a;
}

public int getPicResto() {
return pic;
}

public void setPicResto(int p) {
this.pic = p;
}
}

Kemudia tambahkan sourcode berikut ini pada "MainActivity.java"

package com.custom.listview;

import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ListView;

public class MainActivity extends Activity {


ListView lv;
ArrayList<EntitasRestoran> restoran = new ArrayList<EntitasRestoran>();
EntitasRestoran entitasrestoran;

String[] arrayRestoran = { "Aulia L Nazain", "Aulia L Nazain" , "Aulia L Nazain", "Aulia L Nazain", "Aulia L Nazain", "Aulia L Nazain", "Aulia L Nazain", "Aulia L Nazain", "Aulia L Nazain", "Aulia L Nazain"};
String[] arrayAlamat = { "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas", "Penjelasan dari gambar di atas"};
int[] ArrayPicRestoran = { R.drawable.siji, R.drawable.siji,
R.drawable.siji, R.drawable.siji , R.drawable.siji, R.drawable.siji , R.drawable.siji, R.drawable.siji, R.drawable.siji, R.drawable.siji};



@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv = (ListView) findViewById(R.id.listView1);

for (int i = 0; i < arrayRestoran.length; i++) {
entitasrestoran = new EntitasRestoran();
entitasrestoran.setNamaResto(arrayRestoran[i]);
entitasrestoran.setAlamatResto(arrayAlamat[i]);
entitasrestoran.setPicResto(ArrayPicRestoran[i]);
restoran.add(entitasrestoran);

}

CustomBaseAdapter custom = new CustomBaseAdapter(this, restoran);
lv.setAdapter(custom);

}

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

}

Selamat mencoba dan jika ada tutorial yang kurang jelas atau terjadi kesalahan silahkan tinggalkan komentar.  Semoga bisa bermanfaat!