Android AutoCompleteTextView: Suggestions from Web Service Call


Android AutoCompleteTextView - Featured

When building a mobile app, one of the most basic things to have in an app is an auto suggest box. It is such a common widget that anyone who’s using an app expects it to be there. But recently I realized that not many Android autocomplete examples exist on the internet where a web service or an API call is used to fetch data dynamically. Instead many tutorials are present showing the wrong practices of implementing an Android AutoCompleteTextView with web API call. Hence here I would show how I built an autosuggest feature on my Android app.

To start with lets, understand the new additions in the AutoCompleteTextView widget. Recently with the release of Android support appcompat library 25.1.0 a background tint support was added and post which the new widget class was named as AppCompatAutoCompleteTextView. This new widget class is not much different from the original one, but since its an enhanced version of AutoCompleteTextView we will using this class for this Android AutoCompleteTextView with and API call tutorial.

Android AutoCompleteTextView with data from Web API Call example

To start with, lets define the objectives of this tutorial. Here we will create and Android AutoCompleteTextView example, where data is fetched dynamically from a web API call. Once the data is fetched dynamically based on the user’s input, we would display it accordingly in a drop down scrolling list. The Android AutoCompleteTextView implementation is so flexible that even its dropdown can also be customised. But to keep things simple and focused, we would keep this out of the scope of this example.

1. Prerequisites

To make any API call in an android app, we must have a REST framework implemented. So that we can have some basic set of features relating to web API call. Since Android Volley is a very simple framework, we would be using volley in this example to make API calls. But just in case, if you are comfortable with any other REST framework, please feel free to use that in your app.

First lets add internet permission in the manifest:

Secondly lets define a basic class to make an API call through the app.

Method to take note of in the class above is make, as this is the only static method in this class. This method would be used to make an API call for the Android AutoCompleteTextView implementation ahead. Internally this method would create a request queue for volley and handle all the network I/O itself. Also in the above class, I just defined a basic example of Android volley request queue, through which we will be making an API call for the implementation of Android AutoCompleteTextView showing dynamic data from the same. To learn more in detail on Android volley please refer to my tutorial on it here.

2. Define an Adapter for Android AutoCompleteTextView with dynamic data from API call

As you may know, the drop down list shown on top of an AutoCompleteTextView is just a ListView inside of the overflow. Therefore as per principle, we have to make an adapter for the underlying ListView. Now since we are going to use an adapter, where only data needs to be shown in a form of list and also we don’t need any sort of processing on the list therefore we would use an ArrayAdapter. But keeping the future improvements in mind we will also implement a Filterable interface. This can help us in processing the list as well without making an API call.

The above piece of code would turn out to be a fully functional ArrayAdapter, with the capability of setting the data without instantiating the adapter object once again. Also this would have a Filterable implementation, therefore it would be perfect example for an Android AutoCompleteTextView where suggestions from an API call are shown.

3. Using Android AppCompatAutoCompleteTextView with web API call

As mentioned earlier for this tutorial we will be using Android AppCompatAutoCompleteTextView widget for building an auto suggest experience, as this widget gives an extra advantage over standard implementation. That is with this new one, we can set background tint color and modify it dynamically with ViewCompat methods. Lets start by defining a layout:

Next to implement an Android AppCompatAutoCompleteTextView where suggestions come from a WebService call, we need to define an activity where all of this is done.

The above implementation of an Android AppCompatAutoCompleteTextView is a bit different from the regular implementation. Here firstly an adapter is instantiated, which we defined in the previous section of tutorial. Secondly an instance of AdapterView.OnItemClickListener() is set, to capture the clicks on the dropdown items. Next one of the most important part, a TextWatcher is attached to the AutoCompleteTextView. This TextWatcher captures all the all the user inputs and sends it to a handler. Here in this Android AutoCompleteTextView example, we are processing the changes of EditText via a delayed handler. In a way, this approach saves us some unnecessary web API calls, as a delay in consecutive requests is introduced with the help of Handler class. Once a successful call is reached to the handler, we make an API call which returns the results in expected form and they are shown with the help of an Adapter. This way, data is shown on the AutoCompleteTextView drop down. To view the full source code, please checkout the link below:

Full Source Code

This is how the output of the above example would look:

Android AutoCompleteTextView

Some Important properties of Android AutoCompleteTextView

Now that we have a fair understanding of how an Android AutoCompleteTextView works, lets have a look at some of its frequently used properties:

  • setThreshold(int threshold) – This sets a character input threshold, for triggering the dropdown.
  • setCompletionHint(CharSequence hint) – Once the threshold is reached and a dropdown is shown, over the bottom this completion hint is also shown.
  • setDropDownBackgroundResource(int id) – With the help of this method, you can set a background resource for the dropdown list.
  • setDropDownBackgroundDrawable(Drawable d) – With this method, we can set a background drawable for auto suggest list. But on a separate note, if you wish to style the Android AutoCompleteTextView dropdown background you can also consider styling the list item of dropdown by using a custom xml for inflating the item(explained in next section).

 

Android AutoCompleteTextView dropdown positioning

At times when making an Android autosuggest, we wish to move the dropdown and attach it to some other view on screen. This may sound complex, but its very simple to implement with Android AutoCompleteTextView, we just need to define a few properties in xml. To get started, lets discuss some properties for dropdown positioning of Andorid AutoCompleteTextView:

When using the above property, if the dropdown length goes beyond the keyboard height, in some scenarios it will be automatically detached and positioned on top of the screen. To avoid this behaviour of Android AutoCompleteTextView, we can use the following properties, these will help in curbing the mentioned behaviour:

 

Now addressing the issue of custom views in Android AutoCompleteTextView, to do so in the above piece of code firstly you need to make a new layout for the custom list item. Next, that xml resource needs to be specified in the adapter initiation like this: new AutoSuggestAdapter(this,R.layout.custom_dropdown_item);. Once this is done, in the adapter you need to implement the getView() method and use the custom layout xml. This way as a result you would see a list dropdown in an Android AutoCompleteTextView with a custom layout. That said, lets conclude this tutorial and please connect with us on Twitter, Facebook and Google+ for more updates.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.


Leave a comment

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

2 thoughts on “Android AutoCompleteTextView: Suggestions from Web Service Call