ListView having TextView with image ans searching

Question

I am developing an application. In which i need a list view having textview and image. I done that as:

List view in XML :

<ListView
    android:id="@+id/listview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@+id/tablelayout1"
    android:layout_below="@+id/edittext_searchbar"
    android:layout_margin="15dip"
    android:listSelector="@drawable/list_selector"
    android:divider="#623b42"
    android:dividerHeight="0.5dip"
    android:cacheColorHint="#00000000"
    android:overScrollMode="never" >
</ListView>

The adapter of list view in XML is :

<?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="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_item_selector" >

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="*"
        tools:ignore="UselessParent" >

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            tools:ignore="UselessParent" >

            <TextView
                android:id="@+id/textview"
                android:layout_width="0sp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:paddingLeft="5sp"
                android:textColor="@color/color_black"
                android:textSize="18sp"
                tools:ignore="SelectableText" />

            <ImageView
                android:id="@+id/imageview"
                android:layout_width="0sp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:contentDescription="@string/string_todo"
                android:paddingRight="5sp" />
        </TableRow>
    </TableLayout>

</RelativeLayout>

The .java of adapter is as :

public class CustomListAdapter extends ArrayAdapter<String> {
    /** Global declaration of variables. As there scope lies in whole class. */
    private Context context;
    private String[] Listofdata;
    ImageClass icon[] = null;

    /** Constructor Class */
    public CustomListAdapter (Context context,String[] mainList, ImageClass[] MenuIcon) {
        super(context,R.layout.mainmenu_screen_adapter_layout,mainList);
        this.context = context;
        this.Listofdata= mainList;
        this.icon = MenuIcon;
    }

    /** Implement getView method for customizing row of list view. */
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = ((Activity)context).getLayoutInflater();
        // Creating a view of row.
        View rowView = inflater.inflate(R.layout.mainmenu_screen_adapter_layout, parent, false);

        TextView textView = (TextView)rowView.findViewById(R.id.textview);
        ImageView imageView = (ImageView)rowView.findViewById(R.id.imageview);


        textView.setText(menuListofAdapter[position]);

        ImageClass MenuIcon = icon[position];
        imageView.setImageResource(MenuIcon .icon);

        return rowView;
    }
}

In main.java i done the code as:

For images i created a image array as :

ImageClass MenuIcon[] = new ImageClass []{
    new ImageClass (R.drawable.veg),
    new ImageClass (R.drawable.non_veg),
    new ImageClass (R.drawable.liquor),
    new ImageClass (R.drawable.desert),
    new ImageClass (R.drawable.beverages)
};

The calling to custom adapter is :

CustomListAdapter  adapter = new CustomListAdapter (this,mainList,MenuIcon);
listView.setAdapter(adapter);

Now i am applying the searching on listview as :

edittextSearch.addTextChangedListener(new TextWatcher(){
    public void afterTextChanged(Editable s){
    // Abstract Method of TextWatcher Interface.
}
public void beforeTextChanged(CharSequence s,int start, int count, int after){
    // Abstract Method of TextWatcher Interface.
}
public void onTextChanged(CharSequence s,int start, int before, int count){
    searchedData.clear();
    for (int i = 0, j = 0; i < mainMenuList.length; i++) {
        if (((String)mainList[i].toLowerCase(Locale.getDefault())).contains(edittextSearch.getText().toString().toLowerCase())) {
            searchedData.add(mainMenuList[i].toString());
        }
    }
    menuSearchList = searchedData.toArray(new String[searchedData.size()]);
    CustomListAdapter  adapter = new CustomListAdapter  (main.this,menuSearchList,MenuIcon);            
    listView.setAdapter(adapter);
}

But the issue is :

When i search any data the search is done properly but the corresponding image is not searched as because i dont know how to apply logic for to get image of searched item.

So please suggest me what should i do for it.

make your search based on the text.based on text search display images correspondingly in listview — Raghunandan, Mar 15 '13 at 09:29
http://stackoverflow.com/questions/13090046/how-to-implement-search-in-customlistview-based-on-class-item-of-pojo-class-in-a. — Raghunandan, Mar 15 '13 at 09:44

Naveen · Accepted Answer · 2013-03-15T09:14:26.133

Try this

    //put this where you declared searchedData
    ArrayList<ImageClass> mImageSearched = new ArrayList<ImageClass>;

public void onTextChanged(CharSequence s,int start, int before, int count){
    searchedData.clear();
    mImageSearched.clear();
    for (int i = 0, j = 0; i < mainMenuList.length; i++) {
        if (((String)mainList[i].toLowerCase(Locale.getDefault())).contains(edittextSearch.getText().toString().toLowerCase())) {
            searchedData.add(mainMenuList[i].toString());
            mImageSearched.add(MenuIcon[i]);
        }
    }
    menuSearchList = searchedData.toArray(new String[searchedData.size()]);
    ImageClass mImageSearchArray[] =  mImageSearched.toArray(new ImageClass[mImageSearched.size[]]);

    CustomListAdapter  adapter = new CustomListAdapter  (main.this,menuSearchList,mImageSearchArray);            
    listView.setAdapter(adapter);
}

and you also have to change the Adapter Constructor

public CustomListAdapter (Context context,String[] mainList, ImageClass[] mMenuIcon) {
        super(context,R.layout.mainmenu_screen_adapter_layout,mainList);
        this.context = context;
        this.Listofdata= mainList;
        this.icon = mMenuIcon;
    }

ListView having TextView with image ans searching

1 Answers1