Select platform: Android iOS JavaScript

Place Search component

The Place Search component of the Places UI Kit renders the results of a place search in a list.

Places UI Kit Place Search component

You can customize the Place Search list. You can specify:

  • The content to display
  • Media size in vertical orientation
  • Text truncation
  • The orientation
  • Theme overrides that match your brand and app's design language
  • The position of the attribution
  • Whether a place is selectable

You can also customize the request to perform either a Search by text request or a Search Nearby request.

Billing

You are billed each time the configureFromSearchByTextRequest() or configureFromSearchNearbyRequest() binding value is changed.

Add Place Search to your app

Use the Place Search widget by adding the PlaceSearchFragment Fragment to your layout.

When you want your app to load a text search or nearby search result, call configureFromSearchByTextRequest() or configureFromSearchNearbyRequest() with the request.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)
// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)
// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

You can also add an optional PlaceSearchFragmentListener to the component to receive callbacks when the component loads, a place is selected (if set to be selectable) or when there is an error loading the component.

Kotlin

fragment.setListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

Java

fragment.setListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(Place place) {...}
  }
)

Customize the Place Search component

Customize content

You must specify which content your component will display.

This example configures the component to display the address and rating of the Place.

Kotlin

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.RATING));

You can also optionally customize the following aspects of the content that appears in your Place Search component:

Add your customization configuration to PlaceSearchFragment.

Kotlin

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

Java

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

Customize orientation

The default orientation is vertical. For horizontal orientation, specify Orientation.HORIZONTAL in PlaceSearchFragment.newInstance().

Kotlin

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Java

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Customize the theme

When instantiating a fragment, you can specify a theme that overrides any of the default style attributes. The default is PlacesMaterialTheme. See the Place Details Component documentation for more information on theming.

Any theme attributes that are not overridden use the default styles. If you'd like to support a dark theme, you can add an entry for the color in values-night/colors.xml. 

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Example

Kotlin

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)
fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true
fragment.setListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)
supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()
fragment.configureFromSearchByTextRequest(searchByTextRequest)

Java

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);
fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)
fragment.setListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)
getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();
fragment.configureFromSearchByTextRequest(searchByTextRequest)