How to add entry chips in android dynamically along with icon

Question

I need entry chips to be added dynamically using material design library along with icon which will be retrieved through API call. How to use Glide library to set chip icon?

NOTE : I am not saving any images before in drawable folder. All the data is being retrieved through API call.

Answer 1

You can use this workaround for example. Customize Chip:

public class GlideChip extends Chip {

    public GlideChip(Context context) {
        super(context);
    }

    public GlideChip(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * Set an image from an URL for the {@link Chip} using {@link com.bumptech.glide.Glide}
     * @param url icon URL
     * @param errDrawable error icon if Glide return failed response
     */
    public GlideChip setIconUrl(String url, Drawable errDrawable) {
        Glide.with(this)
                .load(url)
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        setChipIcon(errDrawable);
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        setChipIcon(resource);
                        return false;
                    }
                }).preload();
        return this;
    }

}

Create GlideChip, add to the chip group and start the project:

public class ChipFragment extends Fragment {

    private ChipGroup chipGroup;

    public ChipFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_chip, container, false);
        chipGroup = view.findViewById(R.id.chipGroup);
        Chip chip = createChip("John Doe", "https://i1.sndcdn.com/avatars-000197335271-mztyvq-t500x500.jpg");
        chipGroup.addView(chip);
        return view;
    }

    private Chip createChip(String name, String avatarUrl) {
        GlideChip chip = new GlideChip(getContext());
        chip.setText(name);
        chip.setIconUrl(avatarUrl, getResources().getDrawable(R.drawable.err_avatar));
        chip.setClickable(true);
        chip.setFocusable(true);
        return chip;
    }

}

P/S... Don't forget to add Glide to build.gradle. See here

Answer 2

For Coil and Kotlin lovers, I made a CoilChip based on @Javis's answer. (Kudos to Javis!)

class CoilChip(context: Context?) : Chip(context) {
    /**
     * @param url icon URL
     * @param errDrawable set error icon in onError callback
     */
    fun setIconUrl(url: String, placeholderDrawable: Drawable?, errDrawable: Drawable?) {
        chipDrawable?.let {
            val request = ImageRequest.Builder(context)
                .data(url)
                .target(
                    onStart = { placeholder ->
                        chipIcon = placeholderDrawable
                    },
                    onSuccess = { result ->
                        chipIcon = result
                    },
                    onError = { error ->
                        chipIcon = errDrawable
                    })
//              .memoryCachePolicy(CachePolicy.DISABLED) // caching strategy             
                .build()

            val imageLoader = ImageLoader.Builder(context)
                .build()
            imageLoader.enqueue(request)
        }
    }
}

If you encounter the exception Software rendering doesn't support hardware bitmaps, add the following to your image request.

.bitmapConfig(Bitmap.Config.ARGB_8888)

Cheers!