Membuat Listview dengan Gambar | Tutorial Android

Berikut adalah 'tutorial membuat listview dengan gambar'. Adapun tahap-tahapnya sebagai berikut :

1. Buat projek baru dengan nama 'ListImage'. Selanjutnya masukkan gambar anjing, kambing, kucing, kuda, naga pada folder res -> drawable.
2. Buat kode program pada 'activity_main.xml'

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"   

    android:orientation="vertical"

     >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"/>

       

   <ListView

       android:id="@+id/lv"

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       ></ListView>

</LinearLayout>

3. Buat layout XML baru dengan nama 'layout_isi_lv.xml'. File -> new -> other -> Android XML Layout File -> beri nama file 'layout_isi_lv.xml'. Lalu buat kode program pada 'layout_isi_lv.xml'

<?xml version="1.0"encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

   

    <ImageView

        android:id="@+id/imV"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:src="@drawable/ic_launcher"

        />

   

    <TextView

        android:id="@+id/tv_nama"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_toRightOf="@+id/imV"

        android:text="TextView"

        android:textColor="#fffd7f"

        android:textSize="10pt"

        />

   

    <TextView

        android:id="@+id/tv_ltn"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/tv_nama"

        android:layout_below="@+id/tv_nama"

        android:text="TextView"

        android:textColor="#02808f"

        />

</RelativeLayout>

4. Buat kode program pada 'MainActivity.java'

import android.os.Bundle;

import android.app.Activity;

import java.util.ArrayList;

import java.util.HashMap;

import android.widget.ListView;

import android.widget.ListAdapter;

import android.widget.SimpleAdapter;

public class MainActivity extends Activity {

      protected ListView lv;

      protected ListAdapter adapter;

      SimpleAdapter Adapter;

      HashMap<String, String> map;

      ArrayList<HashMap<String, String>> mylist;

      String[] Pil;

      String[] Ltn;

      String[] Gbr;

     

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

       

        lv = (ListView) findViewById(R.id.lv);

       

        Pil = new String[] {"Anjing", "Kambing", "Kucing", "Kuda", "Naga"};

        Ltn = new String[] {"Anjing Jinak", "Kambing Hutan", "Kucing-Kucingan", "Kuda-kudaan", "Naga Bonar"};

        Gbr = new String[] {Integer.toString(R.drawable.anjing),

                                    Integer.toString(R.drawable.kambing),

                                    Integer.toString(R.drawable.kucing),

                                    Integer.toString(R.drawable.kuda),

                                    Integer.toString(R.drawable.naga) };

       

        mylist = newArrayList<HashMap<String,String>>();

       

        for (int i = 0; i < Pil.length; i++){

            map = new HashMap<String, String>();

            map.put("list", Pil[i]);

            map.put("latin", Ltn[i]);

            map.put("gbr", Gbr[i]);

            mylist.add(map);             

        }

       

        Adapter = new SimpleAdapter(this, mylist, R.layout.layout_isi_lv,

                  new String[] {"list", "latin", "gbr"}, new int[] {R.id.tv_nama, R.id.tv_ltn, R.id.imV});

        lv.setAdapter(Adapter);

    }

}

5. RUN dan lihat hasilnya