Configure Video Feed
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:Kotlin
Java
// 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:Kotlin
Java
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:Kotlin
Java
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();
}
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.Kotlin
Java
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();
}
}
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 |
This value determines if the first complete visible item of the feed shows as a video instead of a static thumbnail.
Feed layout is the way that Firework Android SDK v6 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
Using this parameter you can set the number of columns in a grid layout
FeedLayout.GRID. (default value is 1)This is the background color of the video feed view. (default value is transparent)
This value determines the space between items in the list. (default value is 8dp)
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)
This value specifies the radius of the rounded corner if you set the rounded corner. (default value is 5dp)
This value is being used to show the title of each video item or not. (default value is false)
You can change the font of video titles in feed, this can be the typeface of your choice, by default it uses
Typeface.Default.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.
The color of the video title. (default value is #80000000)
Number of lines of the video feed title. (default value is 2)
Padding of the feed title. (default value is 8dp)
Feed title text size. (default value is 14sp)
This is the background color of the feed title view, this applies to
NESTED and STACKED feed title positions.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 colorDetermines 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.
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)
This value determines the width of the play icon shown on top of video feed thumbnails.
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)
This value determines wheter the ad label is visible or not in player.
This value determines wheter the ad label is visible or not in
FwVideoFeedView.You can change the font of ad badge, this can be the typeface of your choice, by default it uses
Typeface.Default.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)
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
This value determines if the firework logo is shown in player.
To track clicks on the feed item use
setOnFeedItemClickListener function of the FwVideoFeedView class. Only one listener can be set per FwVideoFeedView instance.Kotlin
Java
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.
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.Kotlin
Java
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
}
Call the
videoFeedView.refresh() function to refresh the content of FwVideoFeedView.Last modified 4mo ago