Tagging keywords in a textinput in android

Question

I would like to have a field similar to what this provides (http://aehlke.github.io/tag-it/) but in an Android app. Does anyone know of an implementation or what I should do to make this work in Android? I have browsed and found nothing. I am new to Android

Answer 1

Ok I found a good solution I tweaked and simplified a bit, it is here: http://www.kpbird.com/2013/02/android-chips-edittext-token-edittext.html

Basically I extended the MultiAutoCompleteTextView. I also created a custom separator for using space, but this is not of importance and can be found elsewhere. I have commented in code where this should be changed to a comma.

I added a custom TextWatcher implementation where I implemented the onTextChange method to run the method I called bubbleWord() (mostly taken from the above mentioned source)

private void bubbleWord() {
    int numberOfBubbles = 0;

    String triggersString = getText().toString();
            //note that I use space as a separator
    if (triggersString.contains(" ")) {
        SpannableStringBuilder ssb = new SpannableStringBuilder(
                getText());
        BubbleMultiAutoCompleteTextView.this
                .setTriggersArray(triggersString.trim().split(" "));

        String[] triggers = BubbleMultiAutoCompleteTextView.this
                .getTriggers();
        for (String trigger : triggers) {
            LayoutInflater lf = (LayoutInflater) getContext()
                    .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            TextView textView = (TextView) lf.inflate(
                    R.layout.bubble_edit, null);
            textView.setText(trigger); // set text
            int spec = MeasureSpec.makeMeasureSpec(0,
                    MeasureSpec.UNSPECIFIED);
            textView.measure(spec, spec);
            textView.layout(0, 0, textView.getMeasuredWidth(),
                    textView.getMeasuredHeight());
            Bitmap b = Bitmap.createBitmap(textView.getWidth(),
                    textView.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(b);
            canvas.translate(-textView.getScrollX(),
                    -textView.getScrollY());
            textView.draw(canvas);
            textView.setDrawingCacheEnabled(true);
            Bitmap cacheBmp = textView.getDrawingCache();
            Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888,
                    true);
            textView.destroyDrawingCache(); // destory drawable
            // create bitmap drawable for imagespan
            @SuppressWarnings("deprecation")
            BitmapDrawable bmpDrawable = new BitmapDrawable(viewBmp);
            bmpDrawable.setBounds(0, 0,
                    bmpDrawable.getIntrinsicWidth(),
                    bmpDrawable.getIntrinsicHeight());
            // create and set imagespan
            ssb.setSpan(new ImageSpan(bmpDrawable), numberOfBubbles,
                    numberOfBubbles + trigger.length(),
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            numberOfBubbles = numberOfBubbles + trigger.length() + 1;
        }
        // set chips span
        setText(ssb);
        // move cursor to last
        setSelection(getText().length());
    }
}

In the layout folder this file was included (same as before, almost the same as the source but a bit different):

<?xml version="1.0" encoding="UTF-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/edtTxt1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#9191B5"
    android:drawablePadding="2dp"
    android:drawableRight="@drawable/exclamation_octagon_fram"
    android:padding="8dp"
    android:shadowColor="#FFFFFF"
    android:shadowDy="1"
    android:shadowRadius="0.01"
    android:textColor="#FFFFFF"
    android:textSize="18sp"
    android:textStyle="bold" />

Please let me know if anyone needs this and I have forgotten something.