Remove an android Chip from a Chip Group smoothly

Question

In one of the fragments of the app i'm developing, i let the users create various chips and every chip represents an option. I was able to animate the chip creation.

Now, when the user taps on a chip, i remove it from the group. I was able to associate a custom animation to the removal (see the gif) but when a "middle chip" is deleted, the chips to the right suddenly move to the left, when the animation is over.

Layout:

       <HorizontalScrollView
           android:layout_width="match_parent"
           android:layout_height="@dimen/horizontal_scroll_height"
           android:scrollbars="none">

           <com.google.android.material.chip.ChipGroup
               android:id="@+id/rouletteChipList"
               style="@style/Widget.MaterialComponents.ChipGroup"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingStart="@dimen/chip_horizontal_margin"
               android:paddingEnd="@dimen/chip_horizontal_margin"
               app:chipSpacing="@dimen/chip_spacing"
               app:singleLine="true">

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

Chip deletion:

private void removeChip(final Chip chip) {
        @SuppressWarnings("ConstantConditions") final ChipGroup optionsList = getView().findViewById(R.id.ChipList);
        // Remove the chip with an animation
        if (chip == null) return;
        final Animation animation = AnimationUtils.loadAnimation(getContext(), R.anim.chip_exit_anim);
        chip.startAnimation(animation);
        chip.postDelayed(new Runnable() {
            @Override
            public void run() {
                optionsList.removeView(chip);
            }
        }, 400);
}

Chip layout:

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/placeholder"
    android:textAlignment="center"
    app:chipBackgroundColor="@color/grayTranslucent"
    app:rippleColor="?colorAccent" />

I'd like to have a smooth animation, where the chips smoothly move to the left when a "middle chip" is deleted. I tried a couple of things, but no luck.

Could you elaborate a bit? I never used any RecyclerView, sadly — m.i.n.a.r., Oct 17 '19 at 10:08
Not so simple. In the catalog of the material components library there is [an example](https://github.com/material-components/material-components-android/blob/3e55f14f7b1dae604f31b1b000904f8ee2e0e5a5/catalog/java/io/material/catalog/chip/ChipRecyclerviewDemoFragment.java) with Chips and a RecyclerView. There isn't the animation on remove, but it a simple animation on recyclerview. — Gabriele Mariotti, Oct 17 '19 at 10:14
I'll give it a shot, thanks. I'll update the question with any progress. — m.i.n.a.r., Oct 17 '19 at 10:15

score 22 · Accepted Answer · answered Dec 09 '19 at 08:22

if you mean something like this

i,ve added it inside a HSV and added android:animateLayoutChanges="true" on chip_group, see below code

<HorizontalScrollView
        android:scrollbars="none"
        .
        >
        <com.google.android.material.chip.ChipGroup
            android:id="@+id/chip_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true">

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

    </HorizontalScrollView>

inside my Code i have added chips dynamically to this chip_group.

val newChip = Chip(this, null, R.attr.chipStyle)
newChip.text = "text"
newChip.isClickable = true
newChip.isFocusable = true
newChip.setOnClickListener(chipClickListener)
chip_group.addView(newChip)

and there is a onClickListener on each chip.inside it i start a fade animation and in onAnimationEnd do a removeView on chip_group

private val chipClickListener = View.OnClickListener {

        val anim = AlphaAnimation(1f,0f)
        anim.duration = 250
        anim.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationRepeat(animation: Animation?) {}

            override fun onAnimationEnd(animation: Animation?) {
                chip_group.removeView(it)
            }

            override fun onAnimationStart(animation: Animation?) {}
        })

        it.startAnimation(anim)
    }

It works perfectly! Thanks a lot, i was lost in complicated workarounds and it was just a line :D — m.i.n.a.r., Dec 09 '19 at 17:13

Remove an android Chip from a Chip Group smoothly

1 Answers1