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

See Also

• ViewOptions Overview - Complete configuration system

• LayoutOption - Title positioning and layout

• FwVideoFeedView - Video feed widget

• BaseOption - Content source