Can I create a gradient background color on a material Chip?

Question

I believe the answer is yes as I can see this answer for react here, but I don't know how to do it in Kotlin/Java. The only to options I see are setChipBackgroundColorResource or setBackgroundColor which both require a color resource. How can I use gradient for the background?

• I know how to set backgrounds for any regular view, but having an issue just with the chip. I've tried this chip.setBackgroundResource(R.drawable.gradient_background) but it just makes the background gray

Answer 1

Currently you can't do it.

• The method setChipBackgroundColorResource is working with a color not a drawable
• The method setChipBackgroundColor is working with a ColorStateList
• The methods setBackgroundResource, setBackgroundDrawable, setBackground just produce a warning:Do not set the background; Chip manages its own background drawable.

It happens because the Chip widget is a thin view wrapper around the ChipDrawable. The ChipDrawable is just a MaterialShapeDrawable whick manages its background with something like:

 *   chipStartPadding     iconEndPadding     closeIconStartPadding         chipEndPadding
 *    +                    +                                    +                      +
 *    |                    |                                    |                      |
 *    |  iconStartPadding  |  textStartPadding   textEndPadding | closeIconEndPadding  |
 *    |   +                |    +                            +  |                  +   |
 *    |   |                |    |                            |  |                  |   |
 *    v   v                v    v                            v  v                  v   v
 * +-----+----+-----------+----+----+---------------------+----+----+----------+----+-----+
 * |     |    |       XX  |    |    |  XX   X  X  X  XXX  |    |    | X      X |    |     |
 * |     |    |      XX   |    |    | X  X  X  X  X  X  X |    |    |  XX  XX  |    |     |
 * |     |    |  XX XX    |    |    | X     XXXX  X  XXX  |    |    |    XX    |    |     |
 * |     |    |   XXX     |    |    | X  X  X  X  X  X    |    |    |  XX  XX  |    |     |
 * |     |    |    X      |    |    |  XX   X  X  X  X    |    |    | X      X |    |     |
 * +-----+----+-----------+----+----+---------------------+----+----+----------+----+-----+
 *                  ^                           ^                         ^
 *                  |                           |                         |
 *                  +                           +                         +
 *             chipIconSize                  *dynamic*              closeIconSize
 * 

Answer 2

It is not possible to set a background to Chip rather you can set the rounded corners or colors to it. You can also give a border color.

According to the documentation,

All attributes from Chip are supported. Do not use the android:background attribute. It will be ignored because Chip manages its own background Drawable. Also do not use the android:drawableStart and android:drawableEnd attributes.

Hence if you are looking something to give corners or a chip with a different border color I would suggest you to try this,

    Chip chip = new Chip(Activity.this);
    chip.setText("Holiday");
    chip.setCloseIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.close_chip, null));
    chip.setCloseIconTint(ColorStateList.valueOf(Color.parseColor("#aa99bc")));
    chip.setPadding(5, 5, 5, 5);  
    chip.setCloseIconVisible(true);
    chip.setTextAppearanceResource(R.style.ChipTextStyle);
    chip.setChipStrokeColorResource(R.color.chip_border_color);
    chip.setChipStrokeWidth(1);
    chip.setChipCornerRadius(30);                                          
    chip.setChipBackgroundColorResource(R.color.chip_background);