Firework for Developers
One-to-one Virtual ShoppingBusiness Portal
  • Welcome to Firework for Developers
  • Firework Interactive Video and One-to-many Digital Showroom
  • Web
    • Getting Started (Web)
      • Shopify
      • Magento
      • Wordpress (WooCommerce)
      • Salesforce Commerce Cloud
      • BigCommerce
    • Integration Guide for Web
      • Components
        • Hero Unit
        • Carousel / Grid
        • Storyblock (Web)
        • Player (Floating)
        • Storylink
      • Styling
      • Feed Attributes
      • Player
        • Configuration
          • Appearance
      • Video customization
        • Video Factory
        • CTA Button
        • Product cards
      • Events
        • Embed Feed and Storyblock Events
        • Video player events
        • Live stream events
        • Shopping events
      • Shopping Integration (V2)
        • Introduction
        • Shopping APIs
        • Product Hydration
        • Product Factory
        • Cart Sync
        • Tracking
          • Purchase
          • Add to cart
          • Remove from cart
          • Page viewed
        • Shopping Integration FAQ
        • Migrate from V1
      • Web SDK
      • Enhanced Picture-in-Picture
      • Privacy settings
        • Tracking settings
        • Cookies management
        • Content Security Policy
    • Telemetry console
    • Firework Service Domains
    • FAQ & Troubleshooting (Web)
  • Android SDK
    • Integration Guide for Android SDK
      • Getting Started (Android)
      • Video Feed (Android)
        • Video Feed Layouts (Android)
        • Channel Feed (Android)
        • Discover Feed (Android)
        • Playlist Feed (Android)
        • Dynamic Content Feed
        • Channel Hashtags Feed
        • Sku Feed
        • Single Content Feed
        • Configure Video Feed
      • Customization
        • CTA
      • Analytics (Android)
      • Shoppable Videos (Android)
        • Product Hydration
      • Live Stream Support (Android)
      • Video Player (Android)
      • StoryBlock (Android)
      • Share & Video Deep linking
      • Ad Support (Android)
      • Configure Video Advertisements Source (Android)
      • In-app Language Switches
      • Compose support(Android)
    • Sample App (Android)
    • FAQ & Troubleshooting (Android)
    • Changelog (Android)
  • iOS SDK
    • Integration Guide for iOS SDK
      • Getting Started (iOS)
      • ATT compliance (iOS)
      • Video Feed (iOS)
        • Discover Feed(iOS)
        • Channel Feed (iOS)
        • Playlist Feed (iOS)
        • Playlist Group Feed (iOS)
        • Dynamic Content (iOS)
        • Hashtag Playlist (iOS)
        • SKU Playlist (iOS)
        • Video Ads (iOS)
        • Video Feed Layouts (iOS)
      • Story Block (iOS)
      • Customization (iOS)
        • Video feed configurations (iOS)
        • Player configurations (iOS)
        • Shopping configurations (iOS)
          • Customize product card on videos using the custom view (iOS)
        • Customize click behaviors (iOS)
      • Shopping (iOS)
      • Live Stream Support (iOS)
      • Analytics (iOS)
      • Share & Deeplinking(iOS)
      • Ad Support (iOS)
    • Sample App (iOS)
    • FAQ & Troubleshooting (iOS)
    • Changelog (iOS)
  • React Native SDK
    • Integration Guide for React Native SDK V2
      • Getting Started (React Native)
      • ATT compliance React Native (iOS)
      • Video Feed (React Native)
      • Story Block (React Native)
      • Customization (React Native)
        • Video feed configurations (React Native)
        • Player configurations (React Native)
        • Shopping configurations (React Native)
          • Customize product card on videos using the custom view (React Native)
        • Customize click behaviors (React Native)
      • Shopping (React Native)
      • Live Stream Support (React Native)
      • Ad Support (React Native)
      • Analytics (React Native)
      • App-level Language Setting (React Native)
      • Share & Video Deeplinking (React Native)
      • Android Style (React Native)
      • Inject Android Image Loader (React Native)
      • Integrate SDKs in Hybrid React Native and native Apps
      • Reference (React Native)
      • Sample App (React Native)
      • FAQ & Troubleshooting (React Native)
      • Changelog (React Native)
  • Flutter SDK
    • Integration Guide for Flutter SDK V2
      • Getting Started (Flutter)
      • ATT compliance Flutter (iOS)
      • Video Feed (Flutter)
      • Story Block (Flutter)
      • Customization (Flutter)
        • Video feed configurations (Flutter)
        • Player configurations (Flutter)
        • Shopping configurations (Flutter)
          • Customize product card on videos using the custom view (Flutter)
        • Customize click behaviors (Flutter)
      • Live Stream Support (Flutter)
      • Shopping (Flutter)
      • Ad Support (Flutter)
      • Analytics (Flutter)
      • App-level Language Setting (Flutter)
      • Share & Video Deeplinking (Flutter)
      • Inject Android Image Loader (Flutter)
      • Android Style (Flutter)
      • Integrate SDKs in Hybrid Flutter and native Apps
      • Reference (Flutter)
      • Sample App (Flutter)
      • FAQ & Troubleshooting (Flutter)
      • Changelog (Flutter)
  • Help Articles
    • Importing Products to Firework
    • Adding products to a video
    • Displaying product videos on product pages using hashtag filtering(Web)
    • Syncing Carts
    • Encoded IDs
Powered by GitBook
On this page
  • Video Feed integration
  • Video Feed options

Was this helpful?

  1. Android SDK
  2. Integration Guide for Android SDK
  3. Video Feed (Android)

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
    }
});

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(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.

PreviousSingle Content FeedNextCustomization

Last updated 3 months ago

Was this helpful?

Share & Video Deep linking