> ## 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 = () =>
index
;
export const FlavorSwitcher = ({current, baseHref = "", options = [], label = "InstantSearch framework"}) => {
if (options.length === 0) {
return
FlavorSwitcher requires at least one option.
;
}
const selected = options.find(option => option.value === current) ?? options[0];
return ;
};
{/* vale Algolia.HeadingPronouns = NO */}
## 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)
Browse the Highlighting example code on GitHub.
## Examples
Consider a movies .
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 Redemption",
"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,
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,
override val objectID: String,
override val _highlightResult: JsonObject?
) : Indexable, Highlightable {
@Transient
public val highlightedTitle: HighlightedString?
get() = getHighlight("title")
@Transient
public val highlightedGenres: List?
get() = getHighlights("genre")
@Transient
public val highlightedActors: List?
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
}
}
```