Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / android studio

Cara Membuat ListView Sederhana untuk Android

Oleh Numaxtri Posting Komentar


Tujuan

Pada codelab kali ini Anda akan belajar menerapkan listview menggunakan ArrayAdapter dan BaseAdapter. Kita akan membuat aplikasi list Pahlawan Indonesia, seperti di bawah ini:

2019012817252240d19b0373738ce667226215aa208d63.gif

Logika Dasar

Membuka Aplikasi → menampilkan pahlawan dalam bentuk List.

Codelab ListView

  1. Buat proyek baru di Android Studio dengan kriteria sebagai berikut:
    Nama ProjectMyListView
    Target & Minimum Target SDK Phone and Tablet, Api Level 21
    Tipe Activity Empty Activity
    Activity Name MainActivity
    Use AndroidX artifactsTrue
    LanguageKotlin / Java
  2. Buka activity_main.xml dan tambahkan komponen listview lalu sesuaikan kodenya seperti berikut:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <ListView
            android:id="@+id/lv_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </LinearLayout>
  3. Buka MainActivity lalu sesuaikan kodenya seperti di bawah. Pertama kita akan membuat listview menggunakan arrayadapter terlebih dahulu.
    Kotlin
    class MainActivity : AppCompatActivity() {

        private val dataName = arrayOf("Cut Nyak Dien", "Ki Hajar Dewantara", "Moh Yamin", "Patimura", "R A Kartini", "Sukarno")

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            val listView:ListView = findViewById(R.id.lv_list)
            val adapter = ArrayAdapter<String>(this,
                    android.R.layout.simple_list_item_1, android.R.id.text1, dataName)
            listView.adapter = adapter
        }
    }
    Java
    public class MainActivity extends AppCompatActivity {

        private String[] dataName = {"Cut Nyak Dien","Ki Hajar Dewantara","Moh Yamin","Patimura","R A Kartini","Sukarno"};
        
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ListView listView = findViewById(R.id.lv_list);
            ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                    android.R.layout.simple_list_item_1, android.R.id.text1, dataName);
            listView.setAdapter(adapter);
        }
    }
  4. Silakan jalankan aplikasinya terlebih dahulu. Hasilnya akan seperti di bawah jika tidak ada error.
    2019012213523308b09041a6343da3371e9b81f3d3a645.png
  5. Setelah itu buat kelas baru dengan klik kanan pada package utama → New → Kotlin Class (untuk Kotlin) atau Java Class (untuk Java). Beri nama Hero. Silakan sesuaikan kodenya seperti berikut:
    Kotlin
    data class Hero(
            var photo: Int,
            var name: String,
            var description: String
    )
    Java
    class Hero {
        private int photo;
        private String name;
        private String description;

        //setter and getter hasil generate
        public int getPhoto() {
            return photo;
        }

        public void setPhoto(int photo) {
            this.photo = photo;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getDescription() {
            return description;
        }

        public void setDescription(String description) {
            this.description = description;
        }
    }
    Untuk kelas Java, ada cara otomatis untuk membuat setter & getter. Caranya, klik kanan pada text editor → Generate → Getter and Setter → pilih semua variabel. Maka setter and getter akan ter-generate secara otomatis.
  6. Karena di latihan ini Anda akan menampilkan foto pahlawan , maka Anda perlu mengunduh berkas fotonya di sini. Setelah selesai extract berkas tersebut dan copy paste semua berkasnya ke folder drawable.
    20200220120114f7e72071f5ebadf66799f0434a60aad1.gif
  7. Setelah itu buat berkas item_hero.xml untuk tampilan list dengan cara klik kanan pada direktori layout → new → layout resource file dan kemudian beri nama item_hero.xml. Sesuaikan kodenya seperti berikut:
    <?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="wrap_content"
        android:padding="16dp">

        <ImageView
                android:id="@+id/img_photo"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:scaleType="fitXY" />

        <TextView
            android:id="@+id/txt_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="26dp"
            android:layout_toEndOf="@id/img_photo"
            android:text="@string/name_heroes"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txt_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/txt_name"
            android:layout_marginStart="26dp"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@id/img_photo"
            android:ellipsize="end"
            android:maxLines="3"
            android:text="@string/lorem" />

    </RelativeLayout>
    Tambahkan juga resource string-nya. Tambahkan semua string yang akan digunakan di project ini. Buka berkas strings.xml dan tambahkan kode berikut ini:
    <resources>
        <string name="app_name">MyListView</string>
        <string name="name_heroes">Nama Pahlawan</string>
        <string name="lorem">lorem ipsum dolor sit amet</string>

        <string-array name="data_name">
            <item>Ahmad Dahlan</item>
            <item>Ahmad Yani</item>
            <item>Sutomo</item>
            <item>Gatot Soebroto</item>
            <item>Ki Hadjar Dewantara</item>
            <item>Mohammad Hatta</item>
            <item>Soedirman</item>
            <item>Soekarno</item>
            <item>Soepomo</item>
            <item>Tan Malaka</item>
        </string-array>

        <string-array name="data_description">
            <item>Salah seorang ulama dan khatib terkemuka di Masjid Besar Kasultanan Yogyakarta pada masa itu, dan ibu dari K.H. Ahmad Dahlan adalah puteri dari H. Ibrahim yang juga menjabat penghulu Kesultanan Ngayogyakarta Hadiningrat pada masa itu. KH. Ahmad Dahlan telah mempelopori kebangkitan ummat Islam untuk menyadari nasibnya sebagai bangsa terjajah yang masih harus belajar dan berbuat. </item>
            <item>Jenderal TNI Anumerta Ahmad Yani (juga dieja Achmad Yani; lahir di Purworejo, Jawa Tengah, 19 Juni 1922 – meninggal di Lubang Buaya, Jakarta, 1 Oktober 1965 pada umur 43 tahun) adalah komandan Tentara Nasional Indonesia Angkatan Darat, dan dibunuh oleh anggota Gerakan 30 September saat mencoba untuk menculik dia dari rumahnya.</item>
            <item>Sutomo (lahir di Surabaya, Jawa Timur, 3 Oktober 1920 – meninggal di Padang Arafah, Arab Saudi, 7 Oktober 1981 pada umur 61 tahun) lebih dikenal dengan sapaan akrab oleh rakyat sebagai Bung Tomo, adalah pahlawan yang terkenal karena peranannya dalam membangkitkan semangat rakyat untuk melawan kembalinya penjajah Belanda melalui tentara NICA, yang berakhir dengan pertempuran 10 November 1945 yang hingga kini diperingati sebagai Hari Pahlawan.</item>
            <item>Jenderal TNI (Purn.) Gatot Soebroto (lahir di Sumpiuh, Banyumas, Jawa Tengah, 10 Oktober 1907 – meninggal di Jakarta, 11 Juni 1962 pada umur 54 tahun) adalah tokoh perjuangan militer Indonesia dalam merebut kemerdekaan dan juga pahlawan nasional Indonesia. Ia dimakamkan di Ungaran, kabupaten Semarang.</item>
            <item>Raden Mas Soewardi Soerjaningrat (EBI: Suwardi Suryaningrat, sejak 1922 menjadi Ki Hadjar Dewantara, EBI: Ki Hajar Dewantara, beberapa menuliskan bunyi bahasa Jawanya dengan Ki Hajar Dewantoro; lahir di Pakualaman, 2 Mei 1889 – meninggal di Yogyakarta, 26 April 1959 pada umur 69 tahun; selanjutnya disingkat sebagai "Soewardi" atau "KHD") adalah aktivis pergerakan kemerdekaan Indonesia, kolumnis, politisi, dan pelopor pendidikan bagi kaum pribumi Indonesia dari zaman penjajahan Belanda. Ia adalah pendiri Perguruan Taman Siswa, suatu lembaga pendidikan yang memberikan kesempatan bagi para pribumi untuk bisa memperoleh hak pendidikan seperti halnya para priyayi maupun orang-orang Belanda.</item>
            <item>Dr.(HC) Drs. H. Mohammad Hatta (lahir dengan nama Mohammad Athar, dikenal sebagai Bung Hatta; lahir di Fort de Kock (sekarang Bukittinggi, Sumatera Barat), Hindia Belanda, 12 Agustus 1902 – meninggal di Jakarta, 14 Maret 1980 pada umur 77 tahun) adalah tokoh pejuang, negarawan, ekonom, dan juga Wakil Presiden Indonesia yang pertama. Ia bersama Soekarno memainkan peranan penting untuk memerdekakan bangsa Indonesia dari penjajahan Belanda sekaligus memproklamirkannya pada 17 Agustus 1945. Ia juga pernah menjabat sebagai Perdana Menteri dalam Kabinet Hatta I, Hatta II, dan RIS. Ia mundur dari jabatan wakil presiden pada tahun 1956, karena berselisih dengan Presiden Soekarno. Hatta juga dikenal sebagai Bapak Koperasi Indonesia.</item>
            <item>Jenderal Besar Raden Soedirman (EYD: Sudirman; lahir 24 Januari 1916 – meninggal 29 Januari 1950 pada umur 34 tahun) adalah seorang perwira tinggi Indonesia pada masa Revolusi Nasional Indonesia. Menjadi panglima besar Tentara Nasional Indonesia pertama, ia secara luas terus dihormati di Indonesia. Terlahir dari pasangan rakyat biasa di Purbalingga, Hindia Belanda, Soedirman diadopsi oleh pamannya yang seorang priyayi. Setelah keluarganya pindah ke Cilacap pada tahun 1916, Soedirman tumbuh menjadi seorang siswa rajin; ia sangat aktif dalam kegiatan ekstrakurikuler, termasuk mengikuti program kepanduan yang dijalankan oleh organisasi Islam Muhammadiyah. Saat di sekolah menengah, Soedirman mulai menunjukkan kemampuannya dalam memimpin dan berorganisasi, dan dihormati oleh masyarakat karena ketaatannya pada Islam. Setelah berhenti kuliah keguruan, pada 1936 ia mulai bekerja sebagai seorang guru, dan kemudian menjadi kepala sekolah, di sekolah dasar Muhammadiyah; ia juga aktif dalam kegiatan Muhammadiyah lainnya dan menjadi pemimpin Kelompok Pemuda Muhammadiyah pada tahun 1937. Setelah Jepang menduduki Hindia Belanda pada 1942, Soedirman tetap mengajar. Pada tahun 1944, ia bergabung dengan tentara Pembela Tanah Air (PETA) yang disponsori Jepang, menjabat sebagai komandan batalion di Banyumas. Selama menjabat, Soedirman bersama rekannya sesama prajurit melakukan pemberontakan, namun kemudian diasingkan ke Bogor.</item>
            <item>Dr.(H.C.) Ir. H. Soekarno (ER, EYD: Sukarno, nama lahir: Koesno Sosrodihardjo) (lahir di Surabaya, Jawa Timur, 6 Juni 1901 – meninggal di Jakarta, 21 Juni 1970 pada umur 69 tahun) adalah Presiden pertama Republik Indonesia yang menjabat pada periode 1945–1967. Ia memainkan peranan penting dalam memerdekakan bangsa Indonesia dari penjajahan Belanda. Ia adalah Proklamator Kemerdekaan Indonesia (bersama dengan Mohammad Hatta) yang terjadi pada tanggal 17 Agustus 1945. Soekarno adalah yang pertama kali mencetuskan konsep mengenai Pancasila sebagai dasar negara Indonesia dan ia sendiri yang menamainya.</item>
            <item>Prof. Mr. Dr. Soepomo (Ejaan Soewandi: Supomo; lahir di Sukoharjo, Jawa Tengah, 22 Januari 1903 – meninggal di Jakarta, 12 September 1958 pada umur 55 tahun) adalah seorang pahlawan nasional Indonesia. Soepomo dikenal sebagai arsitek Undang-undang Dasar 1945, bersama dengan Muhammad Yamin dan Soekarno.</item>
            <item>Tan Malaka atau Ibrahim gelar Datuk Sutan Malaka (lahir di Nagari Pandam Gadang, Suliki, Lima Puluh Kota, Sumatera Barat, 2 Juni 1897 – meninggal di Desa Selopanggung, Kediri, Jawa Timur, 21 Februari 1949 pada umur 51 tahun) adalah seorang pembela kemerdekaan Indonesia, tokoh Partai Komunis Indonesia, juga pendiri Partai Murba, dan merupakan salah satu Pahlawan Nasional Indonesia.</item>
        </string-array>

        <array name="data_photo">
            <item>@drawable/ahmad_dahlan</item>
            <item>@drawable/ahmad_yani</item>
            <item>@drawable/bung_tomo</item>
            <item>@drawable/gatot_subroto</item>
            <item>@drawable/ki_hadjar_dewantara</item>
            <item>@drawable/mohammad_hatta</item>
            <item>@drawable/sudirman</item>
            <item>@drawable/sukarno</item>
            <item>@drawable/supomo</item>
            <item>@drawable/tan_malaka</item>
        </array>
    </resources>
  8. Selanjutnya kita akan mencoba menggunakan customadapter. Silakan buat kelas baru klik kanan pada package utama → New → Kotlin Class (untuk Kotlin) atau Java Class (untuk Java) dan kemudian beri nama HeroAdapter. Silakan sesuaikan kodenya seperti berikut:
    Kotlin
    class HeroAdapter internal constructor(private val context: Context) : BaseAdapter() {
        internal var heroes = arrayListOf<Hero>()
    }
    Java
    public class HeroAdapter extends BaseAdapter {
        private Context context;
        private ArrayList<Hero> heroes = new ArrayList<>();

        //setter hasil generate
        public void setHeroes(ArrayList<Hero> heroes) {
            this.heroes = heroes;
        }

        //constructor hasil generate
        public HeroAdapter(Context context) {
            this.context = context;
        }
    }
    Untuk kelas Java, ada cara otomatis untuk membuat setter dan constructor. Caranya klik kanan pada text editor → Generate → Setter. Dalam kasus ini, pilih variabel heroes saja, maka setter akan ter-generate.
    Sedangkan untuk constructor, klik kanan pada text editor → Generate → Constructor. Dalam kasus ini, pilih variabel context saja, maka constructor akan ter-generate secara otomatis.

  9. Setelah itu masih ada sintaks yang merah. Apa pasal? Kita belum implementasikan metode yang dibutuhkan oleh BaseAdapter. Silakan klik pada BaseAdapter → tekan alt + enter → Implement Methods → pilih semua metodenya. Hasilnya akan seperti berikut:
    Kotlin
    class HeroAdapter internal constructor(private val context: Context) : BaseAdapter() {
        ...

        override fun getView(p0: Int, p1: View?, p2: ViewGroup?): View {
            TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
        }

        override fun getItem(p0: Int): Any {
            TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
        }

        override fun getItemId(p0: Int): Long {
            TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
        }

        override fun getCount(): Int {
            TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
        }
    }
    Java
    public class HeroAdapter extends BaseAdapter {
        ...

        @Override
        public int getCount() {
            return 0;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            return null;
        }
    }
  10. Sekarang kita mulai dari metode getCount() terlebih dahulu. Silakan sesuaikan kodenya seperti berikut:
    Kotlin
    override fun getCount(): Int {
        return heroes.size
    }
    kita juga bisa menyingkatnya menjadi
    override fun getCount(): Int = heroes.size
    Java
    @Override
    public int getCount() {
        return heroes.size();
    }
    Selanjutnya lengkapi metode getItemId dan getItem seperti berikut, jangan lupa untuk parameternya disesuaikan.
    Kotlin
    override fun getItem(i: Int): Any {
        return heroes[i]
    }

    override fun getItem(i: Int): Long {
        return i.toLong()
    }
    Dengan Kotlin, Anda juga bisa menyingkatnya menjadi:
    override fun getItem(i: Int): Any = heroes[i]
    override fun getItemId(i: Int): Long = i.toLong()
    Java
    @Override
    public Object getItem(int i) {
        return heroes.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }
    Lalu untuk metode getView di sini kita lakukan proses pemanggilan textview dan setText. Silakan sesuaikan kodenya seperti berikut:
    Kotlin
    override fun getView(position: Int, view: View?, viewGroup: ViewGroup): View {
        var itemView = view
        if (itemView == null) {
            itemView = LayoutInflater.from(context).inflate(R.layout.item_hero, viewGroup, false)
        }

        val viewHolder = ViewHolder(itemView as View)

        val hero = getItem(position) as Hero
        viewHolder.bind(hero)
        return itemView
    }
    Java
    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        View itemView = view;
        if (itemView == null) {
            itemView = LayoutInflater.from(context).inflate(R.layout.item_hero, viewGroup, false);
        }

        ViewHolder viewHolder = new ViewHolder(itemView);

        Hero hero = (Hero) getItem(i);
        viewHolder.bind(hero);
        return itemView;
    }
    Kemudian buat kelas ViewHolder di dalam kelas HeroAdapter dan tambahkan kode berikut:
    Kotlin
    private inner class ViewHolder internal constructor(view: View) {
        private val txtName: TextView = view.findViewById(R.id.txt_name)
        private val txtDescription: TextView = view.findViewById(R.id.txt_description)
        private val imgPhoto: ImageView = view.findViewById(R.id.img_photo)

        internal fun bind(hero: Hero) {
            txtName.text = hero.name
            txtDescription.text = hero.description
            imgPhoto.setImageResource(hero.photo)
        }
    }
    Java
    private class ViewHolder {
        private TextView txtName;
        private TextView txtDescription;
        private ImageView imgPhoto;

        ViewHolder(View view) {
            txtName = view.findViewById(R.id.txt_name);
            txtDescription = view.findViewById(R.id.txt_description);
            imgPhoto = view.findViewById(R.id.img_photo);
        }

        void bind(Hero hero) {
            txtName.setText(hero.getName());
            txtDescription.setText(hero.getDescription());
            imgPhoto.setImageResource(hero.getPhoto());
        }
    }
    Sehingga hasil akhir kelas HeroAdapter seperti berikut:
    Kotlin
    class HeroAdapter internal constructor(private val context: Context) : BaseAdapter() {
        internal var heroes = arrayListOf<Hero>()

        override fun getCount(): Int = heroes.size

        override fun getItem(i: Int): Any = heroes[i]

        override fun getItemId(i: Int): Long = i.toLong()

        override fun getView(position: Int, view: View?, viewGroup: ViewGroup): View {
            var itemView = view
            if (itemView == null) {
                itemView = LayoutInflater.from(context).inflate(R.layout.item_hero, viewGroup, false)
            }

            val viewHolder = ViewHolder(itemView as View)

            val hero = getItem(position) as Hero
            viewHolder.bind(hero)
            return itemView
        }

        private inner class ViewHolder internal constructor(view: View) {
            private val txtName: TextView = view.findViewById(R.id.txt_name)
            private val txtDescription: TextView = view.findViewById(R.id.txt_description)
            private val imgPhoto: ImageView = view.findViewById(R.id.img_photo)

            internal fun bind(hero: Hero) {
                txtName.text = hero.name
                txtDescription.text = hero.description
                imgPhoto.setImageResource(hero.photo)
            }
        }
    }
    Java
    public class HeroAdapter extends BaseAdapter {

        private final Context context;
        private ArrayList<Hero> heroes = new ArrayList<>();

        void setHeroes(ArrayList<Hero> heroes) {
            this.heroes = heroes;
        }

        HeroAdapter(Context context) {
            this.context = context;
        }

        @Override
        public int getCount() {
            return heroes.size();
        }

        @Override
        public Object getItem(int i) {
            return heroes.get(i);
        }

        @Override
        public long getItemId(int i) {
            return i;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            View itemView = view;
            if (itemView == null) {
                itemView = LayoutInflater.from(context).inflate(R.layout.item_hero, viewGroup, false);
            }

            ViewHolder viewHolder = new ViewHolder(itemView);

            Hero hero = (Hero) getItem(i);
            viewHolder.bind(hero);
            return itemView;
        }

        private class ViewHolder {
            private TextView txtName;
            private TextView txtDescription;
            private ImageView imgPhoto;

            ViewHolder(View view) {
                txtName = view.findViewById(R.id.txt_name);
                txtDescription = view.findViewById(R.id.txt_description);
                imgPhoto = view.findViewById(R.id.img_photo);
            }

            void bind(Hero hero) {
                txtName.setText(hero.getName());
                txtDescription.setText(hero.getDescription());
                imgPhoto.setImageResource(hero.getPhoto());
            }
        }
    }

  11. Setelah adapter dan modelnya sudah selesai, langkah terakhir kita panggil adapter-nya di MainActivity. Buka MainActivity dan sesuaikan kodenya seperti berikut:
    Kotlin
    class MainActivity : AppCompatActivity() {

        private lateinit var adapter: HeroAdapter

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)

            val listView: ListView = findViewById(R.id.lv_list)
            adapter = HeroAdapter(this)
            listView.adapter = adapter            
        }
    }
    Java
    public class MainActivity extends AppCompatActivity {

        private HeroAdapter adapter;

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

            ListView listView = findViewById(R.id.lv_list);
            adapter = new HeroAdapter(this);
            listView.setAdapter(adapter);
        }
    }
    Lalu tambahkan metode baru bernama prepare() untuk inisialisasi array.
    Kotlin
    class MainActivity : AppCompatActivity() {

        private lateinit var adapter: HeroAdapter
        private lateinit var dataName: Array<String>
        private lateinit var dataDescription: Array<String>
        private lateinit var dataPhoto: TypedArray

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)

            val listView: ListView = findViewById(R.id.lv_list)
            adapter = HeroAdapter(this)
            listView.adapter = adapter

            prepare()
       }

        private fun prepare() {
            dataName = resources.getStringArray(R.array.data_name)
            dataDescription = resources.getStringArray(R.array.data_description)
            dataPhoto = resources.obtainTypedArray(R.array.data_photo)
        }
    }
    Java
    public class MainActivity extends AppCompatActivity {

        private HeroAdapter adapter;
        private String[] dataName;
        private String[] dataDescription;
        private TypedArray dataPhoto;

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

            ListView listView = findViewById(R.id.lv_list);
            adapter = new HeroAdapter(this);
            listView.setAdapter(adapter);

            prepare();
        }

        private void prepare() {
            dataName = getResources().getStringArray(R.array.data_name);
            dataDescription = getResources().getStringArray(R.array.data_description);
            dataPhoto = getResources().obtainTypedArray(R.array.data_photo);
        }
    }
    Setelah datanya sudah disiapkan, buat satu metode addItem() untuk memasukan data tersebut.
    Kotlin
    class MainActivity : AppCompatActivity() {

        private lateinit var adapter: HeroAdapter
        private lateinit var dataName: Array<String>
        private lateinit var dataDescription: Array<String>
        private lateinit var dataPhoto: TypedArray
        private var heroes = arrayListOf<Hero>()

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)

            val listView: ListView = findViewById(R.id.lv_list)
            adapter = HeroAdapter(this)
            listView.adapter = adapter

            prepare()
            addItem()
            
        }

        ...

        private fun addItem() {
            for (position in dataName.indices) {
                val hero = Hero(
                        dataPhoto.getResourceId(position, -1),
                        dataName[position],
                        dataDescription[position]
                )
                heroes.add(hero)
            }
            adapter.heroes = heroes
        }
    }
    Java
    public class MainActivity extends AppCompatActivity {

        private HeroAdapter adapter;
        private String[] dataName;
        private String[] dataDescription;
        private TypedArray dataPhoto;
        private ArrayList<Hero> heroes;

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

            ListView listView = findViewById(R.id.lv_list);
            adapter = new HeroAdapter(this);
            listView.setAdapter(adapter);

            prepare();
            addItem();
        }

        ...

        private void addItem() {
            heroes = new ArrayList<>();

            for (int i = 0; i < dataName.length; i++) {
                Hero hero = new Hero();
                hero.setPhoto(dataPhoto.getResourceId(i, -1));
                hero.setName(dataName[i]);
                hero.setDescription(dataDescription[i]);
                heroes.add(hero);
            }

            adapter.setHeroes(heroes);
        }
    }
    Terakhir tambahkan metode setOnItemClickListener() pada listview, sehingga kelas MainActivity akan menjadi seperti berikut:
    Kotlin
    class MainActivity : AppCompatActivity() {

        private lateinit var adapter: HeroAdapter
        private lateinit var dataName: Array<String>
        private lateinit var dataDescription: Array<String>
        private lateinit var dataPhoto: TypedArray
        private var heroes = arrayListOf<Hero>()

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)

            val listView: ListView = findViewById(R.id.lv_list)

            adapter = HeroAdapter(this)

            listView.adapter = adapter

            prepare()
            addItem()

            listView.onItemClickListener = AdapterView.OnItemClickListener { _, _, position, _ ->
                Toast.makeText(this@MainActivity, heroes[position].name, Toast.LENGTH_SHORT).show()
            }
            
        }

        private fun prepare() {
            dataName = resources.getStringArray(R.array.data_name)
            dataDescription = resources.getStringArray(R.array.data_description)
            dataPhoto = resources.obtainTypedArray(R.array.data_photo)
        }

        private fun addItem() {
            for (position in dataName.indices) {
                val hero = Hero(
                        dataPhoto.getResourceId(position, -1),
                        dataName[position],
                        dataDescription[position]
                )
                heroes.add(hero)
            }
            adapter.heroes = heroes
        }
    }
    Java
    public class MainActivity extends AppCompatActivity {

        private HeroAdapter adapter;
        private String[] dataName;
        private String[] dataDescription;
        private TypedArray dataPhoto;
        private ArrayList<Hero> heroes;

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

            ListView listView = findViewById(R.id.lv_list);
            adapter = new HeroAdapter(this);
            listView.setAdapter(adapter);

            prepare();
            addItem();

            listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                    Toast.makeText(MainActivity.this, heroes.get(i).getName(), Toast.LENGTH_SHORT).show();
                }
            });
        }

        private void prepare() {
            dataName = getResources().getStringArray(R.array.data_name);
            dataDescription = getResources().getStringArray(R.array.data_description);
            dataPhoto = getResources().obtainTypedArray(R.array.data_photo);
        }

        private void addItem() {
            heroes = new ArrayList<>();

            for (int i = 0; i < dataName.length; i++) {
                Hero hero = new Hero();
                hero.setPhoto(dataPhoto.getResourceId(i, -1));
                hero.setName(dataName[i]);
                hero.setDescription(dataDescription[i]);
                heroes.add(hero);
            }

            adapter.setHeroes(heroes);
        }
    }

  12. Selesai. Jalankan aplikasi MyListView . Hasilnya akan seperti di bawah ini:
    2019012817252240d19b0373738ce667226215aa208d63.gif

Bedah Kode

Latihan kali ini bertujuan untuk mengenalkan Anda pada bagaimana menampilkan data dalam bentuk list secara sederhana dengan menggunakan listview.


ArrayAdapter

Pada bagian pertama kita menggunakan ArrayAdapter untuk mencoba menampilkan list dalam bentuk sederhana. Jadi ArrayAdapter adalah kelas Android SDK untuk mengadaptasi array objek sebagai sumber data. Adapter digunakan oleh android untuk menangani hasil yang disetel secara seragam apakah itu dari database, berkas, atau objek dalam memori sehingga dapat ditampilkan dalam elemen UI. ArrayAdapter merupakan adapter yang paling sederhana yang bisa kita gunakan.
Kotlin
class MainActivity : AppCompatActivity() {

    private val dataName = arrayOf("Cut Nyak Dien", "Ki Hajar Dewantara", "Moh Yamin", "Patimura", "R A Kartini", "Sukarno")

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        val adapter = ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, android.R.id.text1, dataName)
        listView.adapter = adapter
    }
}
Java
public class MainActivity extends AppCompatActivity {
    private String[] dataName = {"Cut Nyak Dien","Ki Hajar Dewantara","Moh Yamin","Patimura","R A Kartini","Sukarno"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ....
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, android.R.id.text1, dataName);
        listView.setAdapter(adapter);  
    }
}
Di sini kita sudah menyiapkan data nama pahlawan dalam bentuk string array. Anda juga sudah membuat ArrayAdapter dengan memasukan parameter-parameter yang dibutuhkan. Dan juga memanggil adapter sebagai argument dalam metode setAdapter().

Constructor

Constructor digunakan untuk mengirimkan data atau melakukan suatu proses ketika suatu obyek diinisialisasi.
Kotlin
class HeroAdapter internal constructor(private val context: Context) : BaseAdapter() {
    ...
}
Java
public class HeroAdapter extends BaseAdapter {
    private Context context;
    ...
    //constructor hasil generate
    public HeroAdapter(Context context) {
        this.context = context;
    }
}
Dalam kasus ini constructor digunakan untuk mengirim context ke dalam adapter, karena itulah saat inisialisasi HeroAdapter terdapat parameter this yang merupakan context dari activity. Di sini juga dibedakan antara mengirim context dan mengirim data supaya inisialisasi adapter hanya sekali saja, tidak berulang kali.
Kotlin
adapter = HeroAdapter(this)
Java
adapter = HeroAdapter(this)
Set Data
Kotlin
class HeroAdapter internal constructor(private val context: Context) : BaseAdapter() {
    internal var heroes = arrayListOf<Hero>()
}
Java
public class HeroAdapter extends BaseAdapter {
    private ArrayList<Hero> heroes = new ArrayList<>();

    //setter hasil generate
    public void setHeroes(ArrayList<Hero> heroes) {
        this.heroes = heroes;
    }
}
Variable heroes berfungsi untuk menampung data yang dikirim dari activity dan digunakan sebagai sumber data untuk dimasukkan ke dalam ViewHolder. Untuk memasukkan datanya menggunakan metode berikut ini:
Kotlin
adapter.heroes = heroes
Java
adapter.setHeroes(heroes);
Dari kode di atas, Anda sudah membuat variabel heroes menggunakan setter dan tidak menggunakan constructor karena bisa jadi untuk set data bisa berulang kali. Jika diletakkan di dalam constructor akan menyebabkan kode kurang bersih karena akan harus menginisialisasi kelas adapter berulang kali.

BaseAdapter

Lalu bagaimana jika kita ingin membuat adapter yang lebih kompleks? Jawabannya adalah BaseAdapter. Kita bisa gunakan BaseAdapter untuk membuat custom adapter.
Kotlin
class HeroAdapter internal constructor(private val context: Context) : BaseAdapter() {
    ...

    override fun getCount(): Int = heroes.size

    override fun getItem(i: Int): Any = heroes[i]

    override fun getItemId(i: Int): Long = i.toLong()

    override fun getView(position: Int, view: View?, viewGroup: ViewGroup): View {
        var itemView = view
        if (itemView == null) {
            itemView = LayoutInflater.from(context).inflate(R.layout.item_hero, viewGroup, false)
        }

        val viewHolder = ViewHolder(itemView as View)

        val hero = getItem(position) as Hero
        viewHolder.bind(hero)
        return itemView
    }

    ...
}
Java
public class HeroAdapter extends BaseAdapter {
    ...

    @Override
    public int getCount() {
        return heroes.size();
    }

    @Override
    public Object getItem(int i) {
        return heroes.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        if (view == null) {
            view = LayoutInflater.from(context).inflate(R.layout.item_hero, viewGroup, false);
        }

        ViewHolder viewHolder = new ViewHolder(view);
        Hero hero = (Hero) getItem(i);
        viewHolder.bind(hero);
        return view;
    }

    ...
}
Setelah itu implementasi metode yang dibutuhkan oleh BaseAdapter. Metode getCount() digunakan untuk mengetahui berapa banyak item yang akan ditampilkan. Metode getView() digunakan untuk memanggil layout item xml yang sudah dibuat dan melakukan proses manipulasi setiap komponennya seperti textview dan imageview melalui kelas ViewHolder.
Kotlin
private inner class ViewHolder internal constructor(view: View) {
    private val txtName: TextView = view.findViewById(R.id.txt_name)
    private val txtDescription: TextView = view.findViewById(R.id.txt_description)
    private val imgPhoto: ImageView = view.findViewById(R.id.img_photo)

    internal fun bind(hero: Hero) {
        txtName.text = hero.name
        txtDescription.text = hero.description
        imgPhoto.setImageResource(hero.photo)
    }
}
Java
private class ViewHolder {
    private TextView txtName;
    private TextView txtDescription;
    private ImageView imgPhoto;

    ViewHolder(View view) {
        txtName = view.findViewById(R.id.txt_name);
        txtDescription = view.findViewById(R.id.txt_description);
        imgPhoto = view.findViewById(R.id.img_photo);
    }

    void bind(Hero hero) {
        txtName.setText(hero.getName());
        txtDescription.setText(hero.getDescription());
        imgPhoto.setImageResource(hero.getPhoto());
    }
}
Untuk lebih paham tentang adapter, Anda bisa mengunjungi tautan berikut:


Prepare

Metode prepare digunakan untuk inisiasi setiap data. Di sini kita memanggil array yang tadi sudah dibuat pada berkas strings.xml.
Kotlin
private fun prepare() {
    dataName = resources.getStringArray(R.array.data_name)
    dataDescription = resources.getStringArray(R.array.data_description)
    dataPhoto = resources.obtainTypedArray(R.array.data_photo)
}
Java
private void prepare() {
    dataName = getResources().getStringArray(R.array.data_name);
    dataDescription = getResources().getStringArray(R.array.data_description);
    dataPhoto = getResources().obtainTypedArray(R.array.data_photo);
}

Add Data
Pada MainActivity kita menambahkan metode baru yaitu addItem(). Metode ini digunakan untuk memasukan data data ke arraylist supaya bisa diproses oleh adapter.
Kotlin
private fun addItem() {
    for (position in dataName.indices) {
        val hero = Hero(
                dataPhoto.getResourceId(position, -1),
                dataName[position],
                dataDescription[position]
        )
        heroes.add(hero)
    }
    adapter.heroes = heroes
}
Java
    private void addItem() {
        heroes = new ArrayList<>();


        for (int i = 0; i < dataName.length; i++) {
            Hero hero = new Hero();
            hero.setPhoto(dataPhoto.getResourceId(i, -1));
            hero.setName(dataName[i]);
            hero.setDescription(dataDescription[i]);
            heroes.add(hero);
        }
        adapter.setHeroes(heroes);
    }
Membuat perulangan dan menggunakan model untuk setter setiap data, lalu heroes.add(hero) untuk memasukan ke arraylist, lalu memanggil setter yang berada di adapter dan memasukan arraylist heroes sebagai argumen.
Source Code latihan dapat diunduh di sini:

Posting Komentar untuk "Cara Membuat ListView Sederhana untuk Android"