Android Custom AutoComplete textview icon and text

Question

I want to have an AutoCompleteTextView that can display both text and icon. I get help from this example: http://wptrafficanalyzer.in/blog/customizing-autocompletetextview-to-display-images-and-text-in-the-suggestion-list-using-simpleadapter-in-android/

In this example, images are used in drawable folder of the project. But, I want to use images from the database. I do not know how to change the second parameter below code to put the image from database instead of drawable folder's image.

Update: It turns out that I need to use a custom adopter. I have tried the below code, but getView is not being called. Why?

SearchItemArrayAdapter

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 java.util.ArrayList;
import java.util.List;

public class SearchItemArrayAdapter extends ArrayAdapter<CountryEntry>
{
    private static final String tag = "SearchItemArrayAdapter";
    private CountryEntry listEntry;
    private TextView autoItem;
    private ImageView categoryIcon;
    private List<CountryEntry> countryEntryList = new ArrayList<CountryEntry>();

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

    @Override
    public int getCount()
    {
        Log.w(tag, "Size:= " +  this.countryEntryList.size());
        return this.countryEntryList.size();
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        Log.w(tag, "GetView");

        View row = convertView;
        LayoutInflater inflater = LayoutInflater.from(getContext());

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

        listEntry = this.countryEntryList.get(position);
        String searchItem = listEntry.title;
        autoItem = (TextView) row.findViewById(R.id.txt);
        autoItem.setText(searchItem);

        // Get a reference to ImageView holder
        categoryIcon = (ImageView) row.findViewById(R.id.flag);
        categoryIcon.setImageBitmap(listEntry.image);



        return row;
    }
}

MainActivity

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.AutoCompleteTextView;
import java.util.ArrayList;

public class MainActivity extends ActionBarActivity {


    AutoCompleteTextView mAutoCompleteTextView;

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


        Bitmap theImage = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);

        // Add the country details

        AutoCompleteTextView autoComplete = (AutoCompleteTextView) findViewById(R.id.autocomplete);

        ArrayList<CountryEntry> list = new ArrayList<CountryEntry>();

        // Add it to array
        list.add(new CountryEntry("india", theImage));
        list.add(new CountryEntry("usa", theImage));

        SearchItemArrayAdapter adapter = new SearchItemArrayAdapter(this, R.layout.autocomplete_layout, list);

        autoComplete.setAdapter(adapter);

    }

}

CountryEntry

import android.graphics.Bitmap;
public class CountryEntry {
    public String title;
    public Bitmap image;

    public CountryEntry(String title, Bitmap image) {
        this.title = title;
        this.image = image;
    }
}

activity_main.xml

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

    <AutoCompleteTextView
        android:id="@+id/autocomplete"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/black"
        android:hint="autocomplete"
        android:completionThreshold="1"
        />

    <TextView
        android:id="@+id/tv_currency"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/autocomplete"
        />

</RelativeLayout>

autocomplete_layout.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="match_parent"
    android:orientation="horizontal"    
     >

    <ImageView 
            android:id="@+id/flag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/hello_world"
            android:padding="10dp"
    />

    <TextView 
            android:id="@+id/txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15dp" 
            android:padding="10dp"          
    />  

</LinearLayout>

Solution 1

This link is great, but it's missing one critical thing - in order for the adapter to successfully show the correct auto-completions for your typed-in text, your "JournalEntry" (as in the example link) must implement its own toString() for the filtering:

public class JournalEntry {
    public String title;
    public Bitmap image;

    public String toString() {
        return this.title.toString();
    }
}

Solution 2

You can use this link to fulfill your requirement :

Your class :

public class ConutryEntry {
    public String title;
    public Bitmap image;

}

The Adapter :

 public class SearchItemArrayAdapter extends ArrayAdapter<CountryEntry>
    {
        private static final String tag = "SearchItemArrayAdapter";
        private CountryEntry listEntry;
        private TextView autoItem;
        private ImageView categoryIcon;
        private List<CountryEntry> countryEntryList = new ArrayList<CountryEntry>();

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

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

        @Override
        public CountryEntry getItem(int position)
            {
                CountryEntry journalEntry = this.countryEntryList.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);
                    }

                listEntry = this.countryEntryList.get(position);
                String searchItem = listEntry.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(listEntry.image);

                return row;
            }
    }

Fill the Array like:

        byte Pic[];
        Pic = yourImageByte; //get the image in the form of byte[] from db
        ByteArrayInputStream imageStream = new ByteArrayInputStream(Pic);
        Bitmap theImage = BitmapFactory.decodeStream(imageStream);

        // Add the country details

        CountryEntry entry= new CountryEntry();
        entry.title = "India";
        entry.image = theImage;

        // Add it to array
        list.add(entry);
        SearchItemArrayAdapter adapter = new SearchItemArrayAdapter(this, R.layout.search_bar_fragment, list);

Comments

[Co Koder]

I could not make it work, can you check what is wrong? pastebin.com/DMHKci7w

[Co Koder]

I have updated the question to show you what i have done, can you check it out?