Source: https://developers.woosmap.com/products/mobile/android/displaying-stores/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Display your Stores with the Android SDK



This guide will show you how you can display your stores on a MapView.

This guide assume you already know how to add the SDK as a dependency and configure an API Key.  
If you never used Woosmap Android SDK before, we strongly recommend to start with the [Step by Step Guide](/products/mobile/android/step-by-step-first-application/) first.

## Adding a StoresRenderer

Similarly to its JavaScript counterpart and to ensure maximum readability and navigation, your data are displayed combining tiled images and markers. Tiled images are useful to render large amount of assets or high store density. This view makes the map displayed faster and provide a clean view. Markers are relevant to render branded pictogram after a specified level of zoom (breakpoint).

To display your stores you need to instantiate a new `StoresRenderer` which requires to have a `StoresStyle` ready first.
It's possible to build a style programmatically but for your convenience you can just instantiate one reusing the same JSON definition than the one used in [JavaScript](/products/map-api/guides/display-stores-overlay/#style-your-storesoverlay).

```kotlin
    fun setupStoresRenderer() {
        val myStyle: String = """
        {
            rules: [
                //...
            ],
            default: {
                //...
            },
            breakpoint: 8
        }
        """
        val storesStyle = StoresStyle.buildFromJson(myStyle)
        val storesRenderer = StoresRenderer(mapView, storesStyle)
    }
```

The variable `myStyle` has been hardcoded in this example, but you can load it from your app bundle.

<div class="row">
    <div class="column2">
        <p><strong>Store Symbols</strong></p>
        <img src="/assets/images/mobile/android/displaying-stores/stores-symbols.png" alt="Symbols View" style="display:block; margin-left:auto; margin-right:auto; width: 300px;">
    </div>
    <div class="column2">
        <p><strong>Store Markers</strong></p>
        <img src="/assets/images/mobile/android/displaying-stores/stores-markers.png" alt="Markers View" style="display:block; margin-left:auto; margin-right:auto; width: 300px;">
    </div>
</div>

## Store Selection

The `StoresRenderer` listen for user's input and provide a callback if a store gets selected.

```kotlin
class SomeClass {
    //...

    fun setupStoresRenderer(myStyle: String) {
        val storesStyle = StoresStyle.buildFromJson(myStyle)
        val storesRenderer = StoresRenderer(mapView, storesStyle)
        storesRenderer.addOnStoreSelect(::onStoreSelected)
    }

    fun onStoreSelected(selectedStore: AssetFeatureResponse) {
        selectedStore.properties.name?.let { println(it) }
    }
}
```

Your callback will be called with the result of a call to [get all the details of your store](/api-reference/data-api/get-stores-storeid/).
You will have access to all properties set on your store and be able to display them anyway you like.

![Stores Selected Screenshot](/assets/images/mobile/android/displaying-stores/stores-selected.png){:style="display:block; margin-left:auto; margin-right:auto; width: 300px;"}

## Store Search

We also provide a `StoresAutocompleteTextView` if you wish to provide a simple widget for your users to search and select a store.
It’s built upon Android’s AutocompletTextView and can be used with UI designed by the Layout Builder. You only need to edit your layout XML to include it like so:

```xml
<com.woosmap.sdk.StoresAutocompleteTextView
        android:id="@+id/autoComplete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Search Localities"
        android:selectAllOnFocus="true"
        />
```

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.woosmap.sdk.StoresAutocompleteTextView
        android:id="@+id/autoComplete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Search Localities"
        android:selectAllOnFocus="true"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/mapView"
        />

    <com.woosmap.sdk.MapView
        android:id="@+id/mapView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/autoComplete" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

Once the `StoresAutocompleteTextView` is configured in your layout you can use it in your view’s code:

```kotlin
class MainActivity : AppCompatActivity() {

    private lateinit var mapView: MapView
    private lateinit var autoComplete: StoresAutocompleteTextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mapView = findViewById(R.id.mapView)

        autoComplete = findViewById(R.id.autoComplete)
        autoComplete.onStoreSelected = { selectedStore ->
            mapView.requestFocus()
            storesRenderer.select(selectedStore)

            selectedStore.geometry.coordinates?.let { lnglat ->
                mapView.easeCamera(
                    CameraUpdate(
                        target = LatLng(longitude = lnglat[0], latitude = lnglat[1]),
                        zoom = 14.0
                    )
                )
            }

        }
        autoComplete.setOnDismissListener { mapView.requestFocus() }
    }
}
```

- [Android SDK API Reference Documentation](https://native-sdk.woosmap.com/android/doc/latest/)