Guides
Start typing to search…

Layout Guide

Configure portrait and landscape layouts for the StreamLayer Android SDK. Learn how to position the StreamLayer Element using ConstraintLayout, configure overlay height, and set up L-bar and sidebar modes.

Layout Guide

The StreamLayer Element is added to your host app layout as a StreamLayerFragment. Both portrait and landscape orientations are supported, each with a different layout configuration. This guide walks through examples for both orientations.

Portrait

For portrait mode, add the StreamLayerFragment in a ConstraintLayout to the root view:

<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 this example, the StreamLayer Element takes up the entire screen space (the SDK needs to draw some UI views over the PlayerView), but when expanded, the StreamLayer Element should reach the bottom of the PlayerView so that the list of streams is not visible. Set the overlayHeightSpace parameter 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 uses a ConstraintLayout, but you can use any Android layout scheme that suits your project. Consult the UI Options Guide for more information about how the withStreamLayerUI function works.

Landscape

For landscape orientation, the StreamLayerFragment should be full screen for the best UI experience. The Launch Button is positioned at the bottom-right corner of the screen, and the StreamLayer Element slides in from the left side. Tapping outside the StreamLayer Element area is ignored by the SDK — touch events are forwarded to the host activity.

<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 expanding StreamLayer Element is 320dp wide and slides in from the left side. Tapping outside collapses it and forwards the touch event to the host activity. The StreamLayer Element can also be collapsed by swiping back to the left side.

You can select which side of the screen shows the StreamLayer Element in landscape orientation. Consult the UI Options Guide for more information about how the withStreamLayerUI function works:

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
        }
    }

L-Bar Mode

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

val appHostDelegate = object : SLRAppHost.Delegate {
        override fun onScreenSizeChanged(size: SLRAppHost.SLRScreenSize) {
        //some host app logic implementation
        }
    }

withStreamLayerUI { delegate = appHostDelegate }

Combining SLRAppHost.OverlayLandscapeMode.LBAR mode with SLRAppHost.LBarMode.SIDE_BAR requires more complex logic. See the demo app example.

Related

Updated 16 days ago