Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Autocompletion with Icons/Images

Author: Wagied Davids
Published? false -- FormatLanguage: W

Problem:

Searching for items/entries, that can occur in more that a single category. Perform autocompletion and simultaneously make the difference in categories immediately apparent using icons. For example, the term Pain (in bold) occurs in both Symptoms category as well as Reactions category, but also text in the Notes category. Categories:

Symptoms: Pain, Depression, Weakness Reactions: Pain, Inflammation, Itchiness Notes: I had a pain in my buttocks.

Solution:

TODO: EXPLANATION CODE

Discussion:

Visualize the categories and items to be searched simultaneously using category icons.

File: search_bar_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">

	<AutoCompleteTextView
		android:id="@+id/autoCompleteSearch"
		android:hint="Enter search term ..."
		android:singleLine="true"
		android:maxLines="1"
		android:layout_weight="1.0"
		android:layout_width="220dip"
		android:layout_height="wrap_content"
		android:layout_marginLeft="5dip">
	</AutoCompleteTextView>

	<ImageButton
		android:id="@+id/searchButton"
		android:src="@drawable/search_icon"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content">
	</ImageButton>

</LinearLayout>

File: SearchArrayAdapter.java

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

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.pfizer.android.R;
import com.pfizer.android.model.JournalEntry;
import com.pfizer.android.utils.CategoryIconRetriever;

public class SearchItemArrayAdapter extends ArrayAdapter<JournalEntry>
	{
		private static final String tag = "SearchItemArrayAdapter";
		private JournalEntry journalEntry;
		private TextView autoItem;
		private ImageView categoryIcon;
		private int journalEntryTypeId;
		private List<JournalEntry> journalEntryList = new ArrayList<JournalEntry>();
		private final CategoryIconRetriever iconRetriever;

		/**
		 * 
		 * @param context
		 * @param textViewResourceId
		 * @param objects
		 */
		public SearchItemArrayAdapter(Context context, int textViewResourceId, List<JournalEntry> objects)
			{
				super(context, textViewResourceId, objects);
				iconRetriever = new CategoryIconRetriever(context);
				journalEntryList = objects;
				Log.d(tag, "Search List -> journalEntryList := " + journalEntryList.toString());
			}

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

		@Override
		public JournalEntry getItem(int position)
			{
				JournalEntry journalEntry = this.journalEntryList.get(position);
				Log.d(tag, "*-> Retrieving JournalEntry @ position: " + String.valueOf(position) + " : " + journalEntry.toString());
				return journalEntry;
			}

		@Override
		public View getView(int position, View convertView, ViewGroup parent)
			{
				View row = convertView;
				LayoutInflater inflater = LayoutInflater.from(getContext());

				if (row == null)
					{
						row = inflater.inflate(R.layout.search_listitem_icon, parent, false);
					}

				journalEntry = this.journalEntryList.get(position);
				String searchItem = journalEntry.title;
				autoItem = (TextView) row.findViewById(R.id.search_auto_item);
				autoItem.setText(searchItem);

				// Get a reference to ImageView holder
				categoryIcon = (ImageView) row.findViewById(R.id.category_icon);
				categoryIcon.setImageBitmap(iconRetriever.getJournalEntryTypeIcon(journalEntry.typeId));

				return row;
			}
	}
No records found.