Cara Menerapkan SearchView dengan RecyclerView pada Fragment
Assalamualaikum Warahmatullahi Wabarakatuh.
Pada tutorial ini, kita akan belajar cara menerapkan SearchView dengan RecyclerView pada sebuah Fragment, Untuk memulai tutorial ini, saya sarankan kalian sudah memahami atau membuat bebererapa komponen yang diperlukan seperti Toolbar, SearchVeiw, RecyclerView dan Fragment. Jika kalian sudah paham atau membuat komponen yang saya sarankan tadi, maka kita akan lanjut pada tutorial berikut ini.
Pada program yang akan kita buat, akan menampilkan daftar Item yang kedalam RecyclerView dengan menggunakan ArrayList, RecyclerView tersebut akan kita implementasikan pada sebuah fragment, lalu dengan menggunakan SearchView, user dapat mencari item dialam RecyclerView dengan mudah.
Materi lainnya yang direkomendasikan untuk kalian pelajari:
- Cara Membuat Pencarian SearchView dengan ListView
- Cara Implementasi SearchView dengan RecyclerView Android
Cara Menerapkan SearchView dengan RecyclerView pada Fragment
1) Pertama, memasukan, bebrapa library berikut ini didalam dependencies pada file build.gradle.
compile 'com.android.support:appcompat-v7:27.0.2'
compile 'com.android.support:design:27.0.2'
compile 'com.android.support:cardview-v7:27.0.2'
compile 'com.android.support:recyclerview-v7:27.0.2'
2) Buat menu resourcenya, dengan cara: klik kanan pada dir res > new > Android resource file.
<?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/search"
android:title="Cari"
android:orderInCategory="1"
android:icon="@drawable/ic_search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
</menu>
<android.support.v7.widget.Toolbar 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:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/Widget.AppCompat.Light.PopupMenu">
</android.support.v7.widget.Toolbar>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/item_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="vertical">
<ImageView
android:id="@+id/meme"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:srcCompat="@drawable/meme1"
android:contentDescription="TODO"
tools:ignore="ContentDescription,HardcodedText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_toEndOf="@+id/meme"
android:layout_toRightOf="@+id/meme"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/memetitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:gravity="center"
android:text="Text"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
package android.cianjur.developer.net.searchviewfinalexample;
class DataFilter {
private String Nama;
private int ImageID;
DataFilter(String Nama, int ImageID){
this.Nama = Nama;
this.ImageID = ImageID;
}
String getNama() {
return Nama;
}
int getImageID() {
return ImageID;
}
}
package android.cianjur.developer.net.recyclerviewexample;
import android.support.design.widget.Snackbar;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.util.ArrayList;
package android.cianjur.developer.net.recyclerviewexample;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
//Class Adapter ini Digunakan Untuk Mengatur Bagaimana Data akan Ditampilkan
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>{
//Variable ArrayList dengan Parameter dari Class DataFilter (Nama, ImageID)
private ArrayList<DataFilter> arrayList;
RecyclerViewAdapter(ArrayList<DataFilter> arrayList){
this.arrayList = arrayList;
}
//ViewHolder Digunakan Untuk Menyimpan Referensi Dari View-View
class ViewHolder extends RecyclerView.ViewHolder{
private TextView JudulMeme;
private ImageView Meme;
ViewHolder(View itemView) {
super(itemView);
//Menginisialisasi View-View untuk kita gunakan pada RecyclerView
JudulMeme = itemView.findViewById(R.id.memetitle);
Meme = itemView.findViewById(R.id.meme);
}
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//Membuat View untuk Menyiapkan dan Memasang Layout yang Akan digunakan pada RecyclerView
View V = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_design, parent, false);
return new ViewHolder(V);
}
@Override
public void onBindViewHolder(ViewHolder holder, final int position) {
//Mengambil Data dari method getNama seseuai Posisi Index pada Class DataFilter
final String Nama = arrayList.get(position).getNama();
holder.JudulMeme.setText(Nama);
//Mengambil Data dari method getImageID seseuai Posisi Index pada Class DataFilter
holder.Meme.setImageResource(arrayList.get(position).getImageID());
}
@Override
public int getItemCount() {
//Menghitung Ukuran/Jumlah Data Yang Akan Ditampilkan Pada RecyclerView
return arrayList.size();
}
void setFilter(ArrayList<DataFilter> filterList){
arrayList = new ArrayList<>();
arrayList.addAll(filterList);
notifyDataSetChanged();
}
}
Disana kita membuat sebuah variable ArrayList dengan parameter dari Class DataFilter, untuk mengambil data pada ArrayList tersebut, kita dapat menggunakn fungsi getNama (Untuk Nama) dan getImageID (Untuk Gambar), seperti yan terlihar didalam method onBindViewHolder().
Pada class tersebut, kita membuat method baru bernama "setFilter", method tersebut digunakan untuk menampilkan data-data yang sudah difilter pada ArrayList yang, dengan menggunakan fungsi notifyDataSetChanged(), maka saat kita memasukan text pada SearchView, data akan langsung terfiter, tanpa harus mengeksekusi searchView terlebih dahulu.
7) Selanjutnya buat sebuah fragment, misalnya berinama "fragPage", lalu kita tambahkan RecyclerView, seperti berikut ini:
<?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"
android:background="@android:color/background_light"
tools:context="android.cianjur.developer.net.searchviewfinalexample.fragPage">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
package android.cianjur.developer.net.searchviewfinalexample;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.SearchView;
import java.util.ArrayList;
public class fragPage extends Fragment {
private RecyclerViewAdapter adapter;
private ArrayList<DataFilter> arrayList;
//Daftar Judul
private String[] Nama = {"Wildan", "Taufan", "Aish", "Ferdi", "Taufik", "Dzaki", "Annisa"};
//Daftar Gambar
private int[] Gambar = {R.drawable.meme1, R.drawable.meme2, R.drawable.meme3, R.drawable.meme4,
R.drawable.meme5, R.drawable.meme6, R.drawable.meme7};
@Override
public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view_frag1 = inflater.inflate(R.layout.activity_frag_page, container, false);
setHasOptionsMenu(true);
arrayList = new ArrayList<>();
RecyclerView recyclerView = view_frag1.findViewById(R.id.recycler);
DaftarItem();
//Menggunakan Layout Manager, Dan Membuat List Secara Vertical
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getContext());
recyclerView.setLayoutManager(layoutManager);
recyclerView.setHasFixedSize(true);
//Membuat Underline pada Setiap Item Didalam List
DividerItemDecoration itemDecoration = new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL);
itemDecoration.setDrawable(ContextCompat.getDrawable(getContext(), R.drawable.line));
recyclerView.addItemDecoration(itemDecoration);
recyclerView.setItemAnimator(new DefaultItemAnimator());
adapter = new RecyclerViewAdapter(arrayList);
//Memasang Adapter pada RecyclerView
recyclerView.setAdapter(adapter);
return view_frag1;
}
//Code Program pada Method dibawah ini akan Berjalan saat Option Menu Dibuat
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.manu_bar, menu);
MenuItem searchItem = menu.findItem(R.id.search);
SearchView searchView = new SearchView(getActivity());
searchView.setQueryHint("Cari Sesuatu....");
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@SuppressLint("SetTextI18n")
@Override
public boolean onQueryTextSubmit(String query) {
return false;
}
@Override
public boolean onQueryTextChange(String nextText) {
//Data akan berubah saat user menginputkan text/kata kunci pada SearchView
nextText = nextText.toLowerCase();
ArrayList<DataFilter> dataFilter = new ArrayList<>();
for(DataFilter data : arrayList){
String nama = data.getNama().toLowerCase();
if(nama.contains(nextText)){
dataFilter.add(data);
}
}
adapter.setFilter(dataFilter);
return true;
}
});
searchItem.setActionView(searchView);
}
//Memasukan semua data dari variable Nama dan Gambar ke parameter Class DataFiter(Nama,ImageID)
private void DaftarItem(){
int count = 0;
for (String nama : Nama){
arrayList.add(new DataFilter(nama, Gambar[count]));
count++;
}
}
}
Pada method onCreateOptionsMenu(), disana kita menambahkan fungsi getActivity(), untuk mendapatkan context dari activity.
Dan terakhir gunakan fungsi searchItem.setActionView(searchView), untuk mengset searchView kita pada searchItem atau item Search didalam menu.xml kita.
9) Pada activity_main.xml, disini kita akan menambahkan RecyclerView dan juga Toolbar yang sudah kita buat tadi. lalu tambahkan juga sebuah container, misalnya FrameLayout, Fragment tersebut akan kita tampilkan pada FrameLayout.
<?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="android.cianjur.developer.net.searchviewfinalexample.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
tools:targetApi="lollipop">
<include
android:id="@+id/toolbar"
layout="@layout/my_toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/halaman"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</LinearLayout>
package android.cianjur.developer.net.searchviewfinalexample;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
fragPage frag = new fragPage();
FragmentManager FM = getSupportFragmentManager();
FragmentTransaction FT = FM.beginTransaction();
FT.replace(R.id.halaman, frag);
FT.commit();
}
}
Projectnya bisa kalian download di Github Saya.
Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.
Wassalamualaikum Warahmatullahi Wabarakatuh.
