ChipGroup with draggable Chips

Question

In my XML I'm just declaring a ChipGroup as follows:

<com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup" 
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

And then adding each Chip dynamically (where CustomChipFilterStyle styles them as a "filter" type of Chip):

ChipGroup chipGroup = findViewById(R.id.chipGroup);
for (String name : names) {
    Chip chip = new Chip(this, null, R.attr.CustomChipFilterStyle);
    chip.setText(name);
    chipGroup.addView(chip);
}

In the guidance (see the video clip under "Movable") it suggests that "Input chips can be reordered or moved into other fields":

But I can't see any guidance about how this is done, or find any examples out there. Is it a completely bespoke thing (via View.OnDragListener and chip.setOnDragListener()), or are there utility methods for this as part of the Chip framework? All I really need to be able to do is to reorder Chips within the same ChipGroup. I did start with chip.setOnDragListener() but soon realised I didn't have sufficient knowledge about how to create the necessary animations to nudge and re-order other Chips as the Chip itself is being dragged (and to distinguish between a tap -- to filter -- and a drag)... and I hoped that there might be some out-of-the-box way of doing this with a ChipGroup like is maybe alluded to in the above guidance.

Answer 1

But I can't see any guidance about how [chip reordering within a ChipGroup] is done, or find any examples out there.

It is surprising that there doesn't seem to be an "out-of-the-box" way to reorder chips in a ChipGroup - at least not one that I have found.

All I really need to be able to do is to reorder Chips within the same ChipGroup.

I did start with chip.setOnDragListener() but soon realised I didn't have sufficient knowledge about how to create the necessary animations to nudge and re-order other Chips as the Chip itself is being dragged

The following doesn't really fully answer your question since the answer involves a RecyclerView and not a ChipGroup, but the effect is the same. This solution is based up the ItemTouchHelper Demo by Paul Burke. I have converted the Java to Kotlin and made some modifications to the code. I have posted a demo repo at ChipReorder The layout manager I use for the RecyclerView is FlexboxLayoutManager.

The demo app relies upon ItemTouchHelper which is a utility class that adds swipe to dismiss and drag & drop support to RecyclerView. If you look at the actual code of ItemTouchHelper, you will get an idea of the underlying complexity of the animation that appears on the screen for a simple drag.

Here is a quick video of chips being dragged around using the demo app.

I believe that any functionality that you may need from ChipGroup can be implemented through RecyclerView or its adapter.

Update: I have added a module to the demo repo called "chipgroupreorder" which reorders chips within a ChipGroup with animation. Although this looks much the same as the RecyclerView solution, it uses a ChipGroup and not a RecyclerView.

The demo uses a View.OnDragListener and relies upon android:animateLayoutChanges="true" that is set for the ChipGroup for the animations.

The selection of which view to shift is rudimentary and can be improved. There are probably other issues that may arise upon further testing.