Cara Membuat Custom ListView Menggunakan HashMap

Tutorial Cara Membuat ListView Custom Menggunakan HashMap di Android Studio

Hai semuanya. Bagaimana kabar kalian hari ini? Saya harap kalian semuanya baik-baik saja. Pada tutorial sebelumnya saya sudah pernah membagikan cara membuat custom listview menggunakan arrayadapter. Pada kesempatan kali ini, saya akan membagikan tutorial cara membuat custom listview menggunakan hashmap di android studio.

ListView adlaah komponen layout yang umum dalam aplikasi android. Sulit untuk membuat beberapa aplikasi yang keren tanpa menggunakan listview seperti aplikasi berita, aplikasi tutorial, aplikasi sosial media dan lain-lain.

Jadi, pada tutorial kali ini kalian akan belajar cara membuat custom listview yang menampilkan gambar dan teks menggunakan metode hashmap di aplikasi android studio.

- Advertisement -

Tutorial Cara Membuat Custom ListView Menggunakan HashMap di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Custom ListView App
Package Name:com.androidrion.customlistviewapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml activity yang digunakan dalam projek ini:

  1. activity_main.xml
  2. custom_listview.xml

Daftar file java activity yang digunakan dalam projek ini:

  1. MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi android Custom ListView App.

Drawable File

Dalam tutorial ini, saya menggunakan gambar atau icon yang ada di bawah ini.

Kalian bisa mendownload icon di atas dengan cara klik link download di bawah ini.

DOWNLOAD ASSET CUSTOM LISTVIEW APP

Setelah kalian download file asset, ektrak file tersebut lalu pindahkan ke dalam folder drawable di android studio.

XML Layout File

Buka file activity_main.xml kalian, lalu tambahkan widget listview di dalam LinearLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/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"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:listitem="@layout/custom_listview"/>

</LinearLayout>

Buat file xml layout baru dengan nama custom_listview. fungsi dari file ini adalah agar kita bisa mendesain tata letak dari item listview yang akan ditampilkan. Berikut ini adalah kode lengkap untuk file custom_listview.xml

app/res/layout/custom_listview.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="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_toStartOf="@id/imageList"
        android:layout_toLeftOf="@id/imageList"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_headline"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Facebook" />

        <TextView
            android:id="@+id/text_subhead"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Social Media App" />
    </LinearLayout>

    <ImageView
        android:id="@+id/imageList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/facebook" />
</RelativeLayout>

Java Activity File

Buka file MainActivity kalian, dan tambahkan kode dibawah ini untuk membuat aplikasi menampilkan icon,teks dan deskripsi pada widget ListView. Berikut ini adalah kode lengkap untuk file MainActivity.

package com.androidrion.customlistview2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    int[] iconList = new int[]{
            R.drawable.facebook, R.drawable.twitter, R.drawable.instagram, R.drawable.snapchat,
            R.drawable.whatsapp, R.drawable.line, R.drawable.kakaotalk, R.drawable.telegram, R.drawable.messenger,
            R.drawable.youtube, R.drawable.tiktok, R.drawable.vine, R.drawable.vimeo,
            R.drawable.figma, R.drawable.adobe_xd, R.drawable.sketch, R.drawable.framer,
            R.drawable.android, R.drawable.apple, R.drawable.windows,
            R.drawable.opera, R.drawable.firefox, R.drawable.safari, R.drawable.edge,
            R.drawable.paypal, R.drawable.mastercard, R.drawable.visa,
            R.drawable.bitcoin, R.drawable.ethereum
    };

    String[] Headline = new String[]{"Facebook", "Twitter", "Instagram", "SnapChat",
            "WhatsApp", "LINE", "KakaoTalk", "Telegram", "Messenger",
            "YouTube", "TikTok", "Vine", "Vimeo",
            "Figma", "Adobe XD", "Sketch", "Framer",
            "Android", "iOS", "Windows",
            "Opera", "Mozilla", "Safari", "Edge",
            "Paypal", "Mastercard", "Visa",
            "Bitcoin", "Ethereum"
    };

    String[] Subhead = new String[]{"Social Media", "Social Media", "Social Media", "Social Media",
            "Chatting App", "Chatting App", "Chatting App", "Chatting App", "Chatting App",
            "Video Streaming App", "Video Streaming App", "Video Streaming App", "Video Streaming App",
            "UI Design App", "UI Design App", "UI Design App", "UI Design App",
            "Operating System", "Operating System", "Operating System",
            "Browser App", "Browser App", "Browser App", "Browser App",
            "Payment Method", "Payment Method", "Payment Method",
            "Cryptocurrency", "Cryptocurrency"
    };

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

        List<HashMap<String, String>> list = new ArrayList<>();

        for (int i = 0; i < 29; i++) {
            HashMap<String, String> hashMap = new HashMap<>();
            hashMap.put("Icon", Integer.toString(iconList[i]));
            hashMap.put("Headline", Headline[i]);
            hashMap.put("Subhead", Subhead[i]);
            list.add(hashMap);
        }

        String[] from = {"Icon", "Headline", "Subhead"};
        int[] to = {R.id.imageList, R.id.text_headline, R.id.text_subhead};

        SimpleAdapter simpleAdapter = new SimpleAdapter(getBaseContext(), list, R.layout.custom_listview, from, to);
        ListView listView = findViewById(R.id.list);
        listView.setAdapter(simpleAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                Toast.makeText(getApplicationContext(),
                        "You have selected: " + Headline[position],
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Run ‘app’

Sekarang, jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian akan melihat daftar icon aplikasi serta teks dan deskripsinya. Kalian bisa men-scroll aplikasi kalian untuk melihat daftar aplikasi yang lainnya. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat custom listview menggunakan metode hashmap di aplikasi android. Tutorial diatas sangatlah mudah untuk dikerjakan karena kita hanya memerlukan satu buah file java untuk menjalankan projek ini. Tetapi, menggunakan metode HashMap memiliki kelemahan. Yaitu kita harus mengetahui jumlah item yang akan di tampilkan agar aplikasi akan menampilkan seluruh item yang akan kita masukkan dalam ListView.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like video dan subscribe Channel YouTube Android Rion. semoga artikel ini bermanfaat untuk kalian. Terima kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.