Header Ads

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




No comments

Powered by Blogger.