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 class.
Integration
SearchPlaceBottomSheetView works as a Bottom Sheet, it implements CoordinatorLayout.AttachedBehavior and associates BottomSheetBehavior with the view. So this view has to be placed inside CoordinatorLayout:
<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.
val searchPlaceView = findViewById<SearchPlaceBottomSheetView>(R.id.search_place_view)
To make SearchPlaceBottomSheetView work properly, you will have to call initialize() function where you will need to pass CommonSearchViewConfiguration object with DistanceUnitType, which tells the view how to display distances, in meters or miles:
searchPlaceView.initialize(CommonSearchViewConfiguration(DistanceUnitType.IMPERIAL))
Initially the Place Card is in hidden state. To make it appear, you will need to call open() function with SearchPlace object passed as an argument. SearchPlace object can be instantiated directly with constructor or with one of factory functions:
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:
searchPlaceView.addOnCloseClickListener {
searchPlaceView.hide()
}
To respond to Navigate and Share button clicks, add corresponding listeners:
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 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, isShareButtonVisible, and isFavoriteButtonVisible, for example,
searchPlaceView.isFavoriteButtonVisible = false
That's it! Explore all the Place Card's functionality in the SearchPlaceBottomSheetView API reference page.
Examples
Below you can find several examples that utilise the Place Card UI component:
Search Engine example that utilizes the Place Card UI component.
Address Autofill example that utilizes the Place Card UI component.
Discover example that utilizes the Place Card UI component.