Skip to main content

Chip

Chips, sometimes called tags, are useful for displaying keywords or categories from common sets of data.

Table of contents

Default

(Google Pixel emulator)
(Google Pixel emulator - dark mode)

Outline

(Google Pixel emulator)
(Google Pixel emulator - dark mode)

With icon

(Google Pixel emulator)
(Google Pixel emulator - dark mode)

Implementation

Chip

Installation

Backpack Android is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

The Chip component can be used in both XML and Kotlin/Java

Example of a chip in XML

    <net.skyscanner.backpack.chip.BpkChip
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="@dimen/bpkSpacingSm"
      android:text="Message"
      app:disabled="true"
      app:selected="true"
      app:chipIcon="@drawable/bpk_close" />

Example of a chip in Kotlin

import net.skyscanner.backpack.chip.BpkChip

BpkChip(context).apply {
  text = "Message"
  isSelected = true
  disabled = false
  chipBackgroundColor = context.getColor(R.color.bpkSkyGrayTint07)
  chipTextColor = context.getColor(R.color.bpkTextPrimary)
  chipSelectedBackgroundColor = context.getColor(R.color.bpkSkyBlue)
  disabledBackgroundColor = context.getColor(R.color.bpkSkyGrayTint07)
  chipIcon = AppCompatResources.getDrawable(context, R.drawable.bpk_account)
}

Toggling the chip's state

By default the chip does not add any click listeners, so clicking it will not toggle its state. To do so add a click listener:

chip.setOnClickListener { chip.toggle() }

BpkOutlineChip

Chip with outline style, supports the same properties as a normal chip except changing the background colour.

Example of a outline chip in XML

    <net.skyscanner.backpack.chip.BpkOutlineChip
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="@dimen/bpkSpacingSm"
      android:text="Message"
      app:disabled="true"
      app:selected="true" />

Example of a outline chip in Kotlin

import net.skyscanner.backpack.chip.BpkOutlineChip

BpkOutlineChip(context).apply {
  text = "Message"
  isSelected = true
  disabled = false
  chipBackgroundColor = context.getColor(R.color.bpkSkyGrayTint07)
  chipTextColor = context.getColor(R.color.bpkTextPrimary)
  chipSelectedBackgroundColor = context.getColor(R.color.bpkSkyBlue)
  disabledBackgroundColor = context.getColor(R.color.bpkSkyGrayTint07)
  chipIcon = AppCompatResources.getDrawable(context, R.drawable.bpk_account)
}

Theme Props

  • chipSelectedBackgroundColor
  • chipBackgroundColor
  • chipDisabledBackgroundColor
  • chipTextColor

Styles can be changed globally through bpkChipStyle or bpkOutlineChipStyle. Check theming for more information.