Configure Video Feed

Video Feed integration

You need to add the FwVideoFeedView to your layout XML file

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- All custom app attributes are optional here -->
    <!-- You can remove all of them and let the widget use the default values -->
    <!-- Or set them programmatically -->
    <!-- Keep in mind if you use the Channel feedType then you must provide ChannelId too -->
    <!-- Keep in mind if you use the Playlist feedType then you must provide ChannelId and PlaylistId too -->
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_adBadgeBackgroundColor="#FFFECD"
        app:fw_adBadgeIsHidden="false"
        app:fw_adBadgeLabel="sponsored"
        app:fw_adBadgeShowOnThumbnails="true"
        app:fw_adBadgeTextColor="#000000"
        app:fw_adBadgeTextTypeface="@font/roboto"
        app:fw_backColor="@color/white"
        app:fw_channelId="Your encoded channel Id"
        app:fw_columns="3"
        app:fw_feedAutoplay="true"
        app:fw_feedLayout="grid"
        app:fw_feedResource="discovery"
        app:fw_feedTitleBackgroundColor="@color/purple_transparent"
        app:fw_feedTitlePosition="nested"
        app:fw_feedTitleTextColor="@color/black"
        app:fw_feedTitleTextNumberOfLines="1"
        app:fw_feedTitleTextPadding="4dp"
        app:fw_feedTitleTextSize="12sp"
        app:fw_feedTitleTextTypeface="@font/roboto"
        app:fw_itemSpacing="4dp"
        app:fw_playIconWidth="24dp"
        app:fw_playerMode="fit_mode"
        app:fw_roundedCorner="true"
        app:fw_roundedCornerRadius="16dp"
        app:fw_playlistId="Your encoded playlist Id"
        app:fw_showFeedTitle="true"
        app:fw_showPlayIcon="true"
        app:fw_showFireworkLogo="true"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

Later on your Activity's onCreate or your Fragment's onViewCreated find and initialize the FwVideoFeedView:

// You can create a view options with your custom parameters or ignore this step if you already have them in your layout
// Also creating ViewOptions is not mandatory and you can let the widget use its default values

val viewOptions = viewOptions {
    baseOptions {
        feedResource(
            FeedResource.Discovery, // It also can be Channel and Playlist
        )
    }
    layoutOptions {
        feedLayout(FeedLayout.GRID)
        columnCount(3)
        backgroundColor(Color.BLACK)
        feedTitlePosition(FeedTitlePosition.NESTED) // It also can be STACKED
        itemSpacing(4.dp)
        playIconWidth(24.dp)
        roundedCorner(true)
        roundedCornerRadius(16.dp)
        showPlayIcon(true)
    }
    adBadgeOptions {
        adBadgeBackColor(Color.BLUE)
        adBadgeIsHidden(false)
        adBadgeLabel(AdBadgeTextType.SPONSORED)
        adBadgeShowOnThumbnails(true)
        adBadgeTextColor(Color.WHITE)
        adBadgeTypeface(Typeface.SANS_SERIF) // You can use the Typeface of your choice
    }
    titleOptions {
        feedTitleBackgroundColor(Color.TRANSPARENT)
        feedTitleBackgroundDrawable(
            GradientDrawable(
                GradientDrawable.Orientation.TOP_BOTTOM,
                arrayOf(Color.BLUE, Color.CYAN, Color.MAGENTA).toIntArray()
            ),
        )
        feedTitleTextColor(Color.WHITE)
        feedTitleTextNumberOfLines(1)
        feedTitleTextPadding(4.dp)
        feedTitleTextSize(12.dp)
        feedTitleTextTypeface(Typeface.SANS_SERIF) // You can use the Typeface of your choice
        showFeedTitle(true)
    }
    playerOptions {
        autoplay(true)
        playerMode(PlayerMode.FIT_MODE)
        showFireworkLogo(true)
        shareBaseUrl("https://your-business.com") // shareBaseUrl is an optional parameter.
    }
}

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)

// init video feed view with view options
// videoFeedView.init(viewOptions)

// or without view options
videoFeedView.init()

// You can create a view options with your custom parameters or ignore this step if you already have them in your layout
// Also creating ViewOptions is not mandatory and you can let the widget use its default values
     
     BaseOption baseOption = new BaseOption.Builder()
                .feedResource(new FeedResource.Playlist("Encoded Channel ID","Encoded Playlist Id"))
                .build();

        LayoutOption layoutOption = new LayoutOption.Builder()
                .feedLayout(FeedLayout.HORIZONTAL)
                .columnCount(3)
                .backgroundColor(Color.BLACK)
                .feedTitlePosition(FeedTitlePosition.NESTED) // It also can be STACKED
                .itemSpacing(4)
                .playIconWidth(24)
                .roundedCorner(true)
                .roundedCornerRadius(16)
                .showPlayIcon(true)
                .build();

        AdBadgeOption adBadgeOptions = new AdBadgeOption.Builder()
                .adBadgeBackColor(Color.BLUE)
                .adBadgeIsHidden(false)
                .adBadgeLabel(AdBadgeTextType.SPONSORED)
                .adBadgeShowOnThumbnails(true)
                .adBadgeTextColor(Color.WHITE)
                .adBadgeTypeface(Typeface.SANS_SERIF) // You can use the Typeface of your choice
                .build();


        TitleOption titleOptions = new TitleOption.Builder()
                .feedTitleBackgroundColor(Color.TRANSPARENT)
                .feedTitleBackgroundDrawable(
                    new GradientDrawable(
                            GradientDrawable.Orientation.TOP_BOTTOM,
                            IntStream.of(Color.BLUE, Color.CYAN, Color.MAGENTA).toArray()))
                .feedTitleTextColor(Color.WHITE)
                .feedTitleTextNumberOfLines(1)
                .feedTitleTextPadding(4)
                .feedTitleTextSize(12)
                .feedTitleTextTypeface(Typeface.SANS_SERIF) // You can use the Typeface of your choice
                .showFeedTitle(true)
                .build();

        PlayerOption playerOptions = new PlayerOption.Builder()
                .autoplay(true)
                .playerMode(PlayerMode.FIT_MODE)
                .showFireworkLogo(true)
                .shareBaseUrl("https://your-business.com") // shareBaseUrl is an optional parameter.
                .build();

        ViewOptions viewOptions = new ViewOptions.Builder()
                .baseOption(baseOption)
                .layoutOption(layoutOption)
                .adBadgeOption(adBadgeOptions)
                .playerOption(playerOptions)
                .titleOption(titleOptions)
                .build();

        videoFeed.init(viewOptions);
        
// init video feed view with view options
        videoFeedView.init(viewOptions);

// or without view options
        videoFeedView.init(null);
        
// after video feed view is not needed anymore it should be destroyed
@Override
protected void onDestroy() {
    videoFeedView.destroy();
    super.onDestroy();
}

After FwVideoFeedView is not needed anymore it should be destroyed. Call videoFeedView.destroy() to clean up all resources related to the instance of FwVideoFeedView. If FwVideoFeedView is used inside a fragment, it should be destroyed in fragment's onDestroyView() lifecycle callback:

MyFragment: Fragment() {
   ... 
   override fun onDestroyView() {
     videoFeedView.destroy()
     super.onDestroyView()
   }
}

@Override
public void onDestroyView() {
    videoFeedView.destroy();
    super.onDestroyView();
}

If FwVideoFeedView is used inside an Activity it should be destroyed in activity's onDestroy() lifecycle callback:

MyActivity: Activity() {
   ... 
   override fun onDestroy() {
     videoFeedView.destroy()
     super.onDestroy()
   }
}

// after video feed view is not needed anymore it should be destroyed
    @Override
    protected void onDestroy() {
        videoFeedView.destroy();
        super.onDestroy();
    }

FwLifecycleAwareVideoFeedView (Deprecated, please use FwVideoFeedView instead)

Is a wrapper around the FwVideoFeedView which accepts lifecycle object in its init() function. This allows to clean up all the resources related to underlaying FwVideoFeedView automatically without calling destroy() function. This is convenient when activity or fragment does not hold the reference to FwVideoFeedView(ex. when FwVideoFeedView is used as an item inside RecyclerView.

class MyActivity: Activity() {
    private lateinit var lifecycleAwareViewFeedView: FwLifecycleAwareVideoFeedView
    
    override fun onCreate() {
        ...
        lifecycleAwareViewFeedView.init(viewOptions, lifecycle)
    }
    
    override fun onDestroy() {
        // No need to destroy lifecycleAwareViewFeedView
        super.onDestroy()
    }
}

public class MyActivity extends Activity {
    private FwLifecycleAwareVideoFeedView lifecycleAwareViewFeedView;
    
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        lifecycleAwareViewFeedView.init(viewOptions, getLifecycle());
    }
    
    @Override
    protected void onDestroy() {
        // No need to destroy lifecycleAwareViewFeedView
        super.onDestroy();
    }
}

Video Feed options

Feed resource

In this table, you can check the different states of the state machine of the Feed type and its parameters.

✅ Means correct value

❌ Means invalid value or empty value

Feed Resource Type

ChannelId

PlaylistId

Result

Discovery

✅

Discovery feed

Discovery

✅

❌

Discovery feed

Discovery

❌

✅

Discovery feed

Discovery

❌

Discovery feed

Channel

✅

Channel feed

Channel

✅

❌

Channel feed

Channel

❌

✅

Server returns an empty feed

Channel

❌

Server returns an empty feed

Playlist

✅

Playlist feed

Playlist

❌

✅

Server returns an empty feed

Playlist

✅

❌

Server returns an empty feed

Playlist

❌

Server returns an empty feed

Feed autoplay

This value determines if the first complete visible item of the feed shows as a video instead of a static thumbnail.

Feed Layout

Feed layout is the way that Firework Android SDK shows video feeds to the user.

FeedLayout.HORIZONTAL: Shows video feeds as a horizontal list (default value)
FeedLayout.GRID: Shows video feeds as a grid layout
FeedLayout.VERTICAL: Shows video feeds as a vertical list

Column count

Using this parameter you can set the number of columns in a grid layout FeedLayout.GRID. (default value is 1)

Background color

This is the background color of the video feed view. (default value is transparent)

Item spacing

This value determines the space between items in the list. (default value is 8dp)

Rounded corner

This value determines whether the video feed view should round the corner of the items in the video feeds or not. (default value is false)

Rounded corner radius

This value specifies the radius of the rounded corner if you set the rounded corner. (default value is 5dp)

Show feed title

This value is being used to show the title of each video item or not. (default value is false)

Feed title text typeface

You can change the font of video titles in feed, this can be the typeface of your choice, by default it uses Typeface.Default.

Feed title position

This position defines where the video titles are displayed.

FeedTitlePosition.NESTED: Shows the video titles over the bottom part of the video thumbnail.
FeedTitlePosition.STACKED: Shows the video title below the thumbnail.

Feed title text color

The color of the video title. (default value is #80000000)

Feed title text number of lines

Number of lines of the video feed title. (default value is 2)

Feed title text padding

Padding of the feed title. (default value is 8dp)

Feed title text size

Feed title text size. (default value is 14sp)

Feed title background color

This is the background color of the feed title view, this applies to NESTED and STACKED feed title positions.

Feed title background drawable

This accepts a GradientDrawable and it will be shown as the background of feed titles, this applies to NESTED and STACKED feed title positions, Note: This background will get priority over Feed title background color

Player Mode

Determines the player mode and can be one of

PlayerMode.FIT_MODE: This state causes the player surface cuts into a smaller area of the screen while it maintains the 9:16 aspect ratio. Also, it makes the corner of the player rounded. (default value)
PlayerMode.FULL_BLEED_MODE: This state causes the player surface to fill the mobile screen without rounding the corner of the screen, Also player maintains the 9:16 aspect ratio of the player.

Show play icon

This value determines whether the video feed view shows a play icon in the center of the feed item or not. (default value is false)

Play icon width

This value determines the width of the play icon shown on top of video feed thumbnails.

Ad badge background color

These values specify the color of the background of the ad badge on the top right corner of the ad videos. (default value is Transparent)

Ad badge is hidden

This value determines wheter the ad label is visible or not in player.

Ad badge is show on thumbnails

This value determines wheter the ad label is visible or not in FwVideoFeedView.

Ad badge text typeface

You can change the font of ad badge, this can be the typeface of your choice, by default it uses Typeface.Default.

Ad badge text color

These values specify the color of the text of the ad badge on the top right corner of the ad videos. (default value is White)

Ad badge label

The text is being shown on the ad badge view in the top right corner of the ad videos. It has two static options:

Sponsored (default value)
Ad

Show Firework Logo

This value determines if the firework logo is shown in player.

Feed item click listener

To track clicks on the feed item use setOnFeedItemClickListener function of the FwVideoFeedView class. Only one listener can be set per FwVideoFeedView instance.

videoFeedView.setOnFeedItemClickListener(object: FeedItemClickListener {
                override fun onItemClicked(feedItem: FeedItemClickListener.FeedItem) {
                   // Handle click here
                }
            })
        }

videoFeedView.setOnFeedItemClickListener(new FeedItemClickListener() {
    @Override
    public void onItemClicked(@NonNull FeedItem feedItem) {
        // Handle click here
    }
});

Check Video Deep Linking section to learn more about custom share base URL.

Share & Video Deep linking

Video feed error listener

To receive any errors that may happen in the video feed, use the setOnErrorListener function of the FwVideoFeedView class. Only one listener can be set per FwVideoFeedView instance.

videoFeedView.setOnErrorListener { error ->
    // Handle video feed error here
}

  videoFeedView.setOnErrorListener(new FwErrorListener() {
            @Override
            public void onFwError(FwError fwError) {
                // Handle video feed error here
            }
   });

The possible error types are:

// Video feed related errors
sealed interface VideoFeedError : FwError {

    object LoadingFailed : VideoFeedError
}

// Ad related errors
sealed interface AdsError : FwError {
    data class VideoLoadFailed(val videoId: String) : AdsError
    data class PlaybackFailed(val message: String) : AdsError
    object ImaAdFailed : AdsError
}

// Livestream related errors
sealed interface LivestreamError : FwError {
    object MissingLivestreamInitializer : LivestreamError
    object EngineFailed : LivestreamError
}

// Share related errors
sealed interface ShareContentError : FwError {
    object EmptyShareUrl : ShareContentError
    object SharingFailed : ShareContentError
}

Refresh video feed view

Call the videoFeedView.refresh() function to refresh the content of FwVideoFeedView.

Monitor and respond to state changes in the video feed

The setOnFeedViewStateListener() method in FwVideoFeedView allows you to monitor and respond to state changes in the video feed. This method provides real-time feedback about the feed's loading status, content availability, and error conditions.

fun setOnFeedViewStateListener(feedViewStateListener: FeedViewStateListener)

Parameters

feedViewStateListener (FeedViewStateListener): A listener interface that receives feed state change notifications

FeedViewStateListener Interface

fun interface FeedViewStateListener {
    fun onLoadStateChanged(feedViewState: FeedViewState)
}

FeedViewState Types

The FeedViewState is a sealed interface with the following possible states:

1. Loading

Description: The feed is currently loading content
Usage: Show loading indicators or progress bars

Example:

is FeedViewState.Loading -> {
    binding.progressBar.isVisible = true
    binding.emptyStateView.isVisible = false
}

2. LoadData

Description: Data has been successfully loaded and is available
Usage: Hide loading indicators, display content

Example:

is FeedViewState.LoadData -> {
    binding.progressBar.isVisible = false
    binding.swipeRefreshLayout.isRefreshing = false
}

3. EmptyFeed

Description: The feed has no content to display
Usage: Show empty state messages or call-to-action

Example:

is FeedViewState.EmptyFeed -> {
    binding.progressBar.isVisible = false
    binding.emptyStateView.isVisible = true
    binding.emptyStateView.text = "No videos available"
}

4. EndOfFeed

Description: User has reached the end of available content
Usage: Show end-of-feed messages or load more content

Example:

is FeedViewState.EndOfFeed -> {
    binding.progressBar.isVisible = false
    binding.endOfFeedView.isVisible = true
    Toast.makeText(context, "You've reached the end", Toast.LENGTH_SHORT).show()
}

5. Error

Description: An error occurred while loading feed content
Properties: message: String - Error description
Usage: Display error messages and provide retry options

Example:

is FeedViewState.Error -> {
    binding.progressBar.isVisible = false
    binding.errorView.isVisible = true
    binding.errorView.text = "Error: ${feedViewState.message}"
}

Usage Examples

Basic Implementation

binding.videoFeedView.setOnFeedViewStateListener { feedViewState ->
    when (feedViewState) {
        is FeedViewState.Loading -> {
            // Show loading state
            binding.progressBar.isVisible = true
            binding.emptyStateView.isVisible = false
            binding.errorView.isVisible = false
        }
        is FeedViewState.LoadData -> {
            // Hide loading, show content
            binding.progressBar.isVisible = false
            binding.swipeRefreshLayout.isRefreshing = false
        }
        is FeedViewState.EmptyFeed -> {
            // Show empty state
            binding.progressBar.isVisible = false
            binding.emptyStateView.isVisible = true
            binding.emptyStateView.text = "No videos available"
        }
        is FeedViewState.EndOfFeed -> {
            // Show end of feed
            binding.progressBar.isVisible = false
            binding.swipeRefreshLayout.isRefreshing = false
            Toast.makeText(context, "End of feed reached", Toast.LENGTH_SHORT).show()
        }
        is FeedViewState.Error -> {
            // Show error state
            binding.progressBar.isVisible = false
            binding.errorView.isVisible = true
            binding.errorView.text = "Error: ${feedViewState.message}"
        }
    }
}

PreviousSingle Content Feed NextCustomization

Last updated 1 day ago

Was this helpful?

Video Feed integration

FwLifecycleAwareVideoFeedView (Deprecated, please use FwVideoFeedView instead)

Video Feed options

Feed resource

Feed autoplay

Feed Layout

Column count

Background color

Item spacing

Rounded corner

Rounded corner radius

Show feed title

Feed title text typeface

Feed title position

Feed title text color

Feed title text number of lines

Feed title text padding

Feed title text size

Feed title background color

Feed title background drawable

Player Mode

Show play icon

Play icon width

Ad badge background color

Ad badge is hidden

Ad badge is show on thumbnails

Ad badge text typeface

Ad badge text color

Ad badge label

Show Firework Logo

Feed item click listener

Share Base Url

Video feed error listener

Refresh video feed view

Monitor and respond to state changes in the video feed

Parameters

FeedViewStateListener Interface

FeedViewState Types

Usage Examples