Auto Complete Hint with Material in Android

Viewed 933

I read doc in material-text-field and there is auto-complete-textView on editText as hint not dropdown. You can see image below. But I can't do it. I try some code with textinputlayout and material-auto-complete-text like this

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/til"
        ..>
               
    <com.google.android.material.textfield.MaterialAutoCompleteTextView
       .../>


</com.google.android.material.textfield.TextInputLayout>

in fragment

    ArrayList<String> items = new ArrayList<>();
    items.add("Material");
    items.add("Design");
    items.add("Components");

    ArrayAdapter<String> adapter = new ArrayAdapter<>(this,R.layout.item, items);
    TextInputLayout textInputLayout = findViewById(R.id.til);

and set adapter

((MaterialAutoCompleteTextView) textInputLayout.getEditText()).setAdapter(adapter);
    ((MaterialAutoCompleteTextView) textInputLayout.getEditText()).setText(adapter.getItem(1),false);

BUT the auto-complete-textview is suggesting the item on dropdown not on editText as a hint.

I want AutoComplete as "AutoC" must be text and "omplete" must be hint

How can I do it ??

enter image description here

1 Answers

EDIT:

Is the following what you are looking for? (It will set the hint depending on the user input. But this cannot be used for actual Auto completion, since you cannot change the suggestions on your keyboard, as far as I know):

TextInputEditText editText = ((TextInputEditText) textInputLayout.getEditText());
editText.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {}

    @Override
    public void afterTextChanged(Editable s) {
        try {
            String userInput = s.toString();
            userInput = userInput.trim().toLowerCase();

            String match = null;
            for (String item : items) {
                if (item == null) continue;
                String fItem = item.trim().toLowerCase();
                if (fItem.startsWith(userInput)) {
                    match = item;
                    break;
                }
            }
            if (match == null) editText.setHint(""); // Insert your default hint text here
            else editText.setHint(match);
        } catch (Throwable tr) {
            tr.printStackTrace();
        }
    }
});

PREVIOUS

add the following as an attribute to your TextInputLayout:

style="@style/Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu"

also did you implement your list_item.xml (which you called 'item' (R.layout.item from your code)) correctly?


That's what it says on the official page:

In the layout:

<com.google.android.material.textfield.TextInputLayout
    ...
    style="@style/Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu">
​
    <AutoCompleteTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="none"
    />
​
</com.google.android.material.textfield.TextInputLayout>

In code:

val items = listOf("Material", "Design", "Components", "Android")
val adapter = ArrayAdapter(requireContext(), R.layout.list_item, items)
(textField.editText as? AutoCompleteTextView)?.setAdapter(adapter)

In the item layout (list_item.xml):

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceSubtitle1"
/>

(https://material.io/components/text-fields/android#using-text-fields)

Related