Multiple Surfaces

In this guide you will learn how to add/remove multiple fragment surfaces, each of which can contain an interactive map centered on a different desired location. The maps are fully 3D, supporting pan, pinch-zoom, rotate and tilt.

Setup

First, get an API key token, see the Getting Started guide.

Download the Maps & Navigation SDK for Android archive file

Download the MultipleSurfacesInFragment project archive file or clone the project with Git

See the Configure Android Example guide.

Run the example

In Android Studio, from the File menu, select Sync Project with Gradle Files

An android device should be connected via USB cable.

Press SHIFT+F10 to compile, install and run the example on the android device.

Click the envelope in the lower right corner to continue.

Click NEXT

Click the green + in the lower right corner to add a fragment with a map.

Each map can show a different location. Try to pan and zoom each map.

Click the red - in the lower left corner to remove the last added fragment.

How it works

You can open the MainActivity.kt file to see how to render multiple maps.

// Kotlin code

class FirstFragment : Fragment()
{
 override fun onCreateView(
     inflater: LayoutInflater, container: ViewGroup?,
     savedInstanceState: Bundle?
 ): View? {
     return inflater.inflate(R.layout.fragment_first, container, false)
 }
 override fun onViewCreated(view: View, savedInstanceState: Bundle?)
 {
     super.onViewCreated(view, savedInstanceState)
     view.findViewById<Button>(R.id.button_first).setOnClickListener
     {
         findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)
     }
 }
}

The first fragment.

class SecondFragment : Fragment()
{
 private val maps = mutableMapOf<Long, MapView?>()
 private val maxSurfacesCount = 9
 override fun onCreateView(
     inflater: LayoutInflater, container: ViewGroup?,
     savedInstanceState: Bundle?
 ): View? {
     return inflater.inflate(R.layout.fragment_second, container, false)
 }
 override fun onViewCreated(view: View, savedInstanceState: Bundle?)
 {
     super.onViewCreated(view, savedInstanceState)
     view.findViewById<Button>(R.id.button_second).setOnClickListener
     {
         findNavController().navigate(R.id.action_SecondFragment_to_FirstFragment)
     }
     val leftBtn = view.findViewById<FloatingActionButton>(R.id.bottomLeftButton)
     leftBtn.visibility = View.VISIBLE
     ButtonsDecorator.buttonAsDelete(requireContext(), leftBtn)
     {
         deleteLastSurface()
     }
     val rightBtn = view.findViewById<FloatingActionButton>(R.id.bottomRightButton)
     rightBtn.visibility = View.VISIBLE
     ButtonsDecorator.buttonAsAdd(requireContext(), rightBtn)
     {
         addSurface()
     }
     addSurface()
 }

The second fragment.

Each of the 2 fragments has a button to navigate to the other fragment, see res/navigation/nav_graph.xml in the project.

The SecondFragment also has a green + and a red x button to add or remove maps, respectively, using the addSurface() and deleteLastSurface() functions.

 private fun addSurface()
 {
     val linearLayout = view?.findViewById<LinearLayout>(R.id.scrolledLinearLayout) ?: return
     if (linearLayout.childCount >= maxSurfacesCount)
     {
         return
     }
     val surface = SdkCall.execute { GemSurfaceView(requireContext()) }
     surface?.layoutParams = ViewGroup.LayoutParams(
         ViewGroup.LayoutParams.MATCH_PARENT,
         ViewGroup.LayoutParams.MATCH_PARENT
     )
     surface?.onScreenCreated = { screen ->
         // Defines an action that should be done after the screen is created.
         onScreenCreated(screen)
     }
     val params = FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, 400)
     params.setMargins(50)
     val frame = FrameLayout(requireContext())
     frame.layoutParams = params
     frame.addView(surface)
     linearLayout.addView(frame)
 }
 private fun deleteLastSurface()
 {
     val linearLayout = view?.findViewById<LinearLayout>(R.id.scrolledLinearLayout) ?: return
     if (linearLayout.childCount == 0)
         return
     val lastIndex = linearLayout.childCount - 1
     val frame = (linearLayout[lastIndex] as FrameLayout)
     val lastSurface = frame[0] as GemSurfaceView
     SdkCall.execute
     {
         val mapsId = lastSurface.getScreen()?.address()
         // Release the map view.
         maps[mapsId]?.release()
         // Remove the map view from the collection of displayed maps.
         maps.remove(mapsId)
     }
     linearLayout.removeView(frame)
 }
 private fun onScreenCreated(screen: Screen)
 {
     SdkCall.checkCurrentThread() // Ensure we are on SDK thread.
     /*
     Define a rectangle in which the map view will expand.
     Predefined value of the offsets is 0.
     Value 1 means the offset will take 100% of available space.
      */
     val mainViewRect = RectF(0.0f, 0.0f, 1.0f, 1.0f)
     // Produce a map view and establish that it is the main map view.
     val mapView = MapView.produce(screen, mainViewRect) ?: return
     // Add the map view to the collection of displayed maps.
     maps[screen.address()] = mapView
 }
}

The addSurface() function calls onScreenCreated() which adds a map to the new surface, and also stores the map in a map container, like a list, to enable removing it later:

val mapView = MapView.produce(screen, mainViewRect)

maps[screen.address()] = mapView

The deleteLastSurface() function deletes the current map and removes it from the map container/list.

val mapsId = lastSurface.getScreen()?.address()

maps[mapsId]?.release()

maps.remove(mapsId)

Android Examples

Maps SDK for Android Examples can be downloaded or cloned with Git