Skip to content
Advertisement

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" />

Advertisement

Answer

In your main activity you are doing like this.

@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);

Notice you are creating a new instance of chip i.e chip2 but you are making changes to chip not chip2 instance in the next lines so the chip2 is not affected with any changes you made before. So in order to fix this change your code like this

@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);
            chip2.setText("XYZ");  //chip2
            chip2.setChipBackgroundColorResource(R.color.colorAccent);
            chip2.setCloseIconVisible(true);
            chip2.setTextColor(getResources().getColor(R.color.white));
            chip2.setTextAppearance(R.style.ChipTextAppearance);


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

            chipGroup.addView(chip);
            chipGroup.addView(chip2);
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement