Search code examples
androidandroid-chips

How to change border color and close / delete button for Material Chip View?


I'm using Material Chip View. Is there anyway for me to change the chip border colour and the remove / delete chip button?

Material Chip View https://github.com/robertlevonyan/materialChipView


Solution

  • I referred your given lib.

    You can easily change remove/delete button by replacing its image from library (named 'ic_close.png').

    and for adding a border you need to change code of Chip.java like,

    private void initTypedArray(AttributeSet attrs) {
            TypedArray ta = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.Chip, 0, 0);
    
            chipText = ta.getString(R.styleable.Chip_mcv_chipText);
            hasIcon = ta.getBoolean(R.styleable.Chip_mcv_hasIcon, false);
            chipIcon = ta.getDrawable(R.styleable.Chip_mcv_chipIcon);
            closable = ta.getBoolean(R.styleable.Chip_mcv_closable, false);
            selectable = ta.getBoolean(R.styleable.Chip_mcv_selectable, false);
            backgroundColor = ta.getColor(R.styleable.Chip_mcv_backgroundColor, ContextCompat.getColor(getContext(), R.color.colorChipBackground));
            selectedBackgroundColor = ta.getColor(R.styleable.Chip_mcv_selectedBackgroundColor, ContextCompat.getColor(getContext(), R.color.colorChipBackgroundClicked));
            textColor = ta.getColor(R.styleable.Chip_mcv_textColor, ContextCompat.getColor(getContext(), R.color.colorChipText));
            selectedTextColor = ta.getColor(R.styleable.Chip_mcv_selectedTextColor, ContextCompat.getColor(getContext(), R.color.colorChipTextClicked));
            closeColor = ta.getColor(R.styleable.Chip_mcv_closeColor, ContextCompat.getColor(getContext(), R.color.colorChipCloseInactive));
            selectedCloseColor = ta.getColor(R.styleable.Chip_mcv_selectedCloseColor, ContextCompat.getColor(getContext(), R.color.colorChipCloseClicked));
            cornerRadius = (int) ta.getDimension(R.styleable.Chip_mcv_cornerRadius, getResources().getDimension(R.dimen.chip_height) / 2);
            strokeSize = (int) ta.getDimension(R.styleable.Chip_mcv_strokeSize, 2);
            strokeColor = ta.getColor(R.styleable.Chip_mcv_strokeColor, ContextCompat.getColor(getContext(), R.color.colorChipCloseClicked));
            iconText = ta.getString(R.styleable.Chip_mcv_iconText);
            iconTextColor = ta.getColor(R.styleable.Chip_mcv_iconTextColor, ContextCompat.getColor(getContext(), R.color.colorChipBackgroundClicked));
            iconTextBackgroundColor = ta.getColor(R.styleable.Chip_mcv_iconTextColor, ContextCompat.getColor(getContext(), R.color.colorChipCloseClicked));
    
            ta.recycle();
        }
    

    And you need to change color from, <color name="colorChipCloseClicked">#F5F5F5</color>

    to <color name="colorChipCloseClicked">#D32F2F</color>

    it will be look like this,

    enter image description here

    Hope this helps you!!