Moments Widget to Tabs - Android

The SDK supports launching a fullscreen tabs player directly from a Moments widget tap. Instead of opening a single-moment player, the widget opens the multi-tab BlazeMomentsPlayerContainerTabs experience with all configured tabs.

The widget derives its displayed content from the first tab's data source, so the widget's feed and the first tab in the fullscreen player are always in sync.

BlazeMomentsWidgetTabsConfiguration

Configuration holder for a tab-backed Moments widget.

class BlazeMomentsWidgetTabsConfiguration(
    val containerSourceId: String,
    val tabs: List<BlazeMomentsContainerTabItem>,
    val containerTabsDelegate: BlazePlayerContainerTabsDelegate,
    val playerStyle: BlazeMomentsPlayerStyle? = null,
    val tabsStyle: BlazePlayerTabsStyle = BlazePlayerTabsStyle.base(),
    val controller: BlazeMomentsWidgetTabsController = BlazeMomentsWidgetTabsController()
)

Parameters

containerSourceId

A unique identifier for the tabs container session.

tabs

An ordered list of BlazeMomentsContainerTabItem entries. Must not be empty. The first tab's dataSource drives the widget's displayed content.

See BlazeMomentsContainerTabItem for details.

containerTabsDelegate

The delegate for the fullscreen tabs player interactions. See BlazePlayerContainerTabsDelegate.

playerStyle

Optional per-widget player style override. If null, the global default is used.

tabsStyle

Style configuration for the tabs UI. Defaults to BlazePlayerTabsStyle.base().

controller

A BlazeMomentsWidgetTabsController instance. Use this to programmatically control the active fullscreen tabs session after it opens (e.g. select a specific tab).

initWidget — Tabs Overload

Use this initWidget overload to initialize a tab-backed Moments widget:

fun initWidget(
    widgetLayout: BlazeWidgetLayout,
    tabsConfiguration: BlazeMomentsWidgetTabsConfiguration,
    widgetId: String,
    widgetDelegate: BlazeWidgetDelegate,
    cachingLevel: BlazeCachingLevel = BlazeSDK.cachingLevel,
    shouldOrderWidgetByReadStatus: Boolean = true,
    perItemStyleOverrides: Map<BlazeWidgetItemCustomMapping, BlazeWidgetItemStyleOverrides> = emptyMap(),
    playbackConfiguration: BlazeMomentsPlaybackConfiguration? = null,
    onWidgetItemClickHandler: ((BlazeWidgetItemClickParams) -> BlazeWidgetItemClickHandlerState)? = null
)

Example

val tabs = listOf(
    BlazeMomentsContainerTabItem(
        containerId = "tab-for-you",
        title = "For You",
        dataSource = BlazeDataSourceType.Labels(BlazeWidgetLabel.singleLabel("for_you"))
    ),
    BlazeMomentsContainerTabItem(
        containerId = "tab-trending",
        title = "Trending",
        dataSource = BlazeDataSourceType.Labels(BlazeWidgetLabel.singleLabel("trending"))
    )
)

val tabsConfig = BlazeMomentsWidgetTabsConfiguration(
    containerSourceId = "moments-widget-tabs-container",
    tabs = tabs,
    containerTabsDelegate = object : BlazePlayerContainerTabsDelegate {
        // Implementation
    },
    playerStyle = BlazeMomentsPlayerStyle.base().apply {
        buttons.exit.isVisible = true
    }
)

binding.momentsRowWidget.initWidget(
    widgetLayout = BlazeWidgetLayout.Presets.MomentsWidget.Row.verticalRectangles,
    tabsConfiguration = tabsConfig,
    widgetId = "moments-widget-tabs",
    widgetDelegate = object : BlazeWidgetDelegate {
        // Implementation
    }
)

Compose — BlazeComposeWidgetMomentsStateHandler (Tabs Constructor)

For Compose widgets, pass BlazeMomentsWidgetTabsConfiguration to the dedicated BlazeComposeWidgetMomentsStateHandler constructor:

BlazeComposeWidgetMomentsStateHandler(
    widgetId: String,
    widgetLayout: BlazeWidgetLayout,
    tabsConfiguration: BlazeMomentsWidgetTabsConfiguration,
    widgetDelegate: BlazeWidgetDelegate,
    cachingLevel: BlazeCachingLevel = BlazeCachingLevel.DEFAULT,
    shouldOrderWidgetByReadStatus: Boolean = true,
    perItemStyleOverrides: Map<BlazeWidgetItemCustomMapping, BlazeWidgetItemStyleOverrides> = emptyMap(),
    playbackConfiguration: BlazeMomentsPlaybackConfiguration? = null,
    onWidgetItemClickHandler: ((BlazeWidgetItemClickParams) -> BlazeWidgetItemClickHandlerState)? = null
)

Example

val stateHandler = BlazeComposeWidgetMomentsStateHandler(
    widgetId = "moments-compose-widget-tabs",
    widgetLayout = BlazeWidgetLayout.Presets.MomentsWidget.Row.verticalRectangles,
    tabsConfiguration = tabsConfig,
    widgetDelegate = object : BlazeWidgetDelegate { /* Implementation */ }
)

BlazeComposeMomentsWidgetRowView(
    modifier = Modifier.fillMaxWidth(),
    widgetMomentsStateHandler = stateHandler
)

BlazeMomentsWidgetTabsController

A limited controller for the active fullscreen tabs session opened by the widget. Operations are no-ops while no fullscreen tabs session is active.

class BlazeMomentsWidgetTabsController {
    val isActive: Boolean

    fun selectTab(containerId: String)
    fun selectTabAt(index: Int)
    fun reloadAllTabs()
    fun reloadNonActiveTabs()
}

Properties

isActive

true once a fullscreen tabs session is active and the controller can forward commands. false before the user taps the widget or after the fullscreen player is dismissed.

Methods

selectTab

Selects the tab whose containerId matches the given value.

tabsConfig.controller.selectTab("tab-trending")

selectTabAt

Selects the tab at the specified index.

tabsConfig.controller.selectTabAt(1)

reloadAllTabs

Reloads content for every tab.

reloadNonActiveTabs

Reloads content for all tabs except the currently selected one.

Updated 22 days ago

Did this page help you?