Develop
Develop
Select your platform

Play a video

Updated: Oct 2, 2024

Before you begin

In this tutorial, you’ll learn how to edit the UI of your Spatial SDK panel to display a video.

Step 1: Update your layout to display a web view

Display a video on your large panel by using a web view.
  1. In Android Studio, open res/layout/ui_example.xml and replace the code with this sample.
     <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="left"
       android:background="@drawable/layout_bg"
       android:clipToOutline="true"
     >
    
       <WebView
           android:id="@+id/web_view"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:layout_gravity="center"
           />
    
     </LinearLayout>
    
  2. Build and run the app.
    The panel is now blank.

Step 2: Point your web view to a YouTube video

Now, connect the web view to a video.
  • In Android Studio, in StarterSampleActivity.kt, change your code to match this code block by adding the code preceded by a + and removing the code preceded by a -.
      + import android.webkit.WebView
        ...
    
        override fun registerPanels(): List<PanelRegistration> {
          return listOf(
              PanelRegistration(R.layout.ui_example) {
                config {
                  themeResourceId = R.style.PanelAppThemeTransparent
                  includeGlass = false
      -           width = 2.0f
      -           height = 1.5f
                  enableLayer = true
                  enableTransparent = true
                }
      +         panel {
      +           val webView = rootView?.findViewById<WebView>(R.id.web_view)
      +           val webSettings = webView!!.settings
      +           webSettings.javaScriptEnabled = true
      +           webSettings.mediaPlaybackRequiresUserGesture = false
      +           webView!!.loadUrl("https://www.youtube.com/embed/Exu7r2vZpcw?autoplay=1;fs=1;autohide=0;hd=0;")
      +         }
              })
        }
    
The code introduces a panel { } section. The panel gives you a hook to execute code on UI elements within the panel. Once the WebView is retrieved from the rootView, you can modify settings on it and load a URL into it. loadUrl() is also a standard Android method. To learn more about it, see LoadUrl.
The code deletes the width and height settings in the config { } section because Spatial Editor is now providing these values.

Next steps

Did you find this page helpful?
Thumbs up icon
Thumbs down icon