CODEWITHSUNDEEP
javaandroidandroid-studiomaterial-designandroid-chips
Eswar
Eswar

Reputation: 199

How to add entry chips in android dynamically along with icon

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.

Upvotes: 9

Views: 4154

Answers (3)

clement.l
clement.l

Reputation: 199

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!

Upvotes: 3

Deinlandel
Deinlandel

Reputation: 1033

The provided answer will occasionally lead to a crash:

java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.graphics.Bitmap.isRecycled()' on a null object reference
at android.graphics.Canvas.throwIfCannotDraw(Canvas.java:1270)
at android.view.DisplayListCanvas.throwIfCannotDraw(DisplayListCanvas.java:257)
at android.graphics.Canvas.drawBitmap(Canvas.java:1415)
at com.bumptech.glide.load.resource.gif.GifDrawable.draw(SourceFile:291)
at com.google.android.material.chip.ChipDrawable.drawChipIcon(SourceFile:652)
at com.google.android.material.chip.ChipDrawable.draw(SourceFile:568)
at android.graphics.drawable.DrawableWrapper.draw(DrawableWrapper.java:228)
...

This is because drawable isn't cleared correctly. The correct implementation would be (the example is in Kotlin):

    Glide.with(this)
                .load(url)
                .into(object : CustomTarget<Drawable>(200, 200) { //size might be omitted

            override fun onLoadFailed(errorDrawable: Drawable?) {
                chipIcon = errDrawable
            }

            override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                chipIcon = resource
            }

            override fun onLoadCleared(placeholder: Drawable?) {
                chipIcon = placeholder
            }

        })

Upvotes: 1

Javis
Javis

Reputation: 338

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

Upvotes: 10

Related Questions