Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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" />
like image 239
Syed Umair Avatar asked May 17 '20 05:05

Syed Umair


People also ask

How do I add chips in ChipGroup programmatically?

The easiest way to add chips to an Android app is to simply drop them into a linear layout in XML. By default, they are set up to trigger an action when clicked or tapped. In the XML, chips can also be added to a chip group.

What is chip group in Android Studio?

A ChipGroup is used to hold multiple Chip s. By default, the chips are reflowed across multiple lines. Set the app:singleLine attribute to constrain the chips to a single horizontal line. If you do so, you'll usually want to wrap this ChipGroup in a HorizontalScrollView .


1 Answers

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);
like image 140
AgentP Avatar answered Sep 28 '22 17:09

AgentP