TextView with different style for each word

Question

I try to display a TextView with a "chips" style for each word. In other words I would like to have this Splitwise TokenAutoComplete not editable and not autocomplete.

So I have a drawable for my style :

muscle_token_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/primary_dark" />
<corners
    android:topLeftRadius="5dp"
    android:bottomLeftRadius="5dp"
    android:topRightRadius="5dp"
    android:bottomRightRadius="5dp" />
</shape>

I have my style which use the drawable :

themes.xml

<resources>
    <style> 
        .....
    </style>
    <style name="textview_chips" parent="@android:style/TextAppearance.Medium">
        <item name="android:background">@drawable/muscle_token_background</item>
    </style>
</resources>

And the solution I found is to used a SpannableStringBuilder with SyleSpan :

SpannableStringBuilder sb = new SpannableStringBuilder(myString);
int currentCharCount = sb.length();
sb.append(myString.trim());
int nextCharCount = sb.length();
sb.setSpan(new StyleSpan(R.style.textview_chips), currentCharCount, nextCharCount, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
myTextView.setText(sb);

But the TextView only become italic.

I tried with an other TextView in a XML file and the background drawable is well displayed

    <TextView
    ...
    style="@style/textview_chips"
    ... />

So how can I do to apply this style for each word of my TextView ?

`StyleSpan` is not for applying style resources as you've defined in your `styles.xml`. It is for making text bold, italic, both bold and italic, or normal. The constructor expects values defined in the `Typeface` class, which correspond to the bold/italic/etc states. Depending on what background you want, there may be a different kind of span that will work (for instance `BackgroundColorSpan`), but you'll have to provide some more information. — Karakuri, Jul 25 '15 at 19:42

score 0 · Accepted Answer · edited May 23 '17 at 11:51

I finally did it !

MyUtils.class

    public static Object convertViewToDrawable(View view) {
    int spec = View.MeasureSpec.makeMeasureSpec(0, View.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);
}

MyActivity

String regex = "\\w+";
Pattern p = Pattern.compile(regex);
Matcher matcher = p.matcher(myString);
SpannableStringBuilder sb = new SpannableStringBuilder(myString);
while (matcher.find()) {
        final LayoutInflater layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        final View parent =  (View) layoutInflater.inflate(R.layout.muscle_token, null);
        final TextView oneWord =  (TextView) parent.findViewById(R.id.muscle_name); // The TextView to convert into Drawable
        final int begin = matcher.start();
        final int end = matcher.end();
        float pixels = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics());
        oneWord.setTextSize(pixels);
        oneWord.setText(concatString.substring(begin, end).toString());
        BitmapDrawable bd = (BitmapDrawable) MyUtils.convertViewToDrawable(oneWord);
        bd.setBounds(0, 0, bd.getIntrinsicWidth(),bd.getIntrinsicHeight());
        sb.setSpan(new ImageSpan(bd), begin, end, 0);
 }
 myTextView.setText(sb);

muscle_token.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content">

<TextView android:id="@+id/muscle_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/muscle_token_background"
    android:padding="5dp"
    android:textColor="@color/icons"
    android:textSize="15sp" />

</LinearLayout>

Thanks to How can I use onTouchListeners on each word in a TextView? https://krishnalalstha.wordpress.com/2012/06/07/making-gosmsproevernote-like-edittext/

TextView with different style for each word

1 Answers1