Display string as a multiple tag in a single TextView

Question

The first thing, I know how to split the string and my question is not about splitting it at comma or space.

I have a string like this:

"hello,nice,owesome"

and I want to display it like this:

This is how I separate my string:

ArrayList<String> list = Arrays.asList(str.split(","));

now I have separated greeting list, but I don't know how to display this list as multiple tags in a single TextView.

Seems like you require [something like this](https://github.com/splitwise/TokenAutoComplete) ? — android_griezmann, Dec 14 '16 at 07:32
yes, exactly like this but this one is displaying in a single textview. — Sagar Chavada, Dec 14 '16 at 07:34
no idea how to apply SpannableString as a multiple tag. can you give me hint. — Sagar Chavada, Dec 14 '16 at 07:41
@SagarChavada `but I don't know how to display those list as multiple tags in a single textview` you have mentioned in question this... You indeed need the tags in single textview. — android_griezmann, Dec 14 '16 at 07:41
have you tried chips view look at this https://github.com/adhiman007/ChipView — Nas, Dec 14 '16 at 07:42
@SagarChavada sure here you go http://stackoverflow.com/a/26092544/3111083 .. But you need to make adjustments ,if you want to make it like your need. — Sunil Sunny, Dec 14 '16 at 07:43

score 1 · Accepted Answer · edited Oct 01 '20 at 22:32

create your chip layout like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_chip"
    android:gravity="center"
    android:paddingLeft="4dp"
    android:paddingRight="4dp">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_chip"
    android:gravity="center"
    android:paddingBottom="6dp"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:paddingTop="6dp">

    <TextView
        android:id="@+id/chip_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="6dp"
        android:text="#SoftwereEngineer"
        android:textColor="@android:color/white"
        android:textSize="14sp" />

</LinearLayout>
</LinearLayout>

Then create a container where you want to add these chips

 <LinearLayout
    android:id="@+id/chip_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_chip"
    android:gravity="center"
    android:orientation="horizontal"
    android:paddingBottom="4dp"
    android:paddingTop="4dp"/>

in you java file add the chips to this container

LinearLayout linearLayout = view.findViewById(R.id.chip_container);
for(int i = 0; i < list.size(); i++){
final View view = LayoutInflater.from(getActivity()).inflate(R.layout.item_chip, null);
    ((TextView) view.findViewById(R.id.chip_text)).setText(list.get(i));
    linearLayout.addView(view);
}

background_chip.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

     <solid android:color="#cac8c8"/>
     <corners android:radius="20dp"/>
</shape>

there is one problem, when i have 15 tags, its not print in second line. is there any way to print only 5 tag in one line, next five in second line. — Sagar Chavada, Dec 14 '16 at 09:09
use this layout instead of LinearLayout https://github.com/mitmel/Locast-Core-Android/blob/master/src/se/fnord/android/layout/PredicateLayout.java — Tabish Hussain, Dec 14 '16 at 09:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130592/discussion-between-tabish-hussain-and-sagar-chavada). — Tabish Hussain, Dec 14 '16 at 10:20
@TabishHussain, The spaces between the tags thing isnt working for me — , Nov 01 '17 at 11:42

score 1 · Answer 2 · answered Dec 14 '16 at 07:50

1

Try it with chips view. what you need is here

answered Dec 14 '16 at 07:50

Nas

2,158
1
21
38

Aldi Renaldi Gunawan · Answer 3 · 2016-12-14T08:41:54.410

1

just loop this for simple one :

String temp="";
String tagFront= "<font color='color code you want'>";
String tagBack = "</font>";
for(int i=0;i<list.size();i++){
     temp+=tagFront+list.get(i)+tagBack+" ";
}

YourtextView.setText(Html.fromHtml(temp));

i just add this, top code for text color, sorry for that try this :

    int count =0;
    List<String> list = new ArrayList<>();
    String str1 = "Hello";
    String str2 = "World";
    String str3 = "what's up?";
    String message = str1 + " " + str2 + " " + str3;

    list.add(str1);
    list.add(str2);
    list.add(str3);

    Spannable spannable = new SpannableString(message);

    for(int i=0;i<list.size();i++)
    {
        spannable.setSpan(new BackgroundColorSpan(Color.BLUE),count, list.get(i).length()+count, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        count = count + list.get(i).length() + 1;
    }

    respas.setText(spannable);

edited Dec 14 '16 at 08:41

answered Dec 14 '16 at 07:53

Aldi Renaldi Gunawan

490
1
4
12

i just add new code for the background color, u need to configure the looping. +1 on the length to jump the space " " added in strings – Aldi Renaldi Gunawan Dec 14 '16 at 08:37
let me know if it's helping, don't forget to Vote Up :D – Aldi Renaldi Gunawan Dec 14 '16 at 08:46
your answer is also good, can you tell me how to set border radius to that blue background, if its possible in your answer, i will approve your answer – Sagar Chavada Dec 14 '16 at 08:55
it's more complicated, you can't apply drawable inside BackgroundColorSpan(spannable). i suggest you to try Canvas draw – Aldi Renaldi Gunawan Dec 14 '16 at 09:04

Joyce · Answer 4 · 2016-12-14T07:43:55.607

0

Using HTML tags instead, like this:

edited Dec 14 '16 at 07:43

answered Dec 14 '16 at 07:32

Joyce

21
2

delete your answer, you first have to understand my question. – Sagar Chavada Dec 14 '16 at 07:36

Display string as a multiple tag in a single TextView

4 Answers4