How to display progress drawable animation in Chip Material Component?

Question

According to the official Design docs for Action Chips, we are supposed to be able to add a progress state to chips. Sadly, the Development docs don't mention this at all. Has anyone managed to figure out how to achieve the effect shown here?

Answer 1

It is possible to implement this behavior using the chipIcon attribute and androidx.swiperefreshlayout.widget.CircularProgressDrawable.

xml

app:chipIconWithProgress="@{viewModel.taskIsStarting ? null : @drawable/ic_play_arrow}"

and BindingAdapter

@BindingAdapter("chipIconWithProgress")

fun Chip.setChipIconWithProgress(item: Drawable?) {   
  chipIcon = item
    ?: CircularProgressDrawable(context!!).apply {
      setStyle(CircularProgressDrawable.DEFAULT)
      start()
    }
}

Answer 2

You can use the Material Components Library and the Chip component.

In your layout use:

    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        style="@style/Widget.MaterialComponents.Chip.Action"
        app:iconStartPadding="2dp"
        ../>

Then use as chipIcon a ProgressIndicator provided by the library:

   ProgressIndicatorSpec progressIndicatorSpec = new ProgressIndicatorSpec();
    progressIndicatorSpec.loadFromAttributes(
            this,
            null,
            R.style.Widget_MaterialComponents_ProgressIndicator_Circular_Indeterminate);
    progressIndicatorSpec.circularInset = 1; // Inset.
    progressIndicatorSpec.circularRadius =
            (int) dpToPx(this, 8); // Circular radius is 8 dp.
    IndeterminateDrawable progressIndicatorDrawable =
            new IndeterminateDrawable(
                    this,
                    progressIndicatorSpec,
                    new CircularDrawingDelegate(),
                    new CircularIndeterminateAnimatorDelegate());


    Chip chip = findViewById(R.id.chip);
    chip.setChipIcon(progressIndicatorDrawable);

with this util method:

public static float dpToPx(@NonNull Context context, @Dimension(unit = Dimension.DP) int dp) {
    Resources r = context.getResources();
    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics());
}

You can customize the colors and all other attributes:

progressIndicatorSpec.indicatorColors = getResources().getIntArray(R.array.progress_colors);
progressIndicatorSpec.growMode = GROW_MODE_OUTGOING;

Note: this requires at least the version 1.3.0-alpha02.