I am trying to create contact bubbles in the MultiAutoCompleteTextView similiar to how it is implemented in the Google+ app. Below is a screen shot:

.

I have tried to extend the DynamicDrawableSpan class in order to get a spannable drawable in the background of a span of text

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;
  }
}

Where my oval.xml drawable is defined as so:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
  <solid android:color="#00000000"/>
  <stroke android:width="4dp" android:color="#99000000"
        android:dashWidth="4dp" android:dashGap="2dp" />
  <padding android:left="7dp" android:top="7dp"
        android:right="7dp" android:bottom="7dp" />
  <corners android:radius="4dp" />
</shape>

In my Activity class that has the MulitAutoCompleteTextView, I set the bubble span like so:

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); 

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.

If i change the BubbleSpan's getDrawable() method to use a .png instead of a shape drawable:

public Drawable getDrawable() {
  Resources res = c.getResources();
  Drawable d = res.getDrawable(android.R.drawable.bottom_bar);
  d.setBounds(0, 0, 100, 20);
  return d;
}

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?

I attempted to also use an ImageSpan instead of subclassing DynamicDrawableSpan but was unsuccessful.