Layout Options

LayoutOption controls the visual layout and appearance of FwVideoFeedView widget. It determines how video thumbnails are arranged, spaced, and styled.

Overview

LayoutOption provides comprehensive control over the feed's visual presentation, including:

Layout type (grid, horizontal, vertical)
Column count for grid layouts
Spacing between items
Thumbnail appearance (rounded corners, play icon)
Feed title positioning
Background colors

Creating LayoutOption

Using Builder

val layoutOption = LayoutOption.Builder()
    .feedLayout(FeedLayout.GRID)
    .columnCount(3)
    .itemSpacing(8)
    .roundedCorner(true)
    .build()

Using DSL (Recommended)

val viewOptions = viewOptions {
    layoutOptions {
        feedLayout(FeedLayout.GRID)
        columnCount(3)
        itemSpacing(8)
        roundedCorner(true)
        roundedCornerRadius(12)
        backgroundColor(Color.parseColor("#F5F5F5"))
    }
}

Properties

feedLayout

Type: FeedLayout (enum) Default: FeedLayout.HORIZONTAL

Determines the layout type for displaying videos.

Values:

HORIZONTAL - Horizontal scrolling row
VERTICAL - Vertical scrolling column
GRID - Multi-column grid

layoutOptions {
    feedLayout(FeedLayout.GRID)
}

columnCount

Type: Int Default: 2 Applies to: Grid layout only

Number of columns in grid layout.

layoutOptions {
    feedLayout(FeedLayout.GRID)
    columnCount(3) // 3 columns
}

Note: This property only affects grid layouts. It's ignored for horizontal and vertical layouts.

backgroundColor

Type: Int (color) Default: Transparent

Background color for the feed container.

layoutOptions {
    backgroundColor(Color.parseColor("#F5F5F5"))
    // or
    backgroundColor(Color.WHITE)
}

itemSpacing

Type: Int (pixels) Default: 0

Spacing between feed items in pixels.

layoutOptions {
    itemSpacing(16) // 16 pixels between items
}

Tip: Use dpToPx() extension for dp values:

layoutOptions {
    itemSpacing(8.dpToPx()) // Convert 8dp to pixels
}

roundedCorner

Type: Boolean Default: false

Enable or disable rounded corners on video thumbnails.

layoutOptions {
    roundedCorner(true)
}

roundedCornerRadius

Type: Int (pixels) Default: 5 (when roundedCorner is true)

Corner radius for rounded thumbnails in pixels.

layoutOptions {
    roundedCorner(true)
    roundedCornerRadius(12.dpToPx())
}

Note: Only applies when roundedCorner is true.

showPlayIcon

Type: Boolean Default: true

Show or hide the play icon overlay on video thumbnails.

layoutOptions {
    showPlayIcon(true)
}

playIconWidth

Type: Int (pixels) Default: 24dp (converted to pixels)

Width of the play icon on video thumbnails.

layoutOptions {
    showPlayIcon(true)
    playIconWidth(32.dpToPx()) // 32dp play icon
}

feedTitlePosition

Type: FeedTitlePosition (enum) Default: FeedTitlePosition.NESTED

Position of the feed title relative to video thumbnails.

Values:

NESTED - Title overlays the thumbnail
STACKED - Title appears below the thumbnail

layoutOptions {
    feedTitlePosition(FeedTitlePosition.STACKED)
}

aspectRatio

Type: Double Default: Automatic based on video content

Custom aspect ratio for video thumbnails.

layoutOptions {
    aspectRatio(16.0 / 9.0) // 16:9 aspect ratio
    // or
    aspectRatio(9.0 / 16.0) // 9:16 aspect ratio
}

Note: If not specified, the SDK uses the video's natural aspect ratio.

Default Values

Property

Default Value

feedLayout

HORIZONTAL

columnCount

2

backgroundColor

Transparent

itemSpacing

0

roundedCorner

false

roundedCornerRadius

5 (when enabled)

showPlayIcon

true

playIconWidth

24dp

feedTitlePosition

NESTED

aspectRatio

9:16

Layout Type Examples

Horizontal Layout

Displays videos in a single horizontal scrolling row.

val viewOptions = viewOptions {
    layoutOptions {
        feedLayout(FeedLayout.HORIZONTAL)
        itemSpacing(12.dpToPx())
        roundedCorner(true)
        roundedCornerRadius(8.dpToPx())
    }
}

Vertical Layout

Displays videos in a single vertical scrolling column.

val viewOptions = viewOptions {
    layoutOptions {
        feedLayout(FeedLayout.VERTICAL)
        itemSpacing(16.dpToPx())
        showPlayIcon(true)
    }
}

Grid Layout

Displays videos in a multi-column grid.

val viewOptions = viewOptions {
    layoutOptions {
        feedLayout(FeedLayout.GRID)
        columnCount(3)
        itemSpacing(8.dpToPx())
        roundedCorner(true)
        aspectRatio(9.0 / 16.0)
    }
}

Complete Examples

Modern Grid Feed

class GridFeedActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_grid_feed)
        
        val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
        
        val viewOptions = viewOptions {
            baseOptions {
                feedResource(FeedResource.Discovery)
            }
            layoutOptions {
                feedLayout(FeedLayout.GRID)
                columnCount(2)
                itemSpacing(12.dpToPx())
                roundedCorner(true)
                roundedCornerRadius(16.dpToPx())
                backgroundColor(Color.parseColor("#F8F9FA"))
                showPlayIcon(true)
                playIconWidth(40.dpToPx())
            }
        }
        
        videoFeedView.init(viewOptions)
    }
}

Horizontal Story Feed

class StoryFeedActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_story_feed)
        
        val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
        
        val viewOptions = viewOptions {
            baseOptions {
                feedResource(FeedResource.Channel(channelId = "your_channel_id"))
            }
            layoutOptions {
                feedLayout(FeedLayout.HORIZONTAL)
                itemSpacing(16.dpToPx())
                roundedCorner(true)
                roundedCornerRadius(12.dpToPx())
                showPlayIcon(false) // No play icon for story style
                aspectRatio(9.0 / 16.0)
            }
        }
        
        videoFeedView.init(viewOptions)
    }
}

Product Gallery Grid

class ProductGalleryActivity : AppCompatActivity() {
    private fun loadProductVideos(productSku: String) {
        val videoFeedView = findViewById<FwVideoFeedView>(R.id.productVideos)
        
        val viewOptions = viewOptions {
            baseOptions {
                feedResource(
                    FeedResource.Sku(
                        channelId = "your_channel_id",
                        productIds = listOf(productSku)
                    )
                )
            }
            layoutOptions {
                feedLayout(FeedLayout.GRID)
                columnCount(3)
                itemSpacing(4.dpToPx())
                roundedCorner(true)
                roundedCornerRadius(8.dpToPx())
                showPlayIcon(true)
                playIconWidth(32.dpToPx())
            }
        }
        
        videoFeedView.init(viewOptions)
    }
}

Important Notes

columnCount only affects grid layouts
roundedCornerRadius only applies when roundedCorner is true
Item spacing is in pixels - use dpToPx() for density-independent values
Aspect ratio can be calculated as width.0 / height.0
Background color affects the feed container, not individual thumbnails
Layout changes require re-initializing the feed view