Implement searchview in android gridview

Question

i have gridview in my android app which displays images and text so i want to add searchview in gridview so that when i type something in searchview i should be able to see matching gridview items ,,, i have managed to get seachview code for gridview but i am not been able to implement these code in my gridview, here is searchview code

MainActivity

public class MainActivity extends Activity {

GridView gv;
SearchView sv;

ArrayAdapter<String> adapter;

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

    // Initial Views
    gv=(GridView) findViewById(R.id.gridView1);
    sv=(SearchView) findViewById(R.id.searchView1);

    // Adapter
    gv.setAdapter adapter

    // Set Adapter
    adapter=new ArrayAdapter<String> (this, android.R.layout.simple_list_item_1.teams);

    sv.setOnQueryTextListener(new OnQueryTextListener() {

        @Override
        public boolean onQueryTextSubmit(String arg0) {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public boolean onQueryTextChange(String query) {
            // TODO Auto-generated method stub

            adapter.getFilter().filter(query);

            return false;
        }
    });

}

activity_main

<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.searching.MainActivity" >

<GridView
    android:id="@+id/gridView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_marginTop="49dp"
    android:numColumns="3" >
</GridView>

<SearchView
    android:id="@+id/searchView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/gridView1"
    android:layout_alignParentTop="true"
    android:queryHint="Search Here"
    android:layout_alignRight="@+id/gridView1" >
</SearchView>

so i want to implement this code in my gridview here is my gridview code

MainActivity

public class MainActivity extends Activity {
/** Called when the activity is first created. */

private GridviewAdapter mAdapter;
private ArrayList<String> listCountry;
private ArrayList<Integer> listFlag;

private GridView gridView;

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

    prepareList();

    // prepared arraylist and passed it to the Adapter class
    mAdapter = new GridviewAdapter(this,listCountry, listFlag);

    // Set custom adapter to gridview
    gridView = (GridView) findViewById(R.id.gridView1);
    gridView.setAdapter(mAdapter);

    // Implement On Item click listener
    gridView.setOnItemClickListener(new OnItemClickListener() 
    {
        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int position,
                long arg3) {
            Toast.makeText(MainActivity.this, mAdapter.getItem(position), Toast.LENGTH_SHORT).show();
        }
    });

}

public void prepareList()
{
      listCountry = new ArrayList<String>();

      listCountry.add("india");
      listCountry.add("Brazil");
      listCountry.add("Canada");
      listCountry.add("China");
      listCountry.add("France");
      listCountry.add("Germany");
      listCountry.add("Iran");
      listCountry.add("Italy");
      listCountry.add("Japan");
      listCountry.add("Korea");
      listCountry.add("Mexico");  
      listCountry.add("Netherlands");
      listCountry.add("Portugal");  
      listCountry.add("Russia");
      listCountry.add("Saudi Arabia");  
      listCountry.add("Spain");
      listCountry.add("Turkey");
      listCountry.add("United Kingdom");
      listCountry.add("United States");

      listFlag = new ArrayList<Integer>();
      listFlag.add(R.drawable.india);
      listFlag.add(R.drawable.brazil);
      listFlag.add(R.drawable.canada);
      listFlag.add(R.drawable.china);
      listFlag.add(R.drawable.france);
      listFlag.add(R.drawable.germany);
      listFlag.add(R.drawable.iran);
      listFlag.add(R.drawable.italy);
      listFlag.add(R.drawable.japan);
      listFlag.add(R.drawable.korea);
      listFlag.add(R.drawable.mexico);
      listFlag.add(R.drawable.netherlands);
      listFlag.add(R.drawable.portugal);
      listFlag.add(R.drawable.russia);
      listFlag.add(R.drawable.saudi_arabia);
      listFlag.add(R.drawable.spain);
      listFlag.add(R.drawable.turkey);
      listFlag.add(R.drawable.united_kingdom);
      listFlag.add(R.drawable.united_states);
}

GridviewAdapter

public class GridviewAdapter extends BaseAdapter {

private ArrayList<String> listCountry;
private ArrayList<Integer> listFlag;
private Activity activity;

public GridviewAdapter(Activity activity,ArrayList<String> listCountry, ArrayList<Integer> listFlag) {
    super();
    this.listCountry = listCountry;
    this.listFlag = listFlag;
    this.activity = activity;
}

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return listCountry.size();
}

@Override
public String getItem(int position) {
    // TODO Auto-generated method stub
    return listCountry.get(position);
}

@Override
public long getItemId(int position) {
    // TODO Auto-generated method stub
    return 0;
}

public static class ViewHolder
{
    public ImageView imgViewFlag;
    public TextView txtViewTitle;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    ViewHolder view;
    LayoutInflater inflator = activity.getLayoutInflater();

    if(convertView==null)
    {
        view = new ViewHolder();
        convertView = inflator.inflate(R.layout.gridview_row, null);

        view.txtViewTitle = (TextView) convertView.findViewById(R.id.textView1);
        view.imgViewFlag = (ImageView) convertView.findViewById(R.id.imageView1);

        convertView.setTag(view);
    }
    else
    {
        view = (ViewHolder) convertView.getTag();
    }

    view.txtViewTitle.setText(listCountry.get(position));
    view.imgViewFlag.setImageResource(listFlag.get(position));

    return convertView;
}

Answer 1

here you go :

sv.setOnQueryTextListener(new OnQueryTextListener() {

    @Override
    public boolean onQueryTextSubmit(String newText) {
        // filter your adapter here 
        private ArrayList<String> listCountrytemp;
        private ArrayList<Integer> listFlagtemp;
        for( int i =0 ; i<listContry.size() ; i++){
             if(listContry(i).contains(newText)){
                       listCountrytemp.add(listContry(i));
                       listFlagtemp.add(listFlag(i));
             }
        }
        return false;
    }

    @Override

public boolean onQueryTextChange(String query) {
    // TODO Auto-generated method stub

    adapter.getFilter().filter(query);

    return false;
}
});

make your adapter take two arguments one for the Country array list and the other for the flags.

finally create an adapter with the listCountrytemp and listFlagtemp and send it to the grid view. i am not familiar with searchviews so i dont know where you should do the last step.

this may be not the best solution but for me it works just fine.

not that the grid view will update as you type in the search view like facebook search.

hope this helps

Edit:

creating gridview with the new arraylists:

 mAdapter = new GridviewAdapter(this,listCountrytemp , listFlagtemp);

 gridView.setAdapter(mAdapter);