Writing Your Own AutoCompleteTextView

Hey everyone,

Haven’t posted in a while but thought I’d write an example about AutoCompleteTextViews and how to implement a custom one. Much of the code is very similar in nature to that of the custom CursorAdapter which I talked about in this post:

https://thinkandroid.wordpress.com/2010/01/11/custom-cursoradapters/

However, the main difference in this example is the fact that we are going to implement the Filterable class as this is what’s going to dictate what suggestions show up during the autocomplete process. As for the layout of each entry, I implemented this instance using JAVA (hence doing it programmatically) so this example does as an example of how you can write layouts using JAVA in lieu of XML. And so, the code snippet for the adapter itself is below:

public class ContactsAutoCompleteCursorAdapter extends CursorAdapter implements Filterable {

    private TextView mName, mNumber;

    public AutoCompleteCursorAdapter(Context context, Cursor c) {
        super(context, c);
        mContent = context.getContentResolver();
    }

    @Override
    public View newView(Context context, Cursor cursor, ViewGroup parent) {
        final LinearLayout ret = new LinearLayout(context);
        final LayoutInflater inflater = LayoutInflater.from(context);
        mName = (TextView) inflater.inflate(android.R.layout.simple_dropdown_item_1line, parent, false);
        mNumber = (TextView) inflater.inflate(android.R.layout.simple_dropdown_item_1line, parent, false);
        ret.setOrientation(LinearLayout.VERTICAL);

        LinearLayout horizontal = new LinearLayout(context);
        horizontal.setOrientation(LinearLayout.HORIZONTAL);
        
        // you can even add images to each entry of your autocomplete fields
        // this example does it programmatically using JAVA, but the XML analog is very similar
        ImageView icon = new ImageView(context);

        int nameIdx = cursor.getColumnIndexOrThrow(People.NAME);
        int numberIdx = cursor.getColumnIndex(People.NUMBER);

        String name = cursor.getString(nameIdx);
        String number = cursor.getString(numberIdx);

        mName.setText(name);
        mNumber.setText(number);

        // setting the type specifics using JAVA
        mNumber.setTextSize(16);
        mNumber.setTextColor(Color.GRAY);

        /**
         * Always add an icon, even if it is null. Keep the layout children
         * indices consistent.
         */
        Drawable image_icon  = null;
        if (carrier != CarrierInfo.NOT_CACHED && carrier != CarrierInfo.ERROR && carrier != CarrierInfo.NETWORK_ERROR) {
            image_icon = context.getResources().getDrawable(R.drawable.icon);
        }

        icon.setImageDrawable(image_icon);
        icon.setPadding(0, -2, 2, 6);

        // an example of how you can arrange your layouts programmatically
        // place the number and icon next to each other
        horizontal
                .addView(mNumber, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        horizontal.addView(icon, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        ret.addView(mName, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        ret.addView(horizontal, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        return ret;
    }

    @Override
    public void bindView(View view, Context context, Cursor cursor) {
        int nameIdx = cursor.getColumnIndexOrThrow(People.NAME);
        int numberIdx = cursor.getColumnIndex(People.NUMBER);

        String name = cursor.getString(nameIdx);
        String number = cursor.getString(numberIdx););

        /**
         * Always add an icon, even if it is null. Keep the layout children
         * indices consistent.
         */
        Drawable image_icon  = null;
        if (carrier != CarrierInfo.NOT_CACHED && carrier != CarrierInfo.ERROR && carrier != CarrierInfo.NETWORK_ERROR) {
            image_icon = context.getResources().getDrawable(R.drawable.icon);
        }

        // notice views have already been inflated and layout has already been set so all you need to do is set the data
        ((TextView) ((LinearLayout) view).getChildAt(0)).setText(name);
        LinearLayout horizontal = (LinearLayout) ((LinearLayout) view).getChildAt(1);
        ((TextView) horizontal.getChildAt(0)).setText(number);
        ((ImageView) horizontal.getChildAt(1)).setImageDrawable(image_icon);
    }

    @Override
    public String convertToString(Cursor cursor) {
        // this method dictates what is shown when the user clicks each entry in your autocomplete list
        // in my case i want the number data to be shown
        int numCol = cursor.getColumnIndexOrThrow(People.NUMBER);
        String number = cursor.getString(numCol);
        return number;
    }

    @Override
    public Cursor runQueryOnBackgroundThread(CharSequence constraint) {
        // this is how you query for suggestions
        // notice it is just a StringBuilder building the WHERE clause of a cursor which is the used to query for results
        if (getFilterQueryProvider() != null) { return getFilterQueryProvider().runQuery(constraint); }

        StringBuilder buffer = null;
        String[] args = null;
        if (constraint != null) {
            buffer = new StringBuilder();
            buffer.append(People.NAME + " IS NOT NULL AND " + People.NUMBER_KEY + " IS NOT NULL AND ");
            buffer.append("UPPER(");
            buffer.append(People.NAME);
            buffer.append(") GLOB ?");
            args = new String[] { constraint.toString().toUpperCase() + "*" };
        }

        return mContent.query(People.CONTENT_URI, Constants.PEOPLE_PROJECTION, buffer == null ? null : buffer
                .toString(), args, People.DEFAULT_SORT_ORDER);
    }

    private ContentResolver mContent;

}

And that’s it! So just a brief explanation (in addition to comments I put into the code at each section). Basically it works the same way as a custom CursorAdapter, but instead we implement the Filterable class as this will dynamically query our database for suggestions based off of what the user has typed into the AutoCompleteTextView. Then, we have a method called convertToString and that determines what field of the cursor gets converted to be displayed in your AutoCompleteTextView. I’m not sure what it defaults to typically, but at least in our example we want to specific between whether or not we want the contact’s name to be displayed or the contact’s phone number. When I wrote this AutoCompleteTextView, I wanted to query for the person’s contacts and allow them to quickly call that contact, and so it made more sense to display the phone number as opposed to the name.

With this you have a lot of control over not only what suggestions are displayed, but also what gets converted and how all of your information gets displayed.

So the one question remains – how does one implement this. So here’s a little code snippet on how to implement this example:

public class A extends Activity {
     
     @Override
     public void onCreate (Bundle savedInstanceState) {
            setContentView(R.layout.main);

            // R.id.auto_contact_edit is just an AutoCompleteTextView defined in the XML layout R.layout.main
            AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.auto_contact_edit);
           Cursor c = getContentResolver()
                .query(People.CONTENT_URI, Constants.PEOPLE_PROJECTION,
                        People.NAME + " IS NOT NULL AND " + People.NUMBER_KEY + " IS NOT NULL", null,
                        People.DEFAULT_SORT_ORDER);
           ContactsAutoCompleteCursorAdapter adapter = new ContactsAutoCompleteCursorAdapter(this, c);
           textView.setAdapter(adapter);
           // you can also prompt the user with a hint
           textView.setHint("type name");

           // rest of your code
     }
}

Pretty simple.

Hope this was helpful. Happy coding.

– jwei