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

# Multi Hits

> Shows paginated search results from multiple indices.

export const Filter = () => <Tooltip tip="A filter is a condition that limits which records Algolia returns. Filters often use one or more facet-value pairs, such as brand:Apple AND color:red. You can also filter by numeric values, dates, tags, booleans, or geographic constraints." cta="Filtering" href="/doc/guides/managing-results/refine-results/faceting">
    filter
  </Tooltip>;

## About this widget

To use this widget to display a paginated list of results from multiple categories, you need these components:

* `MultiSearcher`. The [`Searcher`](/doc/api-reference/widgets/instantsearch/android) that handles your searches
* `FilterState`. Tracks any applied filters (such as genre or year) and updates search results when the <Filter /> changes.
* `HitsState`. Hits UI state
* `SearchBoxState`. Search box UI state

The widget can handle various kinds of search results.
For example, you can display different types of results, such as movies or actors, each represented by a unique data class.

See also:

* [Get started with imperative UI](/doc/guides/building-search-ui/getting-started/how-to/programmatically/android)
* [Multi-index search](/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/android)

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

## Examples

### Activity

```kotlin Kotlin icon=code theme={"system"}
class SearchActivity : ComponentActivity() {

    private val viewModel: SearchViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                SearchScreen(
                    searchBoxState = viewModel.searchBoxState,
                    actorsState = viewModel.actorsState,
                    moviesState = viewModel.moviesState,
                )
            }
        }
    }
}
```

### View model

```kotlin Kotlin icon=code theme={"system"}
import com.algolia.client.model.search.SearchParamsObject

class SearchViewModel : ViewModel() {

    private val multiSearcher = MultiSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourAPIKey"
    )
    private val actorsSearcher = multiSearcher.addHitsSearcher(
        indexName = "YourActorsIndex",
        query = SearchParamsObject(hitsPerPage = 5)
    )
    private val moviesSearcher = multiSearcher.addHitsSearcher(indexName = "YourMoviesIndex")
    private val searchBoxConnector = SearchBoxConnector(multiSearcher)
    private val connections = ConnectionHandler(searchBoxConnector)

    val searchBoxState = SearchBoxState()
    val actorsState = HitsState<Actor>()
    val moviesState = HitsState<Movie>()

    init {
        connections += searchBoxConnector.connectView(searchBoxState)
        connections += actorsSearcher.connectHitsView(actorsState) { it.hits.deserialize(Actor.serializer()) }
        connections += moviesSearcher.connectHitsView(moviesState) { it.hits.deserialize(Movie.serializer()) }
        multiSearcher.searchAsync()
    }

    override fun onCleared() {
        super.onCleared()
        multiSearcher.cancel()
        connections.clear()
    }
}
```

### UI

```kotlin Kotlin icon=code theme={"system"}
@Composable
fun SearchScreen(
    modifier: Modifier = Modifier,
    searchBoxState: SearchBoxState,
    actorsState: HitsState<Actor>,
    moviesState: HitsState<Movie>,
) {
    val scrollState = rememberScrollState()
    Column(
        modifier = modifier
            .fillMaxWidth()
            .verticalScroll(scrollState)
    ) {
        SearchBox(
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp),
            searchBoxState = searchBoxState,
        )

        Actors(actors = actorsState.hits)
        Movies(movies = moviesState.hits)
    }
}

@Composable
private fun Actors(
    modifier: Modifier = Modifier,
    actors: List<Actor>,
) {
    if (actors.isEmpty()) return

    Column(modifier) {
        SectionTitle(
            modifier = Modifier.padding(start = 12.dp, end = 12.dp, bottom = 4.dp),
            title = "Actors"
        )
        actors.forEach { actor ->
            Actor(actor = actor)
        }
    }
}

@Composable
private fun Actor(
    modifier: Modifier = Modifier,
    actor: Actor
) {
    Row(
        modifier
            .fillMaxWidth()
            .background(MaterialTheme.colors.surface)
            .padding(horizontal = 24.dp, vertical = 12.dp)
    ) {
        Icon(
            imageVector = Icons.Default.AccountCircle,
            tint = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
            contentDescription = null
        )
        Text(
            text = actor.highlightedName?.toAnnotatedString() ?: AnnotatedString(actor.name),
            modifier = Modifier.padding(start = 12.dp),
        )
    }
}

@Composable
private fun Movies(
    modifier: Modifier = Modifier,
    movies: List<Movie>
) {
    if (movies.isEmpty()) return

    Column(modifier) {
        SectionTitle(
            modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
            title = "Movies"
        )
        movies.forEach { movie ->
            Movie(movie = movie)
        }
    }
}

@Composable
private fun Movie(modifier: Modifier = Modifier, movie: Movie) {
    Row(
        modifier
            .fillMaxWidth()
            .background(MaterialTheme.colors.surface)
            .padding(horizontal = 24.dp, vertical = 12.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Movie,
            tint = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
            contentDescription = null
        )
        Text(
            text = movie.highlightedTitle?.toAnnotatedString() ?: AnnotatedString(movie.title),
            modifier = Modifier.padding(start = 12.dp),
        )
    }
}

@Composable
private fun SectionTitle(modifier: Modifier = Modifier, title: String) {
    Text(
        modifier = modifier,
        text = title, style = MaterialTheme.typography.subtitle2,
        color = MaterialTheme.colors.onBackground.copy(alpha = 0.4f),
    )
}
```

### Models

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

@Serializable
data class Actor(
    val name: String,
    override val objectID: String,
    override val _highlightResult: JsonObject?
) : Indexable, Highlightable {

    val highlightedName
        get() = getHighlight("name")
}
```

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

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

    val highlightedTitle
        get() = getHighlight("title")
}
```