[Tutorial] Android Image ListView Menggunakan CardView

Hallo sahabat embah , kali ini embah akan share ke kalian yaitu Android Image ListView Menggunakan CardView. ada yang tau ga si ListView itu apa ??

List view adalah widget untuk menampilkan data dalam bentuk list yang dapat di-scroll. Karena ukuran layar smartphone terbatas dan cenderung portrait, listview merupakan salah satu widget terpenting dan paling sering digunakan untuk menampilkan kelompok informasi.

Oke Langsung saja Ke Tutorialnya

Pertama

Buka android studio kalian dan buatlah projet baru, Beri nama project sesuai dengan keinginan kalian. Sebagai contoh saya beri nama project nya dengan LatihanListview Pilih yang Empty Activity, lalu finish.

Kedua

Tambahkan atau Import dependencies repository CardView.

compile 'com.android.support:cardview-v7:25.1.0'

Ketiga

Buka terlebih dahulu layout activity_main.xml, Lalu tambahkan widget ListView nya terlebih dahulu di dalam Layout activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout 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"
    android:orientation="vertical">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/Lhewan"
        android:padding="16dp"/>
</LinearLayout>

Keempat

Setelah di tambahkan widget Listviewnys Langkah selanjut nya adalah buat layout baru. layout ini berfungsi untuk menampilkan listnya nanti, beri nama layout dengan list_hewan.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/imagehewan"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/kuda" />

            <TextView
                android:id="@+id/TxNamahewan"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toEndOf="@+id/imagehewan"
                android:layout_toRightOf="@+id/imagehewan"
                android:layout_marginLeft="15dp"
                android:text="Macan"
                android:textAppearance="?android:attr/textAppearanceMedium" />

        </RelativeLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

Kelima

Buatlah array list nya di dalam MainActivity.java. Untuk menampung data-data sementara atau data dummy Dan juga deklarasikan widget ListView yang ada di layout activity_main.xml ,

Berikut Source lengkapnya

package com.www.kataembah.latihanlist;

import android.app.Activity;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    // membuat array data list Hewan
    String list_nama[] = {
            "Kuda",
            "Zebra",
            "Monyet",
            "Kuda",
            "Zebra",
            "Monyet",
            "Kuda",
            "Zebra",
            "Monyet",
            "Kuda",
            "Zebra",
            "Monyet"
    };

    // daftar hewan
    int list_gambar[] = {
            R.drawable.kuda,
            R.drawable.zebra,
            R.drawable.monyet,
            R.drawable.kuda,
            R.drawable.zebra,
            R.drawable.monyet,
            R.drawable.kuda,
            R.drawable.zebra,
            R.drawable.monyet,
            R.drawable.kuda,
            R.drawable.zebra,
            R.drawable.monyet
    };


    ListView lvHewan;

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

        lvHewan = (ListView) findViewById(R.id.Lhewan);
        AdapterBuah adapter = new AdapterBuah(this, list_nama

                , list_gambar);
        lvHewan.setAdapter(adapter);
        lvHewan.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
               TextView nama = (TextView) view.findViewById(R.id.TxNamahewan);
                Toast.makeText(MainActivity.this, "ini adalah "+nama.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        });


    }

    // class di dalam class
    private class AdapterBuah extends ArrayAdapter {
        String list_nama[];
        int list_gambar[];
        Activity activity;

        public AdapterBuah(MainActivity mainActivity, String[] list_nama, int[] list_gambar) {
            super(mainActivity, R.layout.list_hewan, list_nama);
            this.list_gambar = list_gambar;
            activity = mainActivity;
            this.list_nama = list_nama;

        }

        @NonNull
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // panggil layout list_Hewan
            LayoutInflater inflater = (LayoutInflater) activity.getLayoutInflater();
            View v = inflater.inflate(R.layout.list_hewan, null);
            ImageView gambar;
            TextView nama;

            //casting widget id
            gambar = (ImageView) v.findViewById(R.id.imagehewan);
            nama = (TextView) v.findViewById(R.id.TxNamahewan);
            gambar.setImageResource(list_gambar[position]);
            nama.setText(list_nama[position]);

            return v;
        }
    }
}

Setelah Sudah melengkapi Source code diatas , sekarang kita jalankan aplikasi yang telah kita buat tadi , maka berikut hasil dari source code di atas.

(Listview)

(Jika Gambarnya di Klik)

Oke itu dia Android Image ListView Menggunakan CardView , jangan lupa share artikel ini agar bermanfaat untuk teman-teman kalian ..

Kataembah 2018

[Tutorial] Android Image ListView Menggunakan CardView

No comments

Popular Posts