Add a circular progress icon inside the chip view

Question

I want to add a circular progress icon like

Inside a chip view in android. Some thing like this as the end product

Excuse the background of the progress bar indicator. I am not able to find any thing regarding this. Any suggestion?

Answer 1

You can achieve this behaviour by setting programmatically the ChipIcon using an androidx.swiperefreshlayout.widget.CircularProgressDrawable if you want to align the loading indicator in the left side of your Chip or you can use the CloseIcon if you want to align it on the right side of the Chip.

Align CircularProgressDrawable on the left side of chip:

1.In your chip xml layout define the chipIconSize and padding attributes based on your needs like below:

<com.google.android.material.chip.Chip
    android:id="@+id/chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Chip"
    app:chipIconSize="25dp"
    app:iconStartPadding="5dp"
    app:iconEndPadding="5dp"
    app:chipBackgroundColor="@android:color/holo_blue_bright" />

2.Create programmatically your CircularProgressDrawable like below:

CircularProgressDrawable cpDrawable = new CircularProgressDrawable(this);
cpDrawable.setStyle(CircularProgressDrawable.DEFAULT);
cpDrawable.setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);
cpDrawable.start();

3.And set the above CircularProgressDrawable to your ChipIcon like below:

chip = findViewById(R.id.chip);
chip.setChipIcon(cpDrawable);
chip.setChipIconVisible(true);

Align CircularProgressDrawable on the right side of chip:

1.In your chip xml layout define the closeIconSize and closeIcon paddings attributes based on your needs like below:

<com.google.android.material.chip.Chip
    android:id="@+id/chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Chip"
    app:closeIconSize="25dp"
    app:closeIconStartPadding="5dp"
    app:closeIconEndPadding="5dp"
    app:chipBackgroundColor="@android:color/holo_blue_bright" />

2.Create programmatically your CircularProgressDrawable like above and set it on Chip CloseIcon like below:

 chip = findViewById(R.id.chip);
 chip.setCloseIcon(cpDrawable);
 chip.setCloseIconVisible(true);

Results will be like below:

Answer 2

I created a layout using relative layout, you can check this i hope you get this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="80dp"
    android:background="@drawable/dummy_bg"
    android:splitMotionEvents="true">

    <TextView
        android:id="@+id/tvlabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="30dp"
        android:text="Electronics"
        android:textColor="@color/black"
        android:textSize="25sp" />

    <ProgressBar
        android:id="@+id/progrressciruclar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_toRightOf="@+id/tvlabel" />
</RelativeLayout>

also create this dummy_bg in your drawables folder and paste the following code

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dp"
        android:color="#FFFFFF" />
    <corners android:radius="50dp"/>
    <padding android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp" />
</shape>