Skip to content Skip to sidebar Skip to footer

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

enter image description here

You can customize the colors and all other attributes:

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

enter image description here

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

Post a Comment for "How To Display Progress Drawable Animation In Chip Material Component?"