The Blaze SDK provides a specialized container for displaying content in tabs:

BlazeMomentsPlayerContainerTabs - A class designed to manage and facilitate the playback of moments organized in tabs. Each tab can have its own data source, title, and configuration. The container provides a rich set of features for controlling tab visibility, selection, and player interaction.

Usage:
Instantiate the BlazeMomentsPlayerContainerTabs with the desired configuration and delegate, then use the startPlaying() method to begin playback of moments within the specified tabs. The dismissPlayer() method allows for graceful playback termination.

📘

Player Container Tabs will notify if any data exists for display.

Player Container Tabs doesn't provide empty state UI display.
App developers should make sure to decide on proper logic for empty state.

BlazeMomentsPlayerContainerTabs

initialize

Initializes a new instance of BlazeMomentsPlayerContainerTabs

class BlazeMomentsPlayerContainerTabs(
    containerSourceId: String,
    containerTabsView: FrameLayout,
    containerTabsDelegate: BlazePlayerContainerTabsDelegate,
    tabs: List<BlazeMomentsContainerTabItem>,
    playerStyle: BlazeMomentsPlayerStyle,
    tabsStyle: BlazePlayerTabsStyle,
    lifecycleOwner: LifecycleOwner,
    storeOwner: ViewModelStoreOwner,
    momentsPlaybackConfiguration: BlazeMomentsPlaybackConfiguration? = null
)

Example

val momentsPlayerStyle = BlazeMomentsPlayerStyle.base().apply {
  	buttons.exit.isVisible = false
}
val tabsStyle = BlazePlayerTabsStyle.base()

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

val tabsContainer = BlazeMomentsPlayerContainerTabs(
    containerSourceId = "unique-container-source-id",
    containerTabsView = frameLayoutContainer,
    containerTabsDelegate = object : BlazePlayerContainerTabsDelegate {
        // Implementation
    },
    tabs = tabs,
    playerStyle = momentsPlayerStyle,
    tabsStyle = tabsStyle,
    lifecycleOwner = this,
    storeOwner = this
)

BlazeMomentsContainerTabItem

The BlazeMomentsContainerTabItem class represents a single tab in the container. Each tab can be configured with the following properties:

data class BlazeMomentsContainerTabItem(
    val containerId: String,
    var title: String,
    var dataSource: BlazeDataSourceType,
    var shouldOrderMomentsByReadStatus: Boolean = true,
    var cachePolicyLevel: BlazeCachingLevel = BlazeSDK.cachingLevel,
    var momentsAdsConfigType: BlazeMomentsAdsConfigType = BlazeMomentsAdsConfigType.FIRST_AVAILABLE_ADS_CONFIG,
    var isVisible: Boolean = true,
    var icon: BlazePlayerButtonCustomImageStates? = null
)

Properties

containerId

A unique identifier for the tab. Must be unique within the container.

title

The display title of the tab.

dataSource

The data source for the tab's content, built with BlazeDataSourceType.

shouldOrderMomentsByReadStatus

When true, moments are ordered with unread content appearing first. Defaults to true.

cachePolicyLevel

Controls caching behavior for the tab's content. Defaults to the global SDK caching level.

momentsAdsConfigType

Configures ad behavior for the tab. Defaults to FIRST_AVAILABLE_ADS_CONFIG.

isVisible

Controls tab visibility. When false, the tab is hidden from the UI.

icon

Optional custom icon for the tab.

BlazePlayerTabsStyle

The BlazePlayerTabsStyle class represents the visual style configuration for the tabs interface.

data class BlazePlayerTabsStyle internal constructor(
    val padding: BlazeDirectionalPadding,
    val gradient: BlazePlayerTabsGradientStyle,
    val icon: BlazePlayerTabItemIconStyle?,
    val selectedTabState: BlazePlayerTabItemStyle,
    val unselectedTabState: BlazePlayerTabItemStyle,
    val activeTabIndicator: BlazePlayerActiveTabIndicatorStyle,
    var isTabTitleVisibleWhenSingleTab: Boolean,
    var isTabVisibleWhenEmpty: Boolean,
)

Use BlazePlayerTabsStyle.base() to obtain the default style, then customize via .apply { ... }:

val tabsStyle = BlazePlayerTabsStyle.base().apply {
    activeTabIndicator.isVisible = true
    isTabTitleVisibleWhenSingleTab = false
}

Properties

padding

The padding around the tabs strip.

gradient

The gradient style shown behind the tabs strip.

icon

Optional icon style shown alongside the tab title.

selectedTabState

The style applied to the currently selected tab.

unselectedTabState

The style applied to unselected tabs.

activeTabIndicator

The underline indicator style for the active tab. See BlazePlayerActiveTabIndicatorStyle.

isTabTitleVisibleWhenSingleTab

Controls whether the tab bar is shown when the container has only a single visible tab.

• false (default) — the tab bar (and its gradient) is hidden when there's a single visible tab, and the player is laid out like a standalone player.
• true — the tab bar is shown even for a single visible tab.

With two or more visible tabs, the tab bar is always shown regardless of this flag.

📘

This is a setup-time configuration. Changing it via updateTabsStyle() at runtime has no effect on single-tab visibility — set it up front (constructor tabsStyle, or before startPlaying()).

isTabVisibleWhenEmpty

Controls whether a tab stays visible when it has no content.

• true (default) — a tab with no content (or a failed data load) stays visible and presents the player's empty or error state.
• false — such a tab is automatically removed after its content is prepared.

The first tab is always kept regardless of this flag.

momentsPlaybackConfiguration

momentsPlaybackConfiguration: BlazeMomentsPlaybackConfiguration

The playback configurations for the Moments player. See more at BlazeMomentsPlaybackConfiguration.

BlazePlayerActiveTabIndicatorStyle

The BlazePlayerActiveTabIndicatorStyle class represents the style configuration for the indicator displayed on the active (selected) tab.

The indicator is opt-in: it is not shown unless isVisible is set to true. The indicator color always matches the selected tab's text color and cannot be configured separately. The indicator width always matches the selected tab title's text width. The indicator is always center-aligned beneath the tab title.

data class BlazePlayerActiveTabIndicatorStyle internal constructor(
    var isVisible: Boolean,
    var height: BlazeDp,
)

Properties

isVisible

A flag indicating whether the indicator is shown on the active tab. Defaults to false (no indicator).

height

The height of the underline bar.

Methods

startPlaying

fun startPlaying()

Starts playing content beginning with the first visible tab. The container will attempt to restore the previously selected tab if available.

dismissPlayer

fun dismissPlayer()

Dismisses the player and removes it from the container view.

upsertTabs

fun upsertTabs(tabs: List<BlazeMomentsContainerTabItem>)

Updates existing tabs or adds new ones based on their container IDs. If a tab with the same containerId exists, it will be replaced; otherwise, it will be added to the end of the tabs list.

updateTabsStyle

fun updateTabsStyle(tabsStyle: BlazePlayerTabsStyle)

Updates the style configuration for the tabs without requiring a restart of playback.

removeTabs

fun removeTabs(ids: List<String>)

Removes tabs with the specified container IDs from the container.

reloadAllTabs

@Keep
@MainThread
fun reloadAllTabs()

Reloads the content of all tabs from their configured data sources, including the currently active tab.

Each tab re-fetches its data and updates the displayed content. If the active tab is reloaded, the player is disposed and re-embedded with fresh content, starting from the first moment.

If a tab's data source fails during reload, that tab retains its previously cached content. Other tabs are not affected.

📘

Recommended for use when the user is not actively viewing the tabs component, as the active tab will be reset.

reloadNonActiveTabs

@Keep
@MainThread
fun reloadNonActiveTabs()

Reloads the content of all tabs except the currently active one.

Each non-active tab re-fetches its data and updates its content. The active tab remains untouched, preserving the user's current viewing experience.

If a tab's data source fails during reload, that tab retains its previously cached content. Other tabs are not affected.

reloadTab (by index)

@Keep
@MainThread
fun reloadTab(at: Int)

Reloads the content of a specific tab at the given index from its configured data source.

This method re-fetches data for the specified tab and updates its displayed content. If the specified tab is currently active, the player is disposed and re-embedded with fresh content.

If the tab's data source fails during reload, the tab retains its previously cached content.

No-op when the index is out of bounds.

Parameters:

• at: The index of the tab to reload (0-based)

reloadTab (by container ID)

@Keep
@MainThread
fun reloadTab(containerId: String)

Reloads the content of a specific tab identified by its container ID from its configured data source.

This method re-fetches data for the specified tab and updates its displayed content. If the specified tab is currently active, the player is disposed and re-embedded with fresh content.

If the tab's data source fails during reload, the tab retains its previously cached content.

No-op when no tab matches the provided container ID.

Parameters:

• containerId: The container ID of the tab to reload

Reload Usage Example

// Reload all tabs (e.g. on pull-to-refresh or app foregrounding)
tabsContainer.reloadAllTabs()

// Reload only background tabs while user is watching the active tab
tabsContainer.reloadNonActiveTabs()

// Reload a specific tab by index
tabsContainer.reloadTab(at = 0)

// Reload a specific tab by container ID
tabsContainer.reloadTab(containerId = "unique-tab-id-trending")

resumePlayer

fun resumePlayer()

Resumes playback if the player is paused.

pausePlayer

fun pausePlayer()

Pauses playback without dismissing the player.

onVolumeChanged

fun onVolumeChanged()

Call this function when volume changes through device keys are detected.

blockPlayerInteraction

fun blockPlayerInteraction()

Blocks user interaction with the player.

unblockPlayerInteraction

fun unblockPlayerInteraction()

Enables user interaction with the player.

blockTabsInteraction

fun blockTabsInteraction()

Blocks user interaction with the tabs.

unblockTabsInteraction

fun unblockTabsInteraction()

Enables user interaction with the tabs.

selectTab

fun selectTab(containerId: String)

Programmatically selects a tab by its container ID.

selectTabAt

fun selectTabAt(index: Int)

Programmatically selects a tab by its index.

updatePlaybackConfiguration

method signature

fun updatePlaybackConfiguration(playbackConfiguration: BlazeMomentsPlaybackConfiguration?)

Updates the playback configuration for the moments player.

playbackConfiguration: The new playback configuration to apply.

Pass null to reset to the global default playback configuration.

Static Methods

prepareTabs

fun prepareTabs(preparableArgsList: List<BlazeMomentsContainerTabPreparableArgs>)

Prepares content for multiple tabs in advance. This is useful for preloading content before displaying the tabs.

BlazeMomentsContainerTabPreparableArgs

data class BlazeMomentsContainerTabPreparableArgs(
    val containerId: String,
    val dataSource: BlazeDataSourceType,
    val cachePolicyLevel: BlazeCachingLevel = BlazeSDK.cachingLevel,
    val shouldOrderMomentsByReadStatus: Boolean = true
)

Example usage:

val preparableArgs = listOf(
    BlazeMomentsContainerTabPreparableArgs(
        containerId = "tab1",
        dataSource = BlazeDataSourceType.Labels(BlazeWidgetLabel.singleLabel("sports"))
    ),
    BlazeMomentsContainerTabPreparableArgs(
        containerId = "tab2",
        dataSource = BlazeDataSourceType.Labels(BlazeWidgetLabel.singleLabel("news"))
    )
)

BlazeMomentsPlayerContainerTabs.prepareTabs(preparableArgs)

IMPORTANT - Player Audio

To preserve the 'out-of-the-box' behavior regarding mute/unmute (i.e., when the user increases/decreases device volume, the mute/unmute state of the player behaves accordingly) - application developers must include the following code in the player host Activity:

override fun onKeyUp(keyCode: Int, event: KeyEvent?): Boolean {
    return if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN || keyCode == KeyEvent.KEYCODE_VOLUME_UP) {
        // tabsContainer should be assigned with the BlazeMomentsPlayerContainerTabs instance
        tabsContainer.onVolumeChanged()
        true
    } else {
        super.onKeyUp(keyCode, event)
    }
}

The SDK will handle the player's audio behavior after onVolumeChanged is called.

BlazePlayerContainerTabsDelegate

BlazePlayerContainerTabsDelegate is an interface that extends BlazePlayerSourceDelegate to provide additional functionality specific to tabs container interactions. This delegate inherits all the capabilities of BlazePlayerSourceDelegate (such as data loading events, player visibility events, CTA handling, etc.) while adding tab-specific delegate methods.

In addition to all methods available in BlazePlayerSourceDelegate, this delegate provides the following tab-specific methods:

onTabSelected

method signature

fun onTabSelected(containerId: String)

Called when a tab is selected, either programmatically or through user interaction.

Parameters:

• containerId: The unique identifier of the selected tab.