Cara Membuat SearchView Untuk Filter Item ListView di Aplikasi Android

Tutorial Cara Membuat SearchView Filter Item ListView di Android Studio

Halo semuanya, bagaimana kabar kalian hari hari ini? Saya harap kalian baik-baik saja. Sebelumnya saya sudah pernah membagikan kalian cara membuat SearchView di Actionbar dan Cara Membuat ListView di Android Studio. Untuk itu, kali ini saya akan membagikan tutorial cara membuat SearchView untuk filter item pada ListView di Android Studio.

Ketika aplikasi yang kita buat begitu banyak item yang ditampilkan maka salah satu cara untuk mencari item yang dibutuhkan adalah dengan menggunakan widget SearchView. Seperti yang telah saya jelaskan pada tutorial sebelumnya bahwa widget satu ini memiliki fungsi keren yang banyak sekali aplikasi android gunakan. Karena hanya dengan satu komponen ini, kita bisa mencari apa saja yang ada dalam aplikasi baik itu berupa file, teks, musik, video dan lain-lain.

Untuk itu, dalam postingan ini, saya akan membagikan tutorial cara membuat searchview pada actionbar untuk filter item pada ListView di Aplikasi Android Studio.

- Advertisement -

Tutorial Cara Membuat SearchView Filter Item ListView di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Search List App
Package Name:com.androidrion.searchlistapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam projek ini:

  1. activity_main.xml
  2. listview_item.xml

Daftar file xml menu yang digunakan dalam projek ini:

  • search_menu.xml

Daftar file java yang digunakan dalam projek ini:

  1. MainActivity.java
  2. ListViewAdapter.java
  3. App.java

Berikut ini adalah gambar dari struktur projek android studio pada aplikasi Search List App.

Tutorial Cara Membuat SearchView  Filter Item ListView di Android Studio

Di bawah ini adalah langkah-langkah dalam pembuatan aplikasi android Search List App.

Drawable File

Pada tutorial ini, saya mengunakan ikon atau gambar yang sama pada tutorial sebelumnya. jadi, silahkan download asset gambar pada link di bawah ini.

DOWNLOAD ASSET PROJEK SEARCH LIST APP

Setelah download file di atas, ektrak gambar ke komputer kalian lalu copy ke dalam folder drawable pada projek android studio kalian. File drawable pada projek android studio kalian akan terlihat seperti pada gambar di bawah ini.

XML Menu File

Untuk membuat file menu pada projek, kalian harus membuat folder menu terlebih dahulu. untuk membuat file menu pada projek android studio, kalian bisa mengikuti tutorial pada link di bawah ini.

CARA MEMBUAT FOLDER MENU PADA PROJEK ANDROID STUDIO

Setelah kalian membuat folder menu, buatlah file xml di dalamnya dengan cara klik kanan pada folder menu, lalu pilih New>Menu resource file. Simpan file tersebut dengan nama search_menu. Berikut ini adalah kode lengkap untuk file search_menu.xml

app/res/menu/search_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="always" />
</menu>

XML Layout File

Buka file activity_main.xml dan tambahkan widget ListView di dalamnya. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
    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/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/listview_item" />
</androidx.appcompat.widget.LinearLayoutCompat>

Buatlah file xml layout baru dengan cara klik kanan pada folder layout, lalu pilih New>Layout resource file. Simpan file xml layout tersebut dengan nama listview_item. Berikut ini adalah kode lengkap untuk file listview_item.xml

app/res/layout/listview_item.xml

<?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="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">

    <ImageView
        android:id="@+id/imageList"
        android:src="@drawable/facebook"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:orientation="vertical"
        android:layout_marginStart="8dp">

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

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

Java File

Buatlah kelas java baru dengan cara klik kanan pada folder java lalu pilih New>Java class. Simpan file kelas java baru dengan nama App. Berikut ini adalah kode lengkap untuk file App.java

app/java/com.androidrion.searchlistapp/App.java

package com.androidrion.searchapp;

class App {
    private String Title;
    private String Subtitle;
    private int Icon;

    App(String Title, String Subtitle, int Icon) {
        this.Title = Title;
        this.Subtitle = Subtitle;
        this.Icon = Icon;
    }

    String getTitle() {
        return this.Title;
    }

    String getSubtitle() {
        return Subtitle;
    }

    int getIcon() {
        return Icon;
    }

}

Buatlah kelas java baru lagi dengan nama file ListViewAdapter lalu tambahkan kode di bawah ini untuk membuat Adapter pada ListView menggunakan BaseAdapter. Berikut ini adalah kode lengkap untuk file ListViewAdapter.java

app/java/com.androidrion.searchlistapp/ListViewAdapter.java

[sociallocker id=”1410″]

package com.androidrion.searchapp;

import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

class ListViewAdapter extends BaseAdapter {

    private LayoutInflater inflater;
    private List<App> appList;
    private ArrayList<App> arraylist;

    ListViewAdapter(Context context, List<App> appList) {
        this.appList = appList;
        inflater = LayoutInflater.from(context);
        this.arraylist = new ArrayList<>();
        this.arraylist.addAll(appList);
    }

    public class ViewHolder {
        TextView TextTitle, TextSubtitle;
        ImageView ImageIcon;
    }

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

    @Override
    public App getItem(int position) {
        return appList.get(position);
    }

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

    @SuppressLint("InflateParams")
    public View getView(final int position, View view, ViewGroup parent) {
        final ViewHolder holder;
        if (view == null) {
            holder = new ViewHolder();
            view = inflater.inflate(R.layout.listview_item, null);

            holder.TextTitle = view.findViewById(R.id.text_headline);
            holder.TextSubtitle = view.findViewById(R.id.text_subhead);
            holder.ImageIcon = view.findViewById(R.id.imageList);

            view.setTag(holder);
        } else {
            holder = (ViewHolder) view.getTag();
        }
        holder.TextTitle.setText(appList.get(position).getTitle());
        holder.TextSubtitle.setText(appList.get(position).getSubtitle());
        holder.ImageIcon.setImageResource(appList.get(position).getIcon());

        return view;
    }

    //Filter
    void filter(String charText) {
        charText = charText.toLowerCase(Locale.getDefault());
        appList.clear();
        if (charText.length() == 0) {
            appList.addAll(arraylist);
        } else {
            for (App an : arraylist) {
                if (an.getTitle().toLowerCase(Locale.getDefault()).contains(charText)) {
                    appList.add(an);
                }
            }
        }
        notifyDataSetChanged();
    }
}

[/sociallocker]

Buka file MainActivity.java dan tambahkan kode di bawah ini untuk membuat widget SearchView dan ListView bekerja dengan baik. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.searchlistapp/MainActivity.java

package com.androidrion.searchapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.SearchView;

import android.os.Bundle;
import android.text.TextUtils;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ListView listView;
    ListViewAdapter listViewAdapter;
    ArrayList<App> arrayList = new ArrayList<>();

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

        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
        };

        final String[] Headline = {"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 = {"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"
        };

        listView = findViewById(R.id.listview);

        for (int i = 0; i < Headline.length; i++) {
            App app = new App(Headline[i], Subhead[i], iconList[i]);
            arrayList.add(app);
        }

        listViewAdapter = new ListViewAdapter(this, arrayList);
        listView.setAdapter(listViewAdapter);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.search_menu, menu);

        MenuItem myActionMenuItem = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) myActionMenuItem.getActionView();
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String s) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String s) {
                if (TextUtils.isEmpty(s)) {
                    listViewAdapter.filter("");
                    listView.clearTextFilter();
                } else {
                    listViewAdapter.filter(s);
                }
                return true;
            }
        });
        return true;
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal, kalian bisa melihat daftar yang tersusun rapi ke bawah. Kalian bisa men-scroll aplikasi tersebut untuk melihat seluruh item yang muncul. Pada bagian toolbar aplikasi, kalian bisa melihat ikon kacamata pembesar. Jika kalian mengklik ikon tersebut, maka secara otomatis toolbar pada aplikasi berubah menjadi tempat kalian bisa mengetik. Jika kalian mengisi teks pada kolom tersebut, maka secara otomatis item yang muncul pada aplikasi akan mengikuti huruf yang kalian masukkan. Jika kode di atas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial cara membuat widget SearchView menampilkan filter dari item ListView yang ditampilkan di android studio. Tutorial diatas lumayan susah untuk di kerjakan karena begitu banyak kode yang digunakan untuk membuat dua widget ini bekerja dengan maksimal.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

[sociallocker id=”1406″]

[/sociallocker]

- 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.