Layout Guide

The StreamLayer SDK overlay is added as a StreamLayerFragment on the host app layout. Both portrait and horizontal orientations are supported and they have different layouts. We will show an example for both Portrait and Landscape views below.

Portrait

For a portrait mode orientation, we will add the StreamLayerFragment in a ConstraintLayout to the root view as shown below.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <!-- this is your custom video player positioned at the top of the screen -->
    <com.host.app.PlayerView
        android:id="@+id/playerView"
        android:layout_width="match_parent"
        android:layout_height="210dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- StreamLayer SDK overlay integration -->
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/streamLayerFragment"
        android:name="io.streamlayer.sdk.main.StreamLayerFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:tag="StreamLayerFragment"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="@id/playerView" />

</androidx.constraintlayout.widget.ConstraintLayout>

In the above example, the StreamLayer overlay will take up the entire space of screen(we need draw some UI views over PlayerView), but when expanded, the overlay should reach bottom of the PlayerView to make the list of streams will not be visible. In this case you need to set the overlayHeight parameter for SDK - you can do it programmatically in your Activity:

 // listen player view layout changes and apply them to SDK ui
 private val layoutListener = View.OnLayoutChangeListener { view, _, _, _, _, _, _, _, _ ->
     view?.let {
         if (view.height > 0 && isScreenPortrait()) {
             withStreamLayerUI { overlayHeightSpace = view.height }
         }
     }
 }
 
 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   // add layout listener
   playerView.addOnLayoutChangeListener(layoutListener)
 }
 
 override fun onDestroy() {
    super.onDestroy()
    // remove layout listener
    playerView.removeOnLayoutChangeListener(layoutListener)
 }

The above solution is shown for a ConstraintLayout, but you can use it in any other Android layout scheme that suits your project's needs. Consult the App Host Guide for more information about how withStreamLayerUI function works.

Landscape

Now we will walk through adding the StreamLayerFragment to a landscape orientation. For the best UI experience the StreamLayerFragment should be full screen. When you do this, the Main overlay button will be positioned at the bottom right corner of the screen and the overlay will slide in from the left side of the screen. Tapping outside the overlay area will be ignored by the StreamLayer SDK and the touch events will be forwarded to the host activity.

Here is the example for the landscape layout.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <PlayerView
        android:id="@+id/playerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/streamLayerFragment"
        android:name="io.streamlayer.sdk.main.StreamLayerFragment"
        android:tag="StreamLayerFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

The width of the expanding overlay is 320dp and it expands from the left side. Tapping outside of the overlay will collapse the overlay and forward the touch event to the host activity. The overlay can also be collapsed by swiping back to the left side.

Please note that you can select on which side of the screen show an Overlay in landscape orientation - you can do it programmatically in your Activity. Consult the App Host Guide for more information about how withStreamLayerUI function works. See the following code snippet as an example:

override fun onPostCreate(savedInstanceState: Bundle?) {
        super.onPostCreate(savedInstanceState)
       
        withStreamLayerUI {
           // choose side here - START, END, LBAR
          overlayLandscapeMode = SLRAppHost.OverlayLandscapeMode.START
           // set LBar mode - FULL, SIDE_BAR
          lbarMode = SLRAppHost.LBarMode.FULL 
        }
    }

LBar Mode

For SLRAppHost.OverlayLandscapeMode.LBAR overlay landscape mode, you need to override and implement the interface SLRAppHost.Delegate

val appHostDelegate = object : SLRAppHost.Delegate {
        override fun onLBarStateChanged(slideX: Int, slideY: Int) {
        //some host app logic implementation
        }
    }

withStreamLayerUI { delegate = appHostDelegate }

Combining SLRAppHost.OverlayLandscapeMode.LBAR overlay mode with SLRAppHost.LBarMode.SIDE_BAR lbar mode need to apply more complex logic example

Layout Guide

Portrait

Landscape

LBar Mode

Further Reading