> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Highlighting

> Visually highlights matched terms in search results.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

## About this widget

Displays the [highlighted attributes](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/android)
of your search results.

With InstantSearch Android, the `Highlightable` interface and `HighlightedString` objects simplify highlighting the correct words in a search response that match your query.

See also: [Get started with imperative UI](/doc/guides/building-search-ui/getting-started/how-to/programmatically/android)

<Card title="Explore example code" icon="github" href="https://github.com/algolia/instantsearch-android/tree/master/examples/android">
  Browse the Highlighting example code on GitHub.
</Card>

## Examples

Consider a movies <Index />.
Each movie record consists of two fields: `title` and `year`.
Algolia's response to the query "red" could look like:

```json JSON icon=braces theme={"system"}
{
  "title": "The Shawshank Redemption",
  "year": 1994,
  "genre": ["action", "adventure"],
  "actors": ["Tim Robbins", "Morgan Freeman"],
  "objectID": "439817390",
  "_highlightResult": {
    "title": {
      "value": "The Shawshank <em>Red</em>emption",
      "matchLevel": "full",
      "fullyHighlighted": false,
      "matchedWords": ["red"]
    }
  }
}
```

To display those movies in your interface, you likely have created a `data class` that looks something like the following:

```kotlin Kotlin icon=code theme={"system"}
import com.algolia.instantsearch.core.Indexable

@Serializable
data class Movie(
    val title: String,
    val year: String,
    val genre: List<String>,
    override val objectID: String,
) : Indexable
```

Update it to add some highlighting.
Implementing `Highlightable` will deserialize the `_highlightResult` for each movie, and make it available through the `getHighlight{s}` methods. Create `@Transient` attributes for each highlight to display, being either single values or lists:

```kotlin Kotlin icon=code theme={"system"}
import com.algolia.instantsearch.core.Indexable

@Serializable
data class Movie(
    val title: String,
    val year: String,
    val genre: List<String>,
    override val objectID: String,
    override val _highlightResult: JsonObject?
) : Indexable, Highlightable {

  @Transient
  public val highlightedTitle: HighlightedString?
      get() = getHighlight("title")

  @Transient
  public val highlightedGenres: List<HighlightedString>?
      get() = getHighlights("genre")

  @Transient
  public val highlightedActors: List<HighlightedString>?
      get() = getHighlights("actors")
}
```

Use these highlighted strings in the interface,
for example in a `MovieViewHolder`.

### Using highlighted strings in an Android view

* Directly as a `SpannedString`, with the highlight defaulting to bold:

  ```kotlin Kotlin icon=code theme={"system"}
  TextUtils.concat(highlightedTitle?.toSpannedString(), " ($year)")
  ```

* As a customized `SpannedString`, specifying a `ParcelableSpan` to use as highlight style:

  ```kotlin Kotlin icon=code theme={"system"}
  highlightedGenres?.toSpannedString(BackgroundColorSpan(Color.YELLOW))
      ?: buildSpannedString { italic { append("unknown genre") } }
  ```

* Any way you want, iterating on `HighlightedString#tokens` to process it however you like:

  ```kotlin Kotlin icon=code theme={"system"}
  // Displays actors with highlighted parts in uppercase
  highlightedActors?.joinToString { highlight ->
      highlight.tokens.joinToString("") {
          if (it.highlighted) it.content.uppercase() else it.content
      }
  }
  ```

### Compose UI

* Directly as a `AnnotatedString`, with the highlight defaulting to bold:

  ```kotlin Kotlin icon=code theme={"system"}
  highlightedTitle?.toAnnotatedString()
  ```

* As a customized `AnnotatedString`, specifying a `SpanStyle` to use as highlight style:

  ```kotlin Kotlin icon=code theme={"system"}
  highlightedGenres?.toAnnotatedString(SpanStyle(background = Color.Yellow))
      ?: AnnotatedString("unknown genre", SpanStyle(fontStyle = FontStyle.Italic))
  ```

* Any way you want, iterating on `HighlightedString#tokens` to process it however you like:

  ```kotlin Kotlin icon=code theme={"system"}
  // Displays actors with highlighted parts in uppercase
  highlightedActors?.joinToString { highlight ->
      highlight.tokens.joinToString("") {
          if (it.highlighted) it.content.uppercase() else it.content
      }
  }
  ```