Styling AutoCompleteTextView to look alike Spinner

Photo by Emile Perron on Unsplash

In this post, we are going to learn how to style AutoCompleteTextView to look alike Spinner. It will have both a dropdown feature like Spinner and a typing feature to help filter suggestions.

Adding AutoCompleteTextView in XML

Firstly we should add a dropdown icon at the end of the view. For that, we can simply use the android:drawableEnd attribute in our XML layout.

Let’s add some more attributes to our AutoCompleteTextView, such as hint, margin, and layout_gravity

Now, our AutoCompleteTextView should look like this.

Moving onto Kotlin code

As we have added our view in XML now let’s jump to the Kotlin file and define a variable for our view in Kotlin code.

After that, we have to initialize it by using findViewById().

Since I am using a Fragment, I have added it inside onViewCreated(). If you are using an Activity you should add it inside onCreate().

As our view has been initialized let’s create an ArrayAdapter for holding the list of suggestions.

Here I have created an ArrayAdapter named atvNamesAdapter and also populated it with a list of names.

As our adapter is ready, let’s set it to our AutoCompleteTextView.

Now let’s run our app to see how it is working

After running our app, we can see that the suggestions are shown only after we have entered at least 2 characters. For showing suggestions even if we haven’t entered any character we should set an OnFocustChangeListener to our AutoCompleteTextView.

For that, let’s go to our Kotlin code.

We should callsetOnFocusChangeListener on our variable for AutoCompleteTextView and inside it, we should call showDropDown(). Now, whenever the focus of the view changes the dropdown will be shown.

Let’s run our app to see how our view is working after setting the OnFocusChangeListener

After we have added the OnFocusChangeListener we can see that even before we had entered a single character the dropdown has been shown. But there seems to be an issue as we are not seeing the dropdown when we enter the first character only.

Let’s fix this issue

The cause of the issue is AutoCompleteTextView by default is programmed to not show dropdown unless we have entered at least 2 characters.

For our view which already has OnFocusChangeListener and showDropDown() called inside it, we can simply set this:
android:completionThreshold="1"
property to our AutoCompleteTextView in XML layout
OR
autoCompleteTextView.setThreshold(1)
dynamically through our Kotlin/Java code.

If you are wondering what android:completionThreshold does then the answer according to the documentation is:

Defines the number of characters that the user must type before completion suggestions are displayed in a dropdown menu.

You may be wondering why not simply set the threshold to 0 and not add the OnFocusChangeListener. It’s a good idea but as for the result, it won’t show suggestions when we first click the view (when the view gets focus for the first time). i.e. It will show dropdown when we have added some characters and then deleted the characters and there are 0 characters left in the AutoCompleteTextView. For showing suggestions when the view is clicked we have set OnFocusChangeListener so setting threshold to 1 would suffice.

Final Code

I am setting the threshold property in the XML layout. Finally, our AutoCompleteTextView tag should look like this after setting the property.

XML

Kotlin Code

Result

Now let’s run our app:

We can see that, now the suggestions are shown even when a single character is present.