Floating label spinner using Material AutocompleteTexView

Updated 1 August 2020

Save

A Little Explanation of AutoCompleteTextView

An editable text view or in other words AutoCompleteTextView that shows completion suggestions automatically while the user is typing any related content. The list of suggestions is displayed in a drop-down menu like a spinner from which the user can choose an item to replace the content of the edit box.

The drop-down can be dismissed at any time by pressing the back key or, if no item is selected in the drop-down, by pressing the enter/dpad center key.

The list of suggestions is obtained from a data adapter and appears only if there is any data is available as per the search. For a basic understanding of AutoCompleteTextView, you can read the official document: Link

 

 In Material Design we will be using the custom spinner dropdown menu for our AutoCompleteTextView.

 

Let’s dive into code to understand the AutoCompleteTextView with material design.

  1.  Add the material design dependency on build.gradle(app):

    I have enabled the data binding for the example. If you don’t know about the data binding you can read from this link.
  2. Add the material style on the style.xml file:

    Mainly we will be using the CustomDropDownTilStyle for the TextInputLayout style and its parent is  ExposedDropdownMenu.
  3. Now the design part on the activity layout page.

    On the activity layout, we have used the style attribute on the TextInputLayout which acts as a drop-down menu.
  4.  Last but not the least coding part in MainActivity.kt file:

    In the MainActivity.kt file we have used a list of animals to be used as dummy data (you can change the data as per your need) the custom adapter for out drop-down menu. To set the selected item on ourAutoCompleteTextView we are getting the name from position selected from onItemClickLister.

 

The Design Looks like this:

 

. . . . . . . . . .

That’s it from my side for today, thanks for reading it until now.

author
. . .

Leave a Comment

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


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home