Android: Autocomplete TextView Similar To The Facebook App

Question

I have an AutoCompleteTextView in my app. The app makes use of the Facebook SDK. I followed the code from this question on SO: https://stackoverflow.com/a/12363961/450534 to

Answer 1

First make your EditText into a MultiAutoCompleteTextView. A MultiAutoCompleteTextView allows you to replace certain parts of the text, for example text after '@'.

The you can do something like this:

final MultiAutoCompleteTextView inputEditText = (MultiAutoCompleteTextView) dialog.findViewById(R.id.MyEditText);

String[] COUNTRIES = new String[] { "Belgium", "France", "Italy", "Germany", "Spain" };
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_dropdown_item_1line, COUNTRIES);
inputEditText.setAdapter(adapter);
inputEditText.setThreshold(1); //Set number of characters before the dropdown should be shown

//Create a new Tokenizer which will get text after '@' and terminate on ' '
inputEditText.setTokenizer(new Tokenizer() {

  @Override
  public CharSequence terminateToken(CharSequence text) {
    int i = text.length();

    while (i > 0 && text.charAt(i - 1) == ' ') {
      i--;
    }

    if (i > 0 && text.charAt(i - 1) == ' ') {
      return text;
    } else {
      if (text instanceof Spanned) {
        SpannableString sp = new SpannableString(text + " ");
        TextUtils.copySpansFrom((Spanned) text, 0, text.length(), Object.class, sp, 0);
        return sp;
      } else {
        return text + " ";
      }
    }
  }

  @Override
  public int findTokenStart(CharSequence text, int cursor) {
    int i = cursor;

    while (i > 0 && text.charAt(i - 1) != '@') {
      i--;
    }

    //Check if token really started with @, else we don't have a valid token
    if (i < 1 || text.charAt(i - 1) != '@') {
      return cursor;
    }

    return i;
  }

  @Override
  public int findTokenEnd(CharSequence text, int cursor) {
    int i = cursor;
    int len = text.length();

    while (i < len) {
      if (text.charAt(i) == ' ') {
        return i;
      } else {
        i++;
      }
    }

    return len;
  }
});

One "problem" with this is that the popup will appear under the EditText view. To move it up and place it under the text that is currently written you can do something like this:

inputEditText.addTextChangedListener(new TextWatcher() {

  @Override
  public void onTextChanged(CharSequence s, int start, int before, int count) {
    Layout layout = inputEditText.getLayout();
    int pos = inputEditText.getSelectionStart();
    int line = layout.getLineForOffset(pos);
    int baseline = layout.getLineBaseline(line);

    int bottom = inputEditText.getHeight();

    inputEditText.setDropDownVerticalOffset(baseline - bottom);

  }

  @Override
  public void beforeTextChanged(CharSequence s, int start, int count, int after) {
  }

  @Override
  public void afterTextChanged(Editable s) {
  }
});

Note: This does not currently take care of the dropdown position in the case that there are more lines in the edittext than the edittext can show.