Question

In Email compose, when user types/selects email ids in to/cc/bcc.
Suppose there are 7-8 email ids and now user want to delete 3rd one.
It is very difficult for user to go to 3rd one and delete that one. So I think solution for this is,

1. User enters email id and hits SPACE or COMMA.
2. then one rectangular box should appear on background.
3. I want an cross mark on right corner of that rectangular box.
4. If user want to delete that 3rd email id,then he will just tap on cross mark of 3rd rectangle which contains that email id.

(please refer figure below from Yahoo email composer)

I need similar functionality. How can I achieve in android? Is there any standard component I can use? Currently I am using auto complete text view for To, Cc, Bcc. Please help. Thank you in advance.

Answer 1

I don’t have time to write up working code, but I will point you in the right direction. The key for doing funky things with text in standard components like EditText are called “spans”.

Suggested plan of attack:

1. Add a TextWatcher to your EditText so you know when the text changes.
2. Each time the text changes, scan the contents for anything matching an email address (suggest you use regex for this).
3. For each matched email address, generate a Bitmap equivalent using standard drawing APIs (i.e. create Canvas, measure text, draw background, draw text).
4. Instantiate an ImageSpan (this is kinda the key to the whole thing) using your bitmap as the constructor argument.
5. Replace the email address in the text with a single space character (say) and call setSpan() on that single character to have your ImageSpan replace it’s appearance.