CODEWITHSUNDEEP
androidmaterial-componentsmaterial-components-androidandroid-chips
Pratik Butani
Pratik Butani

Reputation: 62421

Android Material Chip - ChipGroup with singleSelection doesn't work adding chips dynamically

I am using Material Chip for first time.

Problem: I am adding chip dynamically using following code. Please check I wrote app:singleSelection="true" which is important for me. Even though its selecting multiple chips at a time.

I want to select only one chip with tick mark at a time.

XML Code:

<com.google.android.material.chip.ChipGroup
                android:id="@+id/categoryChipsView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                app:chipSpacing="10dp"
                app:singleSelection="true"
                app:itemSpacing="15dp"
                app:singleLine="true">
</com.google.android.material.chip.ChipGroup>

Java Code:

private void addChipView(String chipText) {
    View child = getLayoutInflater().inflate(R.layout.row_chip_view, null);
    Chip chip = child.findViewById(R.id.chip);
    chip.setText(chipText);
    chip.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(mContext, ((Chip) v).getText(), Toast.LENGTH_SHORT).show();
        }
    });
    // This is ChipGroup view
    binding.categoryChipsView.addView(child);
}

row_chip_view.xml

<com.google.android.material.chip.Chip xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/chip"
    style="@style/Widget.MaterialComponents.Chip.Filter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="@string/app_name"
    android:textColor="@android:color/white"
    app:checkedIcon="@drawable/ic_check"
    app:chipBackgroundColor="@color/colorAccent"
    app:chipEndPadding="8dp"
    app:chipIconTint="@android:color/white"
    app:chipStartPadding="8dp"
    app:textEndPadding="5dp"
    app:textStartPadding="5dp" />

enter image description here

What I have tried statically, I have pasted view of row_chip_view.xml as child of ChipGroup in main xml and Its working fine. I can select only one chip at a time. 

           <com.google.android.material.chip.ChipGroup
                android:id="@+id/categoryChipsView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                app:chipSpacing="10dp"
                app:singleSelection="true"
                app:itemSpacing="15dp"
                app:singleLine="true">

                <com.google.android.material.chip.Chip 
                    android:id="@+id/chip"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:text="@string/app_name"
                    android:textColor="@android:color/white"
                    app:checkedIcon="@drawable/ic_check"
                    app:chipBackgroundColor="@color/colorAccent"
                    app:chipEndPadding="8dp"
                    app:chipIconTint="@android:color/white"
                    app:chipStartPadding="8dp"
                    app:textEndPadding="5dp"
                    app:textStartPadding="5dp" />

                <com.google.android.material.chip.Chip 
                    android:id="@+id/chip2"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:text="@string/app_name"
                    android:textColor="@android:color/white"
                    app:checkedIcon="@drawable/ic_check"
                    app:chipBackgroundColor="@color/colorAccent"
                    app:chipEndPadding="8dp"
                    app:chipIconTint="@android:color/white"
                    app:chipStartPadding="8dp"
                    app:textEndPadding="5dp"
                    app:textStartPadding="5dp" />

                <com.google.android.material.chip.Chip 
                    android:id="@+id/chip3"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:text="@string/app_name"
                    android:textColor="@android:color/white"
                    app:checkedIcon="@drawable/ic_check"
                    app:chipBackgroundColor="@color/colorAccent"
                    app:chipEndPadding="8dp"
                    app:chipIconTint="@android:color/white"
                    app:chipStartPadding="8dp"
                    app:textEndPadding="5dp"
                    app:textStartPadding="5dp" />

            </com.google.android.material.chip.ChipGroup>

enter image description here

BUT I WANT IT DYNAMICALLY.

Update: New Scenario

First of all I have added four chips in XML within ChipGroup and after that tried to add another three chips PROGRAMATICALLY in same ChipGroup. The first four chips is allow to select only one but last three chips allow me to select multiple. Very Weird.

Do let me know If I am missing anything.

Your help will be appreciated.

Upvotes: 5

Views: 9381

Answers (3)

KoOPa
KoOPa

Reputation: 1

Add integer id before adding Chip to ChipGroupd

    Chip chip = (Chip) getLayoutInflater().inflate(R.layout.custom_chip, chipGroup,
  false);
            chip.setId(i);
            chip.setText("str");
            chipGroup.addView(chip);

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363885

Remove in your row_chip_view.xml the android:id attribute.

<com.google.android.material.chip.Chip 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.MaterialComponents.Chip.Filter"
    .../>

And in the addChipView use:

private void addChipView(String chipText) {
    Chip chip = (Chip) getLayoutInflater().inflate(R.layout.row_chip_view, chipGroup, false);
    chip.setText(chipText);
    //...

    // This is ChipGroup view
    chipGroup.addView(chip);
}

Upvotes: 19

Traendy
Traendy

Reputation: 1503

Instead onClickListener use setOnCheckedChangeListener this works for me in combination with singleSelection="true"

Upvotes: 0

Related Questions