How to display all the elements of ArrayList as Chips in Android

user_7004388 0
Viewed 3883

I have an ArrayList<String> like this [Angularjs, JavaScript, Css]

In my Adapter where I get the ArrayList of tags from another Intent. I tried to display all the elements of the ArrayList as Chips with the below approach, but I get only the last element of the ArrayList. I only see one Chip with the last element of the ArrayList. 

for (String tag: card.getTags()) {
  Log.d(TAG, "tag - " + tag);
  holder.tags.setText(tag);
}

Could anyone please guide, how do I change my code to display all the elements of the ArrayList as Chips.

android-chips arraylist android java
2 Answers

If you are talking about Chips.

Add a ChipGroup in xml layout where you want to show your chips 

<com.google.android.material.chip.ChipGroup
 android:id="@+id/chipGroup"
 android:layout_width="match_parent"
 app:chipSpacingVertical="2dp"
 android:layout_height="wrap_content"/>

Now you can use this method to add your ArrayList as Chip in ChipGroup : 

private void addChip(String pItem, ChipGroup pChipGroup) {
    Chip lChip = new Chip(this);
    lChip.setText(pItem);
    lChip.setTextColor(getResources().getColor(R.color.primary_text));
    lChip.setChipBackgroundColor(getResources().getColorStateList(R.color.chip_bg));

    pChipGroup.addView(lChip, pChipGroup.getChildCount() - 1);
  }
user_43779540

Currently, you're replacing tags in your forEach Loop of the holder. You have only one holder and keep updating that till loop ends; that's the reason you have last chip/tag

If you are referring to ChipGroup of MaterialComponents.

ChipGroup chipGroup = new ChipGroup(parentView.getContext());

String[] genres = {"Thriller", "Comedy", "Adventure"};
for(String genre : genres) {
   Chip chip = new Chip(parentView.getContext());
   chip.setText(genre);
   chipGroup.addView(chip);
}

I assume you must be using RecyclerView as I see the holder in your snippet.

Following is the view hierarchy; I am assuming you are trying to achieve; if not then you can use the same line of logic to move around those pieces

  • RecyclerView
    • Each Item/View
      • Tags - Multiple Tag using FlowLayout - Adding multiple tags in view

You need to bind each item in your RecyclerView.

@Override
public void onBindViewHolder(final YourViewHolder holder, final int position) {
    ...
    // assuming you have FlowLayout in recyclerview view item
    // do add holder pattern to flowlayout as well
    fillAutoSpacingLayout(card.getTags(), holder.flowLayout);
}

Here I'm using FlowLayout to add chips or tags inside each view of RecyclerView.

Binding each item/View inside onBindViewHolder:

private void fillAutoSpacingLayout(ArrayList<String> tags, FlowLayout flowLayout) {

    for (String tag : tags) {
        TextView textView = buildLabel(tag);
        flowLayout.addView(textView);
    }
}

private TextView buildLabel(String text) {
    TextView textView = new TextView(this);
    textView.setText(text);
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
    textView.setPadding((int)dpToPx(16), (int)dpToPx(8), (int)dpToPx(16), (int)dpToPx(8));
    textView.setBackgroundResource(R.drawable.label_bg);

    return textView;
}

private float dpToPx(float dp){
    return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}

Moreover, you can refer to this SO question as it's on the same lines.

user_15435410
Related