Title Options

TitleOption controls the appearance and visibility of feed titles in FwVideoFeedView widget. It provides comprehensive styling options for title text, background, and layout.

Overview

TitleOption allows you to customize:

Title visibility
Text color, size, and typeface
Background color and styling
Text padding and line count
Title positioning (via LayoutOption)

Creating TitleOption

Using Builder

val titleOption = TitleOption.Builder()
    .showFeedTitle(true)
    .feedTitleTextColor(Color.BLACK)
    .feedTitleBackgroundColor(Color.WHITE)
    .feedTitleTextSize(18)
    .build()

Using DSL (Recommended)

val viewOptions = viewOptions {
    titleOptions {
        showFeedTitle(true)
        feedTitleTextColor(Color.BLACK)
        feedTitleBackgroundColor(Color.WHITE)
        feedTitleTextSize(18)
        feedTitleTextNumberOfLines(2)
        feedTitleTextPadding(12.dpToPx())
    }
}

Properties

showFeedTitle

Type: Boolean Default: true

Show or hide the feed title.

titleOptions {
    showFeedTitle(true)
}

feedTitleTextColor

Type: Int (color) Default: White (0xFFFFFFFF)

Text color for the feed title.

titleOptions {
    feedTitleTextColor(Color.BLACK)
    // or
    feedTitleTextColor(Color.parseColor("#333333"))
}

feedTitleBackgroundColor

Type: Int (color) Default: Semi-transparent black (0x80000000)

Background color for the feed title.

titleOptions {
    feedTitleBackgroundColor(Color.WHITE)
    // or
    feedTitleBackgroundColor(Color.parseColor("#F5F5F5"))
}

feedTitleBackgroundDrawable

Type: GradientDrawable Default: Semi-transparent black gradient

Custom background drawable for the feed title.

val gradientDrawable = GradientDrawable().apply {
    colors = intArrayOf(
        Color.parseColor("#FF6200EE"),
        Color.parseColor("#FF3700B3")
    )
    gradientType = GradientDrawable.LINEAR_GRADIENT
    orientation = GradientDrawable.Orientation.LEFT_RIGHT
    cornerRadius = 8f.dpToPx().toFloat()
}

titleOptions {
    feedTitleBackgroundDrawable(gradientDrawable)
}

Note: This overrides feedTitleBackgroundColor when set.

feedTitleTextSize

Type: Int (pixels) Default: SDK default

Text size for the feed title in pixels.

titleOptions {
    feedTitleTextSize(20.spToPx()) // Convert sp to pixels
}

Tip: Use spToPx() to convert sp (scale-independent pixels) to pixels for consistent text sizing.

feedTitleTextNumberOfLines

Type: Int Default: 2

Maximum number of lines for the feed title.

titleOptions {
    feedTitleTextNumberOfLines(1) // Single line
    // or
    feedTitleTextNumberOfLines(3) // Up to 3 lines
}

feedTitleTextPadding

Type: Int (pixels) Default: SDK default

Padding around the feed title text in pixels.

titleOptions {
    feedTitleTextPadding(16.dpToPx())
}

feedTitleTextTypeface

Type: Typeface Default: Typeface.DEFAULT

Custom typeface for the feed title.

// Using system font
titleOptions {
    feedTitleTextTypeface(Typeface.create("sans-serif-medium", Typeface.NORMAL))
}

// Using custom font
val customTypeface = ResourcesCompat.getFont(context, R.font.custom_font)
titleOptions {
    feedTitleTextTypeface(customTypeface)
}

Default Values

Property

Default Value

showFeedTitle

true

feedTitleTextColor

White (0xFFFFFFFF)

feedTitleBackgroundColor

Semi-transparent black (0x80000000)

feedTitleTextNumberOfLines

2

feedTitleTextTypeface

Typeface.DEFAULT

Complete Examples

Simple Title Configuration

val viewOptions = viewOptions {
    titleOptions {
        showFeedTitle(true)
        feedTitleTextColor(Color.WHITE)
        feedTitleBackgroundColor(Color.parseColor("#80000000"))
    }
}

Styled Title with Custom Font

class StyledFeedActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_styled_feed)
        
        val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
        
        val customFont = ResourcesCompat.getFont(this, R.font.poppins_semibold)
        
        val viewOptions = viewOptions {
            baseOptions {
                feedResource(FeedResource.Discovery)
            }
            titleOptions {
                showFeedTitle(true)
                feedTitleTextColor(Color.parseColor("#1A1A1A"))
                feedTitleBackgroundColor(Color.WHITE)
                feedTitleTextSize(20.spToPx())
                feedTitleTextNumberOfLines(2)
                feedTitleTextPadding(16.dpToPx())
                feedTitleTextTypeface(customFont)
            }
            layoutOptions {
                feedTitlePosition(FeedTitlePosition.STACKED)
            }
        }
        
        videoFeedView.init(viewOptions)
    }
}

Gradient Background Title

val viewOptions = viewOptions {
    titleOptions {
        showFeedTitle(true)
        feedTitleTextColor(Color.WHITE)
        feedTitleBackgroundDrawable(
            GradientDrawable().apply {
                colors = intArrayOf(
                    Color.parseColor("#667eea"),
                    Color.parseColor("#764ba2")
                )
                gradientType = GradientDrawable.LINEAR_GRADIENT
                orientation = GradientDrawable.Orientation.TOP_BOTTOM
                cornerRadii = floatArrayOf(
                    0f, 0f,  // top-left
                    0f, 0f,  // top-right
                    12f.dpToPx(), 12f.dpToPx(),  // bottom-right
                    12f.dpToPx(), 12f.dpToPx()   // bottom-left
                )
            }
        )
        feedTitleTextSize(18.spToPx())
        feedTitleTextPadding(12.dpToPx())
    }
    layoutOptions {
        roundedCorner(true)
    }
}

Title Positioning

Title position is controlled by LayoutOption.feedTitlePosition:

Nested Position

Title overlays the video thumbnail:

val viewOptions = viewOptions {
    titleOptions {
        showFeedTitle(true)
        feedTitleTextColor(Color.WHITE)
        feedTitleBackgroundColor(Color.parseColor("#80000000"))
    }
    layoutOptions {
        feedTitlePosition(FeedTitlePosition.NESTED)
    }
}

Stacked Position

Title appears below the video thumbnail:

val viewOptions = viewOptions {
    titleOptions {
        showFeedTitle(true)
        feedTitleTextColor(Color.BLACK)
        feedTitleBackgroundColor(Color.WHITE)
    }
    layoutOptions {
        feedTitlePosition(FeedTitlePosition.STACKED)
        backgroundColor(Color.parseColor("#F5F5F5"))
    }
}

Important Notes

feedTitleBackgroundDrawable overrides feedTitleBackgroundColor when both are set
Text size should use sp units for accessibility - convert using spToPx()
Padding uses dp units - convert using dpToPx()
Title visibility is also affected by showFeedTitle setting
Title position is configured in LayoutOption, not TitleOption
Custom typefaces must be included in your app's resources
Use Color.TRANSPARENT to remove background entirely
Number of lines set to 1 will truncate long titles with ellipsis