AutoCompleteTextView in Android
AutoCompleteTextView is an editable text view that shows completion suggestions. It provides suggestions automatically when the user is typing. Suggestion will be shown in dropdown from where user can select any item and replace the content of editbox.
User can dismiss dropdown by pressing back button or by selecting any item from the list. Suggestions will be based on the value given in adapter.
If we want to use AutoCompleteTextView, first we need to create it in xml file.
|
1 2 3 |
<AutoCompleteTextView android:id="@+id/actvColor" android:layout_width="match_parent" android:layout_height="wrap_content" /> |
After that create a refrence of AutoCompleteTextView in your Activity/Fragment :
|
1 2 |
private AutoCompleteTextView actvColor; actvColor=(AutoCompleteTextView)findViewById(R.id.actvColor); |
Now we need to set values in adapter for AutoCompleteTextView :
|
1 2 3 4 5 6 7 8 |
ArrayList<String> colorList=new ArrayList<>(); colorList.add("Blue"); colorList.add("Red"); colorList.add("Green"); colorList.add("Black"); colorList.add("White"); actvColor.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,colorList)); |
with above code user will be able to get suggetions after writting two letters which is default threshold. If user want suggestions after writting first letter itself, we need to set threshold value to 1.
|
1 |
actvColor.setThreshold(1); |
Click Events in AutoCompleteTextView
Same as ListView here also onItemClickListener will be called when user click on item from dropdown list.
|
1 2 3 4 5 6 |
actvColor.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(MainActivity.this, "clicked " + position, Toast.LENGTH_SHORT).show(); } }); |
AutoCompleteTextView with custom layout
In above code we have seen basics of AutoCompleteTextView, now we will see how can we use AutoCompleteTextView with custom layout.
create row_item.xml for dropdown row.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:textColor="@android:color/holo_red_dark" android:padding="10dp" android:layout_height="wrap_content" /> </LinearLayout> |
create adapter with custom layout, we need to define layout name as well as textview id.
|
1 |
actvColor.setAdapter(new ArrayAdapter<String>(this,R.layout.row_item,R.id.textView,colorList)); |
AutoCompleteTextView with custom adapter
First we will create custom model class named ColorModel.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
public class ColorModel { int id,colorId; public int getId() { return id; } public void setId(int id) { this.id = id; } public int getColorId() { return colorId; } public void setColorId(int colorId) { this.colorId = colorId; } public String getColorName() { return colorName; } public void setColorName(String colorName) { this.colorName = colorName; } String colorName; } |
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
public class MainActivity extends Activity { private AutoCompleteTextView actvColor; ArrayList<ColorModel> colorList=new ArrayList<>(); AutoCompleteAdapter adapter; String colorArray[]=new String[]{"Black","Red","Green","Blue","White"}; int colorIds[]=new int[]{Color.BLACK,Color.RED,Color.GREEN,Color.BLUE,Color.WHITE}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); actvColor=(AutoCompleteTextView)findViewById(R.id.actvColor); actvColor.setThreshold(1); for(int i=0;i<colorArray.length;i++) { ColorModel model=new ColorModel(); model.setId(i+1); model.setColorName(colorArray[i]); model.setColorId(colorIds[i]); colorList.add(model); } adapter=new AutoCompleteAdapter(this,R.layout.row_item,colorList); actvColor.setAdapter(adapter); actvColor.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { ColorModel model=(ColorModel)view.getTag(); Toast.makeText(MainActivity.this,"Clicked " + model.getColorName(),Toast.LENGTH_LONG).show(); } }); } } |
AutoComplteAdapter.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
public class AutoCompleteAdapter extends ArrayAdapter<ColorModel> { private ArrayList<ColorModel> list; Context context; LayoutInflater inflater; int resource; public AutoCompleteAdapter(Context context, int resource, ArrayList<ColorModel> list) { super(context, resource); this.context = context; this.resource = resource; this.list = list; inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } @Override public View getView(int position, View view, ViewGroup parent) { if (view == null) { view = inflater.inflate(resource, null); } ColorModel model=getItem(position); TextView textView = (TextView) view.findViewById(R.id.textView); TextView textViewColor = (TextView) view.findViewById(R.id.txtColorCode); textView.setText(model.getColorName()); textViewColor.setBackgroundColor(model.getColorId()); view.setTag(model); return view; } @Override public Filter getFilter() { return nameFilter; } Filter nameFilter = new Filter() { @Override public String convertResultToString(Object resultValue) { String str = ((ColorModel) (resultValue)).getColorName(); return str; } @Override protected FilterResults performFiltering(CharSequence constraint) { if (constraint != null) { ArrayList<ColorModel> suggestions = new ArrayList<>(); for (ColorModel color : list) { if (color.getColorName().toLowerCase().startsWith(constraint.toString().toLowerCase())) { suggestions.add(color); } } FilterResults filterResults = new FilterResults(); filterResults.values = suggestions; filterResults.count = suggestions.size(); return filterResults; } else { return new FilterResults(); } } @Override protected void publishResults(CharSequence constraint, FilterResults results) { clear(); if (results != null && results.count > 0) { // we have filtered results addAll((ArrayList<ColorModel>) results.values); } notifyDataSetChanged(); } }; } |
Download source code from Github.
Ravi Rupareliya
He is author of Android Gig. He loves to explore new technologies and have worked on Android, React Native, Action on Google and Flutter.
Latest posts by Ravi Rupareliya (see all)
- Dialogflow Entities With Actions on Google - May 7, 2020
- Actions on Google Using Cloud Functions - February 3, 2020
- Create WhatsApp Stickers Android Application - April 19, 2019