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 dengan Gambar Android Tutorial

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.

ListView dengan Gambar Android Tutorial

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

ListView dengan Gambar Android Tutorial

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.
Previous
Next Post »

4 komentar

Click here for komentar
Vie Larasati
admin
15 March 2017 at 09:35 ×

mas kalau itu datanta diambil dari database gmna yah

Reply
avatar
Aji Setya
admin
15 March 2017 at 17:33 ×

untuk menampilkan data dati database ke listview atau di recyclerview bisa mbak baca di artikel berikutnya, ini salah satunya

http://blogsetyaaji.blogspot.co.id/2016/09/menampilkan-data-mysql-menggunakan.html

Reply
avatar
Hafiza Aswin
admin
18 May 2017 at 05:20 ×

mas kalo adapterView nya yang di class main activity diambil dari mana ?

Reply
avatar
Aji Setya
admin
18 May 2017 at 14:22 ×

itu yang di setOnItemClickListener ya, itu udah otomatis mba, kalo masih merah coba ketik ini di bawah package

import android.widget.AdapterView

Reply
avatar

Terimakasih atas kunjunganya.
Jika ada pertanyaan, komentar, atau saran, silakan tulis pada kolom di bawah ini.

ConversionConversion EmoticonEmoticon