# 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](https://developers.google.com/static/maps/documentation/places/images/place-search-hero.jpg)


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 [`SearchByTextRequest`](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/api/net/SearchByTextRequest.md.txt) or a [`SearchNearbyRequest`](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/api/net/SearchNearbyRequest.md.txt).

## Billing


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

## Add Place Search to your app

> [!TIP]
> **Tip:** [See the complete example](https://developers.google.com/maps/documentation/places/android-sdk/place-search-ui-kit.md.txt#examples).


Use the Place Search widget by adding the [`PlaceSearchFragment`](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/PlaceSearchFragment.md.txt#newInstance(kotlin.collections.List,com.google.android.libraries.places.widget.model.Orientation,kotlin.Int)) [fragment](https://developer.android.com/guide/fragments) 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

```kotlin
fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search
```

### Java

```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

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

### Java

```java
fragment.registerListener(
  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.

> [!NOTE]
> **Note:** The Place name will always appear.


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

### Kotlin

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

### Java

```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:

- [PlaceSearchFragment.Content](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/PlaceSearchFragment.Content.md.txt): The content shown in the component.
- [mediaSize](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/model/MediaSize.md.txt): The photo size in the vertical orientation of the fragment. The default is `SMALL`.
- [preferTruncation](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/PlaceSearchFragment.md.txt#setPreferTruncation(boolean)): Whether to truncate text of each Place Details view.
- [attributionPosition](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/model/AttributionPosition.md.txt): Whether to show the Google Maps attribution at the top or bottom of the component.
- [selectable](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/PlaceSearchFragment.md.txt#getSelectable()): Whether each place in the list is selectable.


Add your customization configuration to [`PlaceSearchFragment`](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/PlaceSearchFragment.md.txt).

### Kotlin

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

### Java

```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`](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/model/Orientation.md.txt) in [`PlaceSearchFragment.newInstance()`](https://developers.google.com/maps/documentation/places/android-sdk/reference/com/google/android/libraries/places/widget/PlaceSearchFragment.md.txt#newInstance(kotlin.collections.List,com.google.android.libraries.places.widget.model.Orientation,kotlin.Int)).

### Kotlin

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

### Java

```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. You can customize the colors, typography, spacing, borders, and corners of your Place Details component. The default is `PlacesMaterialTheme`.


Any theme attributes that are not overridden use the default styles.


The Places UI Kit provides a dark theme by default, so you may need to customize both dark and light themes. To customize the dark theme, add an entry for the color in `values-night/colors.xml`.


See the [Custom styling](https://developers.google.com/maps/documentation/places/android-sdk/places-ui-kit-custom-styling.md.txt) section for more information on theming.

## Examples

### Instantiate the Place Search component

### Kotlin

```kotlin
val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

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

fragment.registerListener(
  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

```java
PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

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

fragment.registerListener(
  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)
    
```

### Customize the theme


The Places UI Kit provides a dark theme by default, so you may need to customize both dark and light themes. To customize the dark theme, 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>
```