Handle SpannableStringBuilder image in android

Question

I am developing an application in which selected contacts are added to EditText with aclose mark image and when I click on that close mark image the contact should be removed. I have completed code upto showing close mark image but I don't know how to handle those close mark images. Please suggest me how.

My code:

for (int i = 0; i < selectedItems.size(); i++) {
                    String na = selectedItems.get(i);
                    TextView tv = createContactTextView(na);
                    BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
                    bd.setBounds(0, 0, bd.getIntrinsicWidth(),
                            bd.getIntrinsicHeight());
                    sb.append(na + ",");
                    sb.setSpan(new ImageSpan(bd), sb.length()
                            - (na.length() + 1), sb.length() - 1,
                            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                }

                txt.setText(sb);

private Object convertViewToDrawable(TextView 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);
    }

    private TextView createContactTextView(String text) {
        TextView tv = new TextView(this);
        tv.setText(text);
        tv.setTextSize(25);
        tv.setBackgroundResource(R.drawable.oval_small);
        tv.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.close, 0);
        return tv;
    }

Answer 1

ClickableSpan is what you want:

for (int i = 0; i < selectedItems.size(); i++) {
     String na = selectedItems.get(i);
     TextView tv = createContactTextView(na);
     BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
     bd.setBounds(0, 0, bd.getIntrinsicWidth(),bd.getIntrinsicHeight());
     sb.append(na + ",");
     sb.setSpan(new ImageSpan(bd), sb.length()
          - (na.length() + 1), sb.length() - 1,
          Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

     final int index = i;  
     sb.setSpan(new ClickableSpan() {
                @Override
                public void onClick(View widget) {
                    // here add your code
                    // delete your selectedItems[index]
                    // recreate your SpannedString and set to txt
                }
            }, sb.length()
                    - (na.length() + 1), sb.length() - 1,
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
 }

 txt.setText(sb);
 txt.setMovementMethod(LinkMovementMethod.getInstance());  // important

Do not forget the last line

Answer 2

The best way to do what you are trying to do is to use the AOSP* "official" Chips library.

For instance, when you start entering a number in the default sms app, this will show a list of possible matching contacts. Once you select a contact or the number matches one, then it will turn into a "chip", with an 'x' button to remove it from the receiver list.

To obtain this behaviour, use this library, directly from the AOSP: https://android.googlesource.com/platform/frameworks/opt/chips/+/master

A brief explanation can be found here, by Roman Nurik, an Android Developer Advocate working at Google: https://plus.google.com/+RomanNurik/posts/WUd7GrfZfiZ

*AOSP stands for Android Open Source Project