Contact Bubble EditText
- by toobsco42
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.
