How to implement map previews and location sharing on Android
Tags: mappreviews, android, locationsharing, sendbird
Published: 2022-02-10 23:07:03

---
title: How to implement map previews and location sharing on Android
published: true
date: 2021-12-10 17:47:07 UTC
tags: mappreviews,Android,locationsharing,Sendbird
canonical_url: https://sendbird.com/developer/tutorials/android-chat-location-sharing-map-preview
cover_image: https://sendstage.wpengine.com/wp-content/uploads/20191112_Map20preview20and20location20sharing20on20android1.png
---

By Alex Preston
Solutions Engineer | [Sendbird](https://www.sendbird.com)

*The post [How to implement map previews and location sharing on Android](https://sendbird.com/developer/tutorials/android-chat-location-sharing-map-preview) appeared first on [Sendbird](https://sendbird.com).*

#Introduction

In-app location sharing and map previews offer an efficient way to communicate geolocation with friends and service providers. They remove any ambiguity about the directions to reach a location and provide peace of mind while allowing users to monitor the progress of a trip. For example, location sharing simplifies the life of delivery service personnel and improves their customer’s satisfaction when sending their location upon inquiry. 

Mapping and messaging are fantastic ways to coordinate live interactions. Rory Sutherland, Vice Chairman of Ogilvy & Mather Group and author of Alchemy: The Dark Art and Curious Science of Creating Magic in Brands, Business, and Life, reminds us why the Uber map was [magic] (https://www.youtube.com/watch?v=iueVZJVEmEs). He called it: 

*“…a psychological moonshot, because it does not reduce the waiting time for a taxi but simply makes waiting 90% less frustrating.”* – Rory Sutherland

As you can guess, this feature is specifically relevant for apps in the industries of:

* Transportation and ridesharing 
* Delivery and logistics 
* Food or grocery delivery
* Other consumer product delivery
* Online to offline services

This simple tutorial will walk you through the implementation of location sharing with easily digestible within-message map previews. 

Please note that this guide assumes you have already implemented chat using the Sendbird SDK. If you have not, check out the [docs](https://sendbird.com/docs/chat/v3/android/quickstart/send-first-message) or this [tutorial](https://sendbird.com/developer/tutorials/build-chat-uikit-android) to learn how to do this.

Let’s begin! 💻

#Implementing location sharing and map previews in Sendbird

When a user presses the “Share Location” button, Android’s LocationManager class provides the user’s geographic coordinates. Sendbird sends their location in a UserMessage with the CustomType set to location. After sending the message, it is inserted into the RecyclerView through its adapter. Based on the MessageType(UserMessage) and the CustomType(location), the layoutInflater inflates a custom view containing the MapView. Finally, you add geographic coordinates to the MapView.

Please note that using the Google Play Service Maps SDK, users can share their location from within the in-app chat and the recipient can open this location in Google Maps. Sendbird displays the map in an easily digestible preview for quick consumption.

![alt text](https://sendbird.com/wp-content/uploads/image3-1.png "Logo Title Text 1")

To implement location sharing and map previews, follow these steps:

* Understand the prerequisites (outlined below) for location  sharing and map previews on Android
* Obtain permission to use the user’s location
* Declare your API access token and a dependency for maps
* Create the layout for sender and recipient
* Retrieve the user’s location
* Send the user’s location in a UserMessage
* Handle the received message by checking the custom type and bind it to a view

### Prerequisites for location sharing and map previews

To reiterate, this guide assumes that you have already implemented chat using the Sendbird SDK. Check out the [docs] (https://sendbird.com/docs/chat/v3/android/quickstart/send-first-message) or this [tutorial](https://sendbird.com/developer/tutorials/build-chat-uikit-android) for more information.

Note that the code in this guide uses Sendbird’s [SyncManager SDK] (https://sendbird.com/docs/syncmanager/v1/android/getting-started/about-syncmanager#1-about-syncmanager) to send and receive messages.

You will need:

* [Sendbird Android SDK] (https://sendbird.com/docs/chat/v3/android/quickstart/send-first-message#1-send-your-first-message)
* [Google Play Service Maps SDK] (https://developers.google.com/maps/documentation/android-sdk/start)
* [A Google API access Token] (https://developers.google.com/maps/documentation/android-sdk/get-api-key)

Note:

* If you are using Android’s built-in emulator, note that it will likely not show your location.

Other resources:

* Google’s [official guide on maps] (https://developers.google.com/maps/documentation/android-sdk/intro)

* Google’s [official sample apps] (https://github.com/googlemaps/android-samples) using maps

## Step 1: Obtain permission to use the user’s location

For location sharing to work, you need to obtain permission to use the user’s location.

Request this at runtime. For the sake of brevity, this guide omits the runtime code.

Instead, it shows permission as it is shown in the AndroidManifest.xml.

{% gist     https://gist.github.com/AlexPrestonSB/50dc646a3b7236013cc4f9f54186a3e5 file=AndroidManifest.xml %}

[Gist](https://gist.github.com/AlexPrestonSB/50dc646a3b7236013cc4f9f54186a3e5#file-androidmanifest-xml)

## Step 2: Declare your API access token and add a dependency for maps

Declare your API access token in the AndroidManifest.xml.

{% gist https://gist.github.com/AlexPrestonSB/4110a4386681ebc6f887d5fe2c882aee file=AndroidManifest.xml %}

[Gist](https://gist.github.com/AlexPrestonSB/4110a4386681ebc6f887d5fe2c882aee)

Add a dependency for maps in the app level build.gradle file.

{% gist https://gist.github.com/AlexPrestonSB/1f075eeb99b6297e47a0b8af3997965d file=build.gradle %}

[Gist](https://gist.github.com/AlexPrestonSB/1f075eeb99b6297e47a0b8af3997965d)

## Step 3: Create the layout for the sender and recipient

Create a layout for both sides of the chat, i.e. both sender and recipient. This guide differentiates between them as “me” and “other,” where “me” represents the sender and “other” represents the recipient. Both should contain a MapView.

{% gist https://gist.github.com/AlexPrestonSB/7fb891e7c5a88ff4bc23be71ba96a7df file=item_gchat_map_me.xml %}

[Gist] (https://gist.github.com/AlexPrestonSB/7fb891e7c5a88ff4bc23be71ba96a7df)

See the full gist for each layout.

Me (sender): 

{% gist https://gist.github.com/AlexPrestonSB/e8b8f5ef59993e689f443aa7eab1b7e5 file=item_gchat_map_me.xml %}

[Gist] (https://gist.github.com/AlexPrestonSB/e8b8f5ef59993e689f443aa7eab1b7e5)

Other (recipient):

{% gist https://gist.github.com/AlexPrestonSB/0ac419e532bc8c2cd668712bc40e6756 file=item_gchat_map_other.xml %}

[Gist](https://gist.github.com/AlexPrestonSB/0ac419e532bc8c2cd668712bc40e6756)

Note: This guide skips over the implementation for setting up the recyclerview, setting button listeners, etc. You can view the sample code in [this gist] (https://gist.github.com/AlexPrestonSB/3ccba33a45d8bf5ee899f01d0862fb4d).

## Step 4: Retrieve the user’s location

Retrieve the geographic coordinates from the LocationManager. This happens when the user decides to share their location.

{% gist https://gist.github.com/AlexPrestonSB/21abc8688cf807f4cd3421d3edb29a5e file=LocationShare.kt %}

[Gist] (https://gist.github.com/AlexPrestonSB/21abc8688cf807f4cd3421d3edb29a5e)

## Step 5: Send the user’s location in a UserMessage

Once you obtain the longitude and latitude, send it as a UserMessage. To indicate that it is a location, set the CustomType on the individual message to “location.”

Next, insert the message into the RecyclerView by adding it to the adapter.

See below for the full implementation.

{% gist https://gist.github.com/AlexPrestonSB/230b4aca24ddea46cf07dfc48f7fc778 file=GroupChannelChatPresenterImpl.kt %}

[Gist] (https://gist.github.com/AlexPrestonSB/230b4aca24ddea46cf07dfc48f7fc778)

## Step 6: Bind the view to your customer viewHolders

After adding the messages to the adapter, check the message type before binding the view. Do this by overriding getItemViewType.

{% gist https://gist.github.com/AlexPrestonSB/60f0d906a2783794ab2dabb1a7f9f6a6 file=CustomAdapter.kt %}

[Gist] (https://gist.github.com/AlexPrestonSB/60f0d906a2783794ab2dabb1a7f9f6a6)

Based on what getItemViewType returns, inflate the layout according to whether the message belongs to “me” (sender) or “other” (recipient).

{% gist https://gist.github.com/AlexPrestonSB/02cbc77173ec335d0ad7559e19b98954 file=CustomViewHolder.kt %}

[Gist] (https://gist.github.com/AlexPrestonSB/02cbc77173ec335d0ad7559e19b98954) 

Next, bind the views to your custom viewHolder.

{% gist https://gist.github.com/AlexPrestonSB/2d153f09bb5b5dc16e4f2b669e368629 file=BindViewHolder.kt %}

[Gist] (https://gist.github.com/AlexPrestonSB/2d153f09bb5b5dc16e4f2b669e368629)

In your custom viewHolder, implement OnMapReadyCallback, and override the onMapReady function.

{% gist https://gist.github.com/AlexPrestonSB/2cb4d2b79b339dd3cc1f0b34c90518d4 file=CustomViewHolder.kt %}

[Gist] (https://gist.github.com/AlexPrestonSB/2cb4d2b79b339dd3cc1f0b34c90518d4) 

You may find it useful to check out the full Adapter code.

{% gist https://gist.github.com/AlexPrestonSB/3c3405c83f0a8d28fae808fafacbee60 file=GroupChannelChatAdapter.kt %}

[Gist] (https://gist.github.com/AlexPrestonSB/3c3405c83f0a8d28fae808fafacbee60)

## Conclusion 

And that’s a wrap! With Sendbird’s map preview and location sharing implementation, your users will now be able to send a map showing their location, thereby improving communication with others and making their app experience a bit more magical.

Happy coding! 👩‍💻