Sharing a Matterport Space can take three forms:
- For social media, email, texts, and general sharing, just share the link.
- For webpages, embed it on your page with an <iframe> HTML tag.
- Directly embed the 3D Showcase player in your Android app.
This third option, covered here in this article, is only relevant for software engineers who are creating apps that include Matterport 3D Showcase.
Android (WebView)
First, declare permissions to access the internet in AndroidManifest.xml.
<uses-permission android:name="android.permission.INTERNET"/>
Next, add WebView to your layout.
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Finally, enable WebGL for your WebView and load the URL.
final WebView webView = (WebView) findViewById(R.id.webView);
// enable WebGL
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.getSettings().setAllowFileAccessFromFileURLs(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.getSettings().setAllowFileAccessFromFileURLs(true);
// show the WebGL player
webView.loadUrl(“https://my.matterport.com/show/?m=fZKxJgeSWQZ”);
webView.loadUrl(“https://my.matterport.com/show/?m=fZKxJgeSWQZ”);
Be sure to add a handler for VR links.
// handle VR links
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if(url.contains("matterport.com/vr/show")) {
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
return true;
}
return false;
}
});
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if(url.contains("matterport.com/vr/show")) {
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
return true;
}
return false;
}
});
Android (Chrome Custom Tabs)
The previous method uses WebView from WebKit. You can also use Chrome Custom Tabs.
While either method will work, there are advantages and disadvantages for both.
| WebView | Chrome Custom Tabs | |
| Embedding Style |
Can be embedded at any place and any size. Can be full screen without URL top bar. |
Can be a "browser tab" only. No fullscreen mode (cannot hide URL bar). Cannot embed as a view in application UI (a ListView element). |
| Loading Time | Slightly slower | Slightly faster (See Chrome Docs) |
| Customization | More complete (analytics, capture events and create actions, etc) | Limited (change title bar color, add action items, etc) |
| WebVR | Not Supported | Supported |
| Output |  |
 |
For more info and how to implement please read the Chrome docs.