3

I would like to have a custom Spannable class which somehow combines the behaviour of ImageSpan, BackgroundColorSpan and ClickableSpan. So basically something like the labels or bubbles plus a click handler. Or in other words: I need to place an icon in front of a word and draw a custom background behind that word. I dived through ReceipentEditor and other classes but couldn't find the ultimate hint yet.

I tried to accomblish this by extending DynamicDrawableSpan but this would replace the text and I don't want to bother drawing the text manually. What would be the best way to implement such a custom Spannable? Or is there a better way without using Spannables? Any tips or hints are appreciated!

Community
  • 1
  • 1
Brian
  • 2,130
  • 22
  • 29
  • I am doing something similiar HERE http://stackoverflow.com/questions/10812316/contact-bubble-edittext – Etienne Lawlor May 30 '12 at 08:07
  • @toobsco42 this is pretty much what I want. You also got the same problem I have ;) From what I've seen so far, it looks like you need to render the text in order to overlay the background drawable. – Brian May 30 '12 at 13:53
  • how exactly do you render text to overlay the background drawable? – Etienne Lawlor May 30 '12 at 19:23
  • @toobsco42 I haven't done it so far. But I guess you would need to extend `BitmapDrawable` and overwrite `draw()`. There you have access to `Canvas.drawText()`. The tricky part might be to figure out the right font and text size. – Brian Jun 01 '12 at 11:09
  • 1
    I came across [this tutorial](http://krishnalalstha.wordpress.com/2012/06/07/making-gosmsproevernote-like-edittext/) and it was exactly what I needed. Hope it helps you too. – robisaks Jun 25 '12 at 15:06

1 Answers1

2

I implemented something similar. In my implementation, clicking on a bubble will delete it. To do so, I just use ImageSpan for the TextView. Then add an OnClickListener to the TextView.

Inside the OnClickListener, obtain the cursor position with getSelectionStart(). Determine which ImageSpan the position is associated with. Rebuild and redraw the TextView without that ImageSpan entry.

radium22
  • 155
  • 1
  • 9
  • I didn't think of this :-) Well, this could work out. But actually it would be nicer to have a _componented_ Spannable which eleminates the need to do stuff in the overlaying TextView – Brian Apr 20 '12 at 06:56
  • 2
    How do you use an ImageSpan for the EditText view? I tried like this: final Editable e = tv.getEditableText(); final SpannableStringBuilder sb = new SpannableStringBuilder(); sb.append(text); sb.setSpan(new ImageSpan(this, R.drawable.background_span), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); However this the span of characters in "text" show up as invisible. My background_span.xml is a shape drawable. – Etienne Lawlor May 28 '12 at 22:02
  • I am also Tried with Recipient Editor Class. But my problem is i am adding Extra Text if i have More chips in my edit text. So this count is repeating in higher end devices.. if i added +2 for extra 2 contatcs. it is coming +2+2 in higher end devices.. @radium22 – AndroidDev Sep 13 '13 at 07:58