Customizing AutoCompleteTextView to display images and text in the suggestion list using SimpleAdapter in Android

August 26, 2012

In this article we will see a simple method to customize AutoCompleteTextView so that it can list images along with text when user input some characters in it. We will use SimpleAdapter to store both images and text which is displayed in the AutoCompeteTextView.

This application is developed in Eclipse Classic ( 4.2.0 ) with ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3 )

1. Create a new Android application project namely “AutoCompleteTextViewDemo”

New Android Application Project

Figure 1 : New Android Application Project

2. Design application launcher icon

Design Application Launcher Icon

Figure 2: Design Application Launcher Icon

3. Create a blank activity

Create a blank activity

Figure 3 : Create a blank activity

4. Enter MainActivity Details

Enter MainActivity Details

Figure 4 : Enter MainActivity Details

5. Remove Android Support Library if exists

By default Eclipse ( 4.2.0) adds Android Support Library to  an  Android application project. For this application, we don’t need to use this support library. So the library file libs/android-support-v4.jar may be removed manually via ProjectExplorer by simply right click on the file and then clicking the menu item “delete”.

6. Create a new folder namely drawable under the folder res

7. Download and extract the given below zip file to the drawable folder

8. Update the file res/values/strings.xml


    <string name="app_name">AutoCompleteTextViewDemo</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">AutoCompleteTextViewDemo</string>
    <string name="str_hnt_autocomplete">Enter Country Name</string>


9. Create a class namely CustomAutoCompleteTextView in the file src/in/wptrafficanalyzer/autocompletetextviewdemo/ to customize AutoCompleteTextView

package in.wptrafficanalyzer.autocompletetextviewdemo;

import java.util.HashMap;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.AutoCompleteTextView;

/** Customizing AutoCompleteTextView to return Country Name
*  corresponding to the selected item
public class CustomAutoCompleteTextView extends AutoCompleteTextView {

    public CustomAutoCompleteTextView(Context context, AttributeSet attrs) {
        super(context, attrs);

    /** Returns the country name corresponding to the selected item */
    protected CharSequence convertSelectionToString(Object selectedItem) {
        /** Each item in the autocompetetextview suggestion list is a hashmap object */
        HashMap<String, String> hm = (HashMap<String, String>) selectedItem;
        return hm.get("txt");

10. Update the layout file res/layout/activity_main.xml

<RelativeLayout xmlns:android=""
    android:layout_height="match_parent" >




11. Create a layout file for CustomAutoCompleteTextView in the file res/layout/autocomplete_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""




12. Update the class MainActivity in the file src/in/wptrafficanalyzer/autocompletetextviewdemo/

package in.wptrafficanalyzer.autocompletetextviewdemo;

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

import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.SimpleAdapter;
import android.widget.TextView;

public class MainActivity extends Activity {

    // Array of strings storing country names
    String[] countries = new String[] {
        "Sri Lanka",
        "North Korea",
        "South Korea",

    // Array of integers points to images stored in /res/drawable-ldpi/
    int[] flags = new int[]{

    // Array of strings to store currencies
    String[] currency = new String[]{
        "Indian Rupee",
        "Pakistani Rupee",
        "Sri Lankan Rupee",
        "Bangladeshi Taka",
        "Nepalese Rupee",
        "North Korean Won",
        "South Korean Won",
        "Japanese Yen"

    public void onCreate(Bundle savedInstanceState) {

        // Each row in the list stores country name, currency and flag
        List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();

        for(int i=0;i<10;i++){
            HashMap<String, String> hm = new HashMap<String,String>();
            hm.put("txt", countries[i]);
            hm.put("flag", Integer.toString(flags[i]) );
            hm.put("cur", currency[i]);

        // Keys used in Hashmap
        String[] from = { "flag","txt"};

        // Ids of views in listview_layout
        int[] to = {,};

        // Instantiating an adapter to store each items
        // R.layout.listview_layout defines the layout of each item
        SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList, R.layout.autocomplete_layout, from, to);

        // Getting a reference to CustomAutoCompleteTextView of activity_main.xml layout file
        CustomAutoCompleteTextView autoComplete = ( CustomAutoCompleteTextView) findViewById(;

        /** Defining an itemclick event listener for the autocompletetextview */
        OnItemClickListener itemClickListener = new OnItemClickListener() {
            public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {

                /** Each item in the adapter is a HashMap object.
                *  So this statement creates the currently clicked hashmap object
                * */
                HashMap<String, String> hm = (HashMap<String, String>) arg0.getAdapter().getItem(position);

                /** Getting a reference to the TextView of the layout file activity_main to set Currency */
                TextView tvCurrency = (TextView) findViewById( ;

                /** Getting currency from the HashMap and setting it to the textview */
                tvCurrency.setText("Currency : " + hm.get("cur"));

        /** Setting the itemclick event listener */

        /** Setting the adapter to the listView */


    /** A callback method, which is executed when this activity is about to be killed
    * This is used to save the current state of the activity
    * ( eg :  Configuration changes : portrait -> landscape )
    protected void onSaveInstanceState(Bundle outState) {
        TextView tvCurrency = (TextView) findViewById( ;
        outState.putString("currency", tvCurrency.getText().toString());

    /** A callback method, which is executed when the activity is recreated
    * ( eg :  Configuration changes : portrait -> landscape )
    protected void onRestoreInstanceState(Bundle savedInstanceState) {
        TextView tvCurrency = (TextView) findViewById( ;

    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(, menu);
        return true;

13. Screenshots of the application in execution

Selecting an item from the autocompletetextview

Figure 5 : Selecting an item from the autocompletetextview

Displays the currency corresponding to the country selected from the autocompletetextview

Figure 6 : Displays the currency corresponding to the country selected from the autocompletetextview

14. Download

15. Reference

How to hire me?

I am George Mathew, working as software architect and Android app developer at

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to

My other blogs

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

Tags: , , ,

17 Responses to Customizing AutoCompleteTextView to display images and text in the suggestion list using SimpleAdapter in Android

  1. rahul on April 5, 2013 at 4:26 pm

    just Awesome you rock :)

  2. nahum on June 8, 2013 at 4:18 pm

    good tutorial.
    i took this and wanted to do the dropdown list more complex.
    i wanted to make it the following form:

    | |____________|
    | | |

    as u can c, its a linearlayout of type horizontal where the first view in it is an image and the second view is another linearlayout of type vertical that consist of two textviews.

    with this kind of layout, the autocomplete dropdown list doesnt work

    have any idea ?

  3. Giuseppe on October 6, 2013 at 3:54 pm

    How can you change the font of the textview?

  4. Davis Sanchez on October 17, 2013 at 11:45 pm

    Thank you very much! You’ve helped me a lot!!

  5. Subash on March 10, 2014 at 2:37 pm

    I tried to use custom bitmap in your example but it didnot work. How can it be achieved. the bitmaps are stored in arraylist.

  6. chintan khetiya on May 29, 2014 at 1:22 pm

    Its Good tutorial, but I am adding two text in each row instead Image + Text , at that time that will show single record as twice in suggestion box. If i just put “S” then it show Sri Lanka two times in suggestion. How can we handle this ?? Do you have any idea.

  7. krishna dhas on September 27, 2014 at 11:03 am

    hi how to set autocomplete text hint name scrolling or marquee

  8. Davide on October 23, 2014 at 1:35 pm

    Thanks, George

    By the looks of it this is precisely what we need for our Android app. Specifically,

    – Replace default FormData file with a custom file (names, eg ‘Godzilla’)
    – Access custom file for autosuggest when the user types into form
    – Preferably, the ability to update custom file from Server

    We’ve got a good dev for the core App; we could give this to him or to a specialist. Do you take such work on? Pls get in touch if you do. Thanks again,


  9. Belal on February 9, 2015 at 3:22 am

    Great tutorial man, million thanks :)

    • android_one on June 5, 2015 at 5:51 pm

      In my case i am fetching data from database for Hashmap and for some item in dropdown its showing duplicate entries. Can you tell me Why this might happen ?

  10. vineet on May 5, 2015 at 6:09 pm

    sir when i have entered “Sri ” or “Sri Lanka” its show no suggestion but there should be a suggestion ….please solve it

  11. shushay on August 25, 2015 at 1:30 pm

    hi there nice tutorial but i added two button into ur code, not working OnItemClickListener pls can u help me any mechanism

  12. Juan Santos on November 8, 2015 at 3:35 am

    Gracias por el aporte, me fue de mucha utilidad de forma didáctica.

  13. Ajit on February 8, 2016 at 5:44 pm

    Tutorial is good .but how can i add space after some text like
    if i am searching Sri lanka then drop down hides after sri +space
    .how tell me some tricks

  14. Waqas on June 18, 2016 at 8:57 pm


    I wanted to display image from remote url for this exact example. Can you guide me how to do that?

    Because I am fetching data from JSON API.



  15. Carlos on June 25, 2016 at 2:52 am

    Great tutorial.
    How to setImageBitmap from a url rather than use an Array of integers points to images stored in /res/drawable-ldpi/?

  16. Monika on June 28, 2016 at 5:24 pm

    how can v restrict the autocomplete in listview for example : if at 1st row we enter sri lanka and at the 2nd row we try to add same sri lanka it should restrict. please reply soon

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner