How To Display Progress Drawable Animation In Chip Material Component?

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 anyo

Solution 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()
    }
}

Solution 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:

ProgressIndicatorSpecprogressIndicatorSpec=newProgressIndicatorSpec();
    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.IndeterminateDrawableprogressIndicatorDrawable=newIndeterminateDrawable(
                    this,
                    progressIndicatorSpec,
                    newCircularDrawingDelegate(),
                    newCircularIndeterminateAnimatorDelegate());


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

with this util method:

publicstaticfloatdpToPx(@NonNull Context context, @Dimension(unit = Dimension.DP)int dp) {
    Resourcesr= 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.