![\"Panorama](\"\/wp-content\/uploads\/sites\/44\/2019\/04\/Nexus-4-KitKat-Screentshot-1-614x1024.png\")
This can be accomplished in just a few lines of code with the Street View Panorama View control.<\/p>\n\t\t\t\tDisplaying a map in your app can add a lot of context for a specific location. You can also take things a step further, though, and create a fully immersive experience to help your users get where they need to be. This can be accomplished in just a few lines of code with the Street View Panorama View control.<\/p>\n
Previously, I covered how to use Google Maps Lite in your Xamarin.Android apps<\/a> for displaying non-interactive, light-weight maps. For the Panorama View, you will go through the same setup process of adding Google Play Services to your project and settings up your Google Maps API Key<\/a>. In this example, we will add more context our Coffee Filter app by adding a button to navigate to the Street View page.<\/p>\n The first step is to add a new layout. We are going to simply fill the entire page with a StreetViewPanoramaView as we want to fully immerse our users in the street view. You can of course embed the control into an existing page and make it any size you wish.<\/p>\n Similar to using Google Maps, we will need to implement a callback, The IOnStreetViewPanoramaReadyCallback interface has one method to implement In addition to this, it’s best practice to override OnResume, OnPause, OnDestroy, OnLowMemory, and OnSaveInstanceState in your Activity and call the matching methods on your StreetViewPanoramaView control. If you don’t want to wire the lifecycle events yourself, there’s also a Fragment & SupportFragment version of the StreetViewPanorama that will handle this for you automatically.<\/p>\n In Android KitKat, Google introduced a new API called Immersive Full-Screen<\/a> mode for an Activity. This enables your app to extend all the way into the status and navigation bars on the device. To take advantage of this, you simply need to add a few lines of code in your Activity, setting the SystemUiVisibility of the DecorView.<\/p>\n We now have a fully immersive, beautiful Street View Panorama View in our app!<\/p>\n To get started, be sure to download the Google Play Service component from the Component Store for your Android apps. Read through the entire Street View documentation<\/a> from Google for advanced options. We also have a full sample of adding Immersive mode to your Xamarin.Android apps<\/a>. You can find the full source code for this sample and Coffee Filter on my GitHub<\/a>.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":" Displaying a map in your app can add a lot of context for a specific location. You can also take things a step further, though, and create a fully immersive experience to help your users get where they need to be. This can be accomplished in just a few lines of code with the Street […]<\/p>\n","protected":false},"author":544,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[5,4],"class_list":["post-17441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-xamarin-platform"],"acf":[],"blog_post_summary":" Displaying a map in your app can add a lot of context for a specific location. You can also take things a step further, though, and create a fully immersive experience to help your users get where they need to be. This can be accomplished in just a few lines of code with the Street […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/17441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=17441"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/17441\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=17441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=17441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=17441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Add a StreetViewPanoramaView<\/h2>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<LinearLayout xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\r\n android:orientation="vertical"\r\n android:layout_width="fill_parent"\r\n android:layout_height="fill_parent">\r\n <com.google.android.gms.maps.StreetViewPanoramaView\r\n android:id="@+id\/panorama"\r\n android:layout_width="match_parent"\r\n android:layout_height="match_parent"\r\n android:layout_gravity="center" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
Setting up the Activity<\/h2>\n
IOnStreetViewPanoramaReadyCallback<\/code>, in our Activity and initialize our StreetViewPanorama.<\/p>\n\r\npublic class PanoramaActivity : ActionBarActivity, IOnStreetViewPanoramaReadyCallback\r\n{\r\n StreetViewPanoramaView streetViewPanoramaView;\r\n StreetViewPanorama streetPanorama;\r\n LatLng latlng;\r\n protected override void OnCreate (Bundle bundle)\r\n {\r\n base.OnCreate (bundle);\r\n SetContentView (Resource.Layout.panorama);\r\n \/\/pass in lat\/lng from parent activity\r\n var lat = Intent.GetDoubleExtra ("lat", 37.7977);\r\n var lng = Intent.GetDoubleExtra ("lng", -122.40);\r\n\r\n \/\/create LatLng to display\r\n latlng = new LatLng (lat, lng);\r\n \/\/find our panorama view and create async.\r\n streetViewPanoramaView = FindViewById<StreetViewPanoramaView> (Resource.Id.panorama);\r\n streetViewPanoramaView.OnCreate (bundle);\r\n streetViewPanoramaView.GetStreetViewPanoramaAsync (this);\r\n }\r\n}\r\n<\/pre>\nOnStreetViewPanoramaReady<\/code>. This will pass your StreetViewPanorama that you use to set certain properties and set the position to display. We will turn on just about every feature, and set the position to the position that was passed in from the parent activity.<\/p>\n\r\npublic void OnStreetViewPanoramaReady (StreetViewPanorama panorama)\r\n{\r\n this.streetPanorama = panorama;\r\n streetPanorama.UserNavigationEnabled = true;\r\n streetPanorama.StreetNamesEnabled = true;\r\n streetPanorama.PanningGesturesEnabled = true;\r\n streetPanorama.ZoomGesturesEnabled = true;\r\n\r\n streetPanorama.SetPosition (latlng);\r\n}\r\n<\/pre>\nFull Immersion<\/h2>\n
\r\npublic override void OnWindowFocusChanged (bool hasFocus)\r\n{\r\n base.OnWindowFocusChanged (hasFocus);\r\n if (hasFocus && (int)Build.VERSION.SdkInt >= 19) {\r\n Window.DecorView.SystemUiVisibility = \r\n (StatusBarVisibility)(SystemUiFlags.LayoutStable\r\n | SystemUiFlags.HideNavigation\r\n | SystemUiFlags.LayoutFullscreen \r\n | SystemUiFlags.Fullscreen\r\n | SystemUiFlags.ImmersiveSticky);\r\n }\r\n}\r\n<\/pre>\n![\"In](\"\/wp-content\/uploads\/sites\/44\/2019\/04\/ezgif.com-optimize-1.gif\")
<\/p>\nLearn More<\/h2>\n