title: Contact Bubble EditText
body: <p>I am trying to create contact bubbles in the <code>MultiAutoCompleteTextView</code> similiar to how it is implemented in the Google+ app. Below is a screen shot:</p>
  
  <p><img src="https://i.stack.imgur.com/clY7U.png" alt="Google+ Compose Post Screenshot">
   .</p>
  
  <p>I have tried to extend the <code>DynamicDrawableSpan</code> class in order to get a spannable drawable in the background of a span of text</p>
  
  <pre><code>public class BubbleSpan extends DynamicDrawableSpan {
    private Context c;
  
    public BubbleSpan(Context context) {
      super();
      c = context;
    }
  
    @Override
    public Drawable getDrawable() {
      Resources res = c.getResources();
      Drawable d = res.getDrawable(R.drawable.oval);
      d.setBounds(0, 0, 100, 20);
      return d;
    }
  }
  </code></pre>
  
  <p>Where my oval.xml drawable is defined as so:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"&gt;
    &lt;solid android:color="#352765"/&gt;
    &lt;padding android:left="7dp" android:top="7dp"
      android:right="7dp" android:bottom="7dp" /&gt;
    &lt;corners android:radius="6dp" /&gt;
  &lt;/shape&gt;
  </code></pre>
  
  <p>In my Activity class that has the <code>MulitAutoCompleteTextView</code>, I set the bubble span like so:</p>
  
  <pre><code>final Editable e = tv.getEditableText();
  final SpannableStringBuilder sb = new SpannableStringBuilder();
  sb.append("some sample text");
  sb.setSpan(new BubbleSpan(getApplicationContext()), 0, 6, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  e.append(sb); 
  </code></pre>
  
  <p>However, instead of the oval shape displaying behind the first 6 characters in the string, the characters are not visible and there is no oval drawable in the background.</p>
  
  <p>If i change the BubbleSpan's getDrawable() method to use a .png instead of a shape drawable:</p>
  
  <pre><code>public Drawable getDrawable() {
    Resources res = c.getResources();
    Drawable d = res.getDrawable(android.R.drawable.bottom_bar);
    d.setBounds(0, 0, 100, 20);
    return d;
  }
  </code></pre>
  
  <p>Then the .png will show up but the characters in the string that are a part of the span will not show up.  How can I make it so that the characters in the span are displayed in the foreground, meanwhile a custom shape drawable gets displayed in the background?</p>
  
  <p>I attempted to also use an <code>ImageSpan</code> instead of subclassing <code>DynamicDrawableSpan</code> but was unsuccessful.</p>