javaandroidxmlandroid-layoutandroid-chips

Dynamically add chips to chipgroup


I'm trying to add several chips to the chip group dynamically. The first one appears fine but others do not appear properly. But when I do it using XML it works fine.

The last chip added is small, grey, and has no text. It should be orange and contain text like the first three.

activity_main.xml

<HorizontalScrollView
            android:layout_width="350dp"
            android:layout_height="wrap_content"
            android:scrollbars="none"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/chips_select"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:layout_constraintVertical_bias="0.51">
    <com.google.android.material.chip.ChipGroup
                android:id="@+id/chip_group_main"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="2dp"
                app:chipSpacingHorizontal="4dp">
        <com.google.android.material.chip.Chip
                    style="@style/ChipTextAppearance"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello"
                    app:chipBackgroundColor="@color/colorAccent"
                    app:closeIconEnabled="true" />
        <com.google.android.material.chip.Chip
                    style="@style/ChipTextAppearance"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="World"
                    app:chipBackgroundColor="@color/colorAccent"
                    app:closeIconEnabled="true" />
    </com.google.android.material.chip.ChipGroup>
</HorizontalScrollView>

In MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  Chip chip = new Chip(this);
  chip.setText("ABC");
  chip.setChipBackgroundColorResource(R.color.colorAccent);
  chip.setCloseIconVisible(true);
  chip.setTextColor(getResources().getColor(R.color.white));
  chip.setTextAppearance(R.style.ChipTextAppearance);

  Chip chip2 = new Chip(this);
  chip.setText("XYZ");
  chip.setChipBackgroundColorResource(R.color.colorAccent);
  chip.setCloseIconVisible(true);
  chip.setTextColor(getResources().getColor(R.color.white));
  chip.setTextAppearance(R.style.ChipTextAppearance);

  ChipGroup chipGroup = findViewById(R.id.chip_group_main);

  chipGroup.addView(chip);
  chipGroup.addView(chip2);
}

style.xml

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="ChipTextAppearance" parent="TextAppearance.MaterialComponents.Chip">
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">12sp</item>
    </style>
</resources>

standalone_chip.xml

<?xml version="1.0" encoding="utf-8"?>
<chip
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:chipBackgroundColor="@color/colorAccent"
    app:closeIconEnabled="true"
    style="@style/ChipTextAppearance"
    app:closeIconTint="@android:color/white" />

Solution

  • In Kotlin :

    // add chip group dynamically
            item.itemData.projectTags.forEach { tagName ->
                binding.tagChipGroup.addView(createTagChip(context, tagName))
            }
    

    // created seaprate method to create chips with attributes.

    private fun createTagChip(context: Context, chipName: String): Chip {
        return Chip(context).apply {
            text = chipName
            setChipBackgroundColorResource(R.color.purple_500)
            isCloseIconVisible = true
            setTextColor(ContextCompat.getColor(context, R.color.white))
            setTextAppearance(R.style.ChipTextAppearance)
        }
    
    }
    

    enter image description here