Read More
Redeem Now
Read now

Floating label spinner using Material AutocompleteTexView

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.

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close