Thumbprint logo

Pill

Small labels that help qualify information.

Usage

Pills are compact badges that help to explain or draw attention to a certain area of the UI. Pills include one or both of text and an icon (which is aligned at the start of the text if both are present).

Theme

Android supports seven standard pill themes, shown below.

These themes correspond to the following colors:

  1. green
  2. blue
  3. indigo
  4. purple
  5. red
  6. yellow
  7. gray (the default)

Size

Pill uses Thumbprint Title7 text (14sp)

Layout XML

Pill instances are configured in layout XML, using the custom attributes

  • pillColor one of the seven colors determining the style
  • pillText text to use
  • pillIcon an optional icon

For example:

<com.thoughtbot.thumbprint.pill.ThumbprintPill
    android:id="@+id/pill"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:pillColor="green"
    app:pillText="Pill text"
    app:pillIcon="@drawable/ic_pill_icon" />

These attributes can also be modified programmatically using the fields of the same name on the ThumbprintPill object.