Chip icon – Round chip icon using picasso library android

Chip icon - Round chip icon using picasso library android

Chip icon using picasso library

Chip (s) are compact elements that represent an attribute, text, entity, or action. They allow users to enter information, select a choice, filter content, or trigger an action.

Chip manages its own start (app:chipIcon) and end (app:closeIcon) drawables. Picasso allows for hassle-free image loading . Normal case picasso load images and that image is converted to drawable for Icon. Which works only if image is already cached. Otherwise the resulting icon is placeholder image or error image.By using trigger a callback is created which will get the image and place it.It only works by using setTag, With out “setTag” trigger get garbage collected.

BottomApp Bar Material Theme 2

ChipGroup

A ChipGroup is used to hold multiple Chips. By default, the chips are reflowed across multiple lines. Set the app:singleLine attribute to constrain the chips to a single horizontal line. If you do so, you’ll usually want to wrap this ChipGroup in a HorizontalScrollView.

ChipGroup also supports a multiple-exclusion scope for a set of chips. When you set the app:singleSelection attribute, checking one chip that belongs to a chip-group unchecks any previously checked chip within the same group. The behavior mirrors that of RadioGroup.

MainActivity

public class MainActivity extends AppCompatActivity {

    private LinkedHashMap<String, Target> chipRecordHash;
    private ChipGroup chipGroup;
    private String [] nameList={"Google","Android","Windows","Chrome","Git hub","Facebook"};
    private String [] iconList={"https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Google-512.png",
            "https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Android-512.png",
            "https://cdn1.iconfinder.com/data/icons/logotypes/32/windows-512.png",
            "https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/chrome-512.png",
            "https://cdn0.iconfinder.com/data/icons/octicons/1024/mark-github-512.png",
            "https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-512.png"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        chipGroup=findViewById(R.id.chipGroup);

        intChips();

        MaterialButton remove=findViewById(R.id.remove);
        remove.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                removeChip("Facebook");
            }
        });


    }

    private void intChips(){
        chipRecordHash=new LinkedHashMap<>();
        for (int i=0;i<nameList.length;i++) {
            final Chip chip = new Chip(this, null, R.style.Widget_MaterialComponents_Chip_Action);
            chip.setText(nameList[i]);
            chip.setCloseIconVisible(true);
            chipGroup.addView(chip);
            final int finalI = i;
            chip.setOnCloseIconClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    chipGroup.removeView(chip);
                    chipRecordHash.remove(nameList[finalI]);
                }
            });
            Target target=getTargetOfPicasso(chip);
            String linkOfIcon=iconList[i];
            Picasso.get().load(linkOfIcon).error(R.drawable.icon_no_image).
                    placeholder(R.drawable.icon_place_holder).
                    transform(new CircleTransform()).resize(30,30).into(target);

            chip.setTag(target);
            // --- setting target as tag is in-case the images is not loaded the target get garbage collected
            // setTaging the target prevent it from garbage collecting

            chipRecordHash.put(nameList[i],target);
            //If you want to remove some chips threw another ways like button click etc
        }
    }


    private Target getTargetOfPicasso(final Chip targetChip){
        return new Target() {
            @Override
            public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                Drawable d = new BitmapDrawable(getResources(), bitmap);
                targetChip.setChipIcon(d);
            }
            @Override
            public void onBitmapFailed(Exception e, Drawable errorDrawable) {
                targetChip.setChipIcon(errorDrawable);
            }
            @Override
            public void onPrepareLoad(Drawable placeHolderDrawable) {
                targetChip.setChipIcon(placeHolderDrawable);
            }
        };
    }

    private void removeChip(String chipName){
        Chip chip=chipGroup.findViewWithTag(chipRecordHash.get(chipName));

        if (chip!=null) {
            chipGroup.removeView(chip);
            chipRecordHash.remove(chipName);
        }else {
            Toast.makeText(this,"Not available",Toast.LENGTH_SHORT).show();
        }

    }

}

Xml For MainActivity




        
                

                

                
        


2 comments on “Chip icon – Round chip icon using picasso library android

Leave a Reply

%d bloggers like this: