> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/search/llms.txt)

# Place card

**Place Card** is the UI component that displays search result details like name, address, distance to the place from user's location, and action buttons like *Navigate*, *Share*, and etc. The Place Card is represented by the [`SearchPlaceBottomSheetView`](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place-bottom-sheet-view/) class.

![Mobile device displaying Search Place card](https://docs.mapbox.com/android/assets/ideal-img/search-ui-components-place-card.2c0bdf5.480.png)

## Integration

[`SearchPlaceBottomSheetView`](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place-bottom-sheet-view/) works as a *Bottom Sheet*, it implements [CoordinatorLayout.AttachedBehavior](https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout.AttachedBehavior) and associates [`BottomSheetBehavior`](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior) with the view. So this view has to be placed inside [CoordinatorLayout](https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout):

```xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinator_layout_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <com.mapbox.search.ui.view.place.SearchPlaceBottomSheetView
        android:id="@+id/search_place_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:elevation="8dp"
        />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

Like any other Android view, `SearchPlaceBottomSheetView` should be initialized in your code.

```kotlin
val searchPlaceView = findViewById<SearchPlaceBottomSheetView>(R.id.search_place_view)
```

To make `SearchPlaceBottomSheetView` work properly, you will have to call [initialize()](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place-bottom-sheet-view/initialize.html) function where you will need to pass [CommonSearchViewConfiguration](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view/-common-search-view-configuration/) object with [DistanceUnitType](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view/-distance-unit-type/), which tells the view how to display distances, in meters or miles:

```kotlin
searchPlaceView.initialize(CommonSearchViewConfiguration(DistanceUnitType.IMPERIAL))
```

Initially the **Place Card** is in `hidden` state. To make it appear, you will need to call [open()](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place-bottom-sheet-view/open.html) function with [SearchPlace](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place/) object passed as an argument. `SearchPlace` object can be instantiated directly with constructor or with one of factory functions:

```kotlin
fun onSearchResultSelected(searchResult: SearchResult, responseInfo: ResponseInfo) {
    val searchPlace = SearchPlace.createFromSearchResult(searchResult, responseInfo)
    searchPlaceView.open(searchPlace)
}
```

These steps are enough to make **Place Card** visible on the screen and showing place details.

To make **Place Card** responsive to actions, you should add action listeners, for example, an action that handles the `close` button clicks:

```kotlin
searchPlaceView.addOnCloseClickListener {
    searchPlaceView.hide() 
}
```

To respond to `Navigate` and `Share` button clicks, add corresponding listeners:

```kotlin
searchPlaceView.addOnNavigateClickListener { searchPlace ->
    startActivity(createGeoIntent(searchPlace.coordinate))
}

searchPlaceView.addOnShareClickListener { searchPlace ->
    startActivity(createShareIntent(searchPlace))
}
```

`Add to Favorites` button doesn't require any actions from developers, it adds the `Search Place` to the [Favorites Data Provider](https://docs.mapbox.com/android/search/guides/search-engine/data-providers/) under the hood.

If you don't need `Navigate`, `Share`, and `Add to Favorites` buttons in your app, you can hide any of these buttons with the appropriate property - [`isNavigateButtonVisible`](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place-bottom-sheet-view/is-navigate-button-visible.html), [`isShareButtonVisible`](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place-bottom-sheet-view/is-share-button-visible.html), and [`isFavoriteButtonVisible`](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place-bottom-sheet-view/is-favorite-button-visible.html), for example,

```kotlin
searchPlaceView.isFavoriteButtonVisible = false
```

That's it! Explore all the **Place Card**'s functionality in the [`SearchPlaceBottomSheetView` API reference page](https://docs.mapbox.com/android/search/api/ui/2.28.2/ui/com.mapbox.search.ui.view.place/-search-place-bottom-sheet-view/).

## Examples

Below you can find several examples that utilise the **Place Card** UI component:

> **Related content (example): [Search Engine example](https://docs.mapbox.com/android/search/examples/maps-sdk-integration/)**
> 
> Search Engine example that utilizes the Place Card UI component.

> **Related content (example): [Address Autofill example](https://docs.mapbox.com/android/search/examples/autofill-ui/)**
> 
> Address Autofill example that utilizes the Place Card UI component.

> **Related content (example): [Discover API example](https://docs.mapbox.com/android/search/examples/discover-ui/)**
> 
> Discover example that utilizes the Place Card UI component.

---