ListView dengan Gambar Android Tutorial

Pada artikel sebelumnya saya telah menjelskan cara membuat listview di android, dan kali ini saya akan memberikan contoh cara menambahkan komponen gambar ke dalam listview. Berikut penjelasanya

ListView pada android memiliki banyak fungsi seperti seperti membuat daftar data, daftar pilihan bahkan menampilkan informasi yang sangat komplek dengan berbagai komponen di dalamnya. Untuk membuatnya kita perlu menyiapkan gambar yang ingin kita tampilkan, jika sudah siap sobat bisa mengikuti langkah pembuatannya di bawah ini

Pertama buat file project baru bernama ListView untuk package beri nama blogsetyaaji.com
Pada activity_main.xml, buat kodenya seperti berikut

ml<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.blogsetyaaji.multipleactivity.MainActivity">

    <ListView
        android:id="@+id/mobilelist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

Setelah itu tambahkan satu file layout lagi dengan cara mengklik kanan folder layout > new > layout resource file, akan muncul jendela baru, beri nama dengan activity_list.

Untuk kode pada activity_list.xml, buat 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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="1dp"
        android:src="@mipmap/ic_launcher" />

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

        <TextView
            android:id="@+id/menuItem"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/menuLagi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:text="Large text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textSize="20sp" />

    </LinearLayout>

</LinearLayout>

Setelah selesai, sobat tambahkan 1 lagi file java dengan cara mengklik kanan pada folder java > new > javaresource file, akan muncul jendela baru, beri nama dengan CostumListAdapter. Untuk kodenya silahkan buat seperti berikut

package com.blogsetyaaji.listview;

import android.app.Activity;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.content.Context;

import org.w3c.dom.Text;

/**
 * Created by AJISETYA on 7/30/2016.
 */
public class CostumListAdapter extends ArrayAdapter<String>{
    private final Activity context;
    private final String[] menuItem;
    private final String[] menuLagi;
    private final Integer[] menuGambar;

    public CostumListAdapter(Activity context, String[] menuItem, Integer[] menuGambar, String[] menuLagi) {
        super(context, R.layout.activity_list, menuItem);
        this.context = context;
        this.menuItem = menuItem;
        this.menuGambar = menuGambar;
        this.menuLagi = menuLagi;
    }

    public View getView(int position, View view, ViewGroup parent){
        LayoutInflater inflater = context.getLayoutInflater();
        View rowView = inflater.inflate(R.layout.activity_list, null, true);

        TextView textMenu = (TextView)rowView.findViewById(R.id.menuItem);
        TextView textLagi = (TextView)rowView.findViewById(R.id.menuLagi);
        ImageView imgMenu = (ImageView)rowView.findViewById(R.id.imageView);

        textMenu.setText(menuItem[position]);
        textLagi.setText(menuLagi[position]);
        imgMenu.setImageResource(menuGambar[position]);

        return rowView;
    }
}

Pindah ke MainActivity.java, buat kodenya hingga seperti berikut ini

package com.blogsetyaaji.multipleactivity;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class Halaman1 extends AppCompatActivity {

    String[] menuItem = {"Gamepad", "Keyboard", "Mouse", "Phone", "Camera", "Computer", "Headphone", "Headset", "Dock"};
    Integer[] menuImage = {
            R.drawable.gamepad,
            R.drawable.keyboard,
            R.drawable.mouse,
            R.drawable.phone,
            R.drawable.camera,
            R.drawable.computer,
            R.drawable.headphones,
            R.drawable.headset,
            R.drawable.dock};
    String[] menuLagi = {"Alat untuk bermain game", "Alat untuk mengetik", "Alat untuk mengerakkan kursor", "Alat untuk menelepon",
            "Alat untuk mengambil gambar", "Alat untuk berbagai keperluan", "Alat untuk mrndengarkan musik", "Alat untuk mendengarkan musik",
            "Alat untuk menmpilkan gambar"};

    ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_halaman1);

        CostumListAdapter adapter = new CostumListAdapter(this, menuItem, menuImage, menuLagi);
        listView = (ListView)findViewById(R.id.mobilelist);
        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(), "Yang diklik adalah posisi ke : " + position, Toast.LENGTH_LONG).show();
            }
        });
    }
}

Jika sudah silahkan sobat masukkan gambar yang tadi disiapkan dengan menyalin gambar ke dalam folder drawable. Setelah gambar siap silahkan sobat jalankan aplikasinya dan tampilanya akan seperti gambar di bawah ini

Untuk menambahkan komponen baru di lstview, kita hanya perlu menambahkan objek baru di layout list dan memanggilnya di kode listview. Bisa juka kita menggunakan cara yang sama untuk komponen lain seperti radio button atau checkbox, tinggal sobat kembangkan sendiri. Dan itulah cara menambahkan komponen gambar pada ListView semoga bermanfaat.