You need to add the FwVideoFeedView to your layout XML file
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns: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.FwVideoFeedViewandroid: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 valuesval 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 STACKEDitemSpacing(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 choiceshowFeedTitle(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 optionsvideoFeedView.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 valuesBaseOption 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(newGradientDrawable(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 optionsvideoFeedView.init(viewOptions);// or without view optionsvideoFeedView.init(null);// after video feed view is not needed anymore it should be destroyed@OverrideprotectedvoidonDestroy() {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:
// after video feed view is not needed anymore it should be destroyed @OverrideprotectedvoidonDestroy() {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.
classMyActivity: Activity() {privatelateinitvar lifecycleAwareViewFeedView: FwLifecycleAwareVideoFeedViewoverridefunonCreate() {... lifecycleAwareViewFeedView.init(viewOptions, lifecycle) }overridefunonDestroy() {// No need to destroy lifecycleAwareViewFeedViewsuper.onDestroy() }}
publicclassMyActivityextendsActivity {privateFwLifecycleAwareVideoFeedView lifecycleAwareViewFeedView; @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {...lifecycleAwareViewFeedView.init(viewOptions,getLifecycle()); } @OverrideprotectedvoidonDestroy() {// 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 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(newFeedItemClickListener() { @OverridepublicvoidonItemClicked(@NonNullFeedItem feedItem) {// Handle click here }});
Share Base Url
Check Video Deep Linking section to learn more about custom share base URL.
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(newFwErrorListener() { @OverridepublicvoidonFwError(FwError fwError) {// Handle video feed error here } });
The possible error types are:
// Video feed related errorssealedinterfaceVideoFeedError : FwError {objectLoadingFailed : VideoFeedError}// Ad related errorssealedinterfaceAdsError : FwError {dataclassVideoLoadFailed(val videoId: String) : AdsErrordataclassPlaybackFailed(val message: String) : AdsErrorobjectImaAdFailed : AdsError}// Livestream related errorssealedinterfaceLivestreamError : FwError {objectMissingLivestreamInitializer : LivestreamErrorobjectEngineFailed : LivestreamError}// Share related errorssealedinterfaceShareContentError : FwError {objectEmptyShareUrl : ShareContentErrorobjectSharingFailed : ShareContentError}
Refresh video feed view
Call the videoFeedView.refresh() function to refresh the content of FwVideoFeedView.