Setting multiple custom elements to MultiAutoCompleteTextView : Android

Question

Continuing from my previous post, I was able to set multiple elements to the MultiAutoCompleteTextView but I was not able to wrap those items with custom background and close button as in that link picture.

I was able to do the same with single element but for multiple, ran out of luck.

This is what I tried.

// set text to MultiAutoCompleteTextView

private void setTextSample(String contactName) {

    final SpannableStringBuilder sb = new SpannableStringBuilder();
    TextView tv = (TextView) LayoutInflater.from(this).inflate(R.layout.textview, null);
    tv.setText(contactName);
    BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
    bd.setBounds(0, 0, bd.getIntrinsicWidth(), bd.getIntrinsicHeight());

    sb.append(contactName + ",");
    sb.setSpan(new ImageSpan(bd), sb.length()-(contactName.length()+1), 
            sb.length()-1,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    mMultiAutoCompleteTextView.setText(sb);
}

// wrap text with custom elements

private static Object convertViewToDrawable(View view) {
  int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
  view.measure(spec, spec);
  view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
  Bitmap b = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(),
            Bitmap.Config.ARGB_8888);
  Canvas c = new Canvas(b);
  c.translate(-view.getScrollX(), -view.getScrollY());
  view.draw(c);
  view.setDrawingCacheEnabled(true);
  Bitmap cacheBmp = view.getDrawingCache();
  Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888, true);
  view.destroyDrawingCache();
  return new BitmapDrawable(viewBmp);
}

Any help is greatly appreciated.

Edit :

If I do

mMultiAutoCompleteTextView.setText(mMultiAutoCompleteTextView.getText().toString()+", "+sb);

I am getting multiple texts but they are not wrapped with custom background. Not getting where I am going wrong.

Edit :

Sample multiple elements would look something like this

Answer 1

try this:

class MyMultiAutoCompleteTextView extends MultiAutoCompleteTextView {

    public MyMultiAutoCompleteTextView(Context context) {
        super(context);
    }

    @Override
    protected void replaceText(CharSequence text) {
        Log.d(TAG, "replaceText " + text.getClass() + " " + text);
        super.replaceText(getSpanned(text.toString()));
    }
}

private Spanned getSpanned(String name) {
    TextView tv = (TextView) LayoutInflater.from(this).inflate(R.layout.test, null);
    tv.setText(name);
    SpannableStringBuilder sb = new SpannableStringBuilder(name);
    sb.setSpan(new ViewReplacementSpan(tv), 0, sb.length(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

class ViewReplacementSpan extends DynamicDrawableSpan {
    private View v;
    private Drawable drawable;

    public ViewReplacementSpan(View v) {
        super(ALIGN_BOTTOM);
        this.v = v;
        int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        v.measure(spec, spec);
        v.layout(0, 0, v.getMeasuredWidth(), v.getMeasuredHeight());
        drawable = new SpanDrawable();
        drawable.setBounds(0, 0, v.getMeasuredWidth(), v.getMeasuredHeight());
    }

    @Override
    public Drawable getDrawable() {
        return drawable;
    }

    class SpanDrawable extends Drawable {
        @Override
        public void draw(Canvas canvas) {
            canvas.clipRect(getBounds());
            v.draw(canvas);
        }

        @Override
        public void setAlpha(int alpha) {
        }

        @Override
        public void setColorFilter(ColorFilter cf) {
        }

        @Override
        public int getOpacity() {
            return PixelFormat.TRANSLUCENT;
        }
    }
}

test it with the following in onCreate():

LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);

MultiAutoCompleteTextView mactv = new MyMultiAutoCompleteTextView(this);
ArrayAdapter<Spanned> a = new ArrayAdapter<Spanned>(this, android.R.layout.simple_dropdown_item_1line);
String[] names = { "Jane", "John", "Mary", "Mark" };
for (String name: names) {
    a.add(getSpanned(name));
}

Tokenizer tokenizer = new MultiAutoCompleteTextView.CommaTokenizer();
mactv.setTokenizer(tokenizer);
mactv.setAdapter(a);
mactv.setThreshold(1);
SpannableStringBuilder sb = new SpannableStringBuilder();
for (int i = 0; i < 2; i++) {
    sb.append(tokenizer.terminateToken(a.getItem(i)));
}
mactv.setText(sb);
ll.addView(mactv);

TextView tv = new TextView(this);
tv.setGravity(Gravity.CENTER);
tv.setText("try: Jane, John, Mary or Mark");
tv.setTextSize(32);
ll.addView(tv);
setContentView(ll);

Answer 2

I think you have problem here:

mMultiAutoCompleteTextView.setText(mMultiAutoCompleteTextView.getText().toString()+", "+sb);

When you call mMultiAutoCompleteTextView.getText().toString(), you convert your spannableString to ordinary string, which can't hold background or smth else.

Try to save your current SpannableStringBuilder somewhere and work like that:

mBuilder.append(sb);
  mMultiAutoCompleteTextView.setText(mBuilder);