> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/configuration/title-options.md).

# 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

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

### Using DSL (Recommended)

```kotlin
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.

```kotlin
titleOptions {
    showFeedTitle(true)
}
```

### feedTitleTextColor

**Type:** `Int` (color)\
**Default:** White (`0xFFFFFFFF`)

Text color for the feed title.

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

### feedTitleBackgroundColor

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

Background color for the feed title.

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

### feedTitleBackgroundDrawable

**Type:** `GradientDrawable`\
**Default:** Semi-transparent black gradient

Custom background drawable for the feed title.

```kotlin
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.

```kotlin
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.

```kotlin
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.

```kotlin
titleOptions {
    feedTitleTextPadding(16.dpToPx())
}
```

### feedTitleTextTypeface

**Type:** `Typeface`\
**Default:** `Typeface.DEFAULT`

Custom typeface for the feed title.

```kotlin
// 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

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

### Styled Title with Custom Font

```kotlin
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

```kotlin
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:

```kotlin
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:

```kotlin
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](/firework-for-developers/android-sdk/integration-guide/configuration.md) - Complete configuration system
* [LayoutOption](/firework-for-developers/android-sdk/integration-guide/configuration/layout-options.md) - Title positioning and layout
* [FwVideoFeedView](/firework-for-developers/android-sdk/integration-guide/configure-video-feed.md) - Video feed widget
* [BaseOption](/firework-for-developers/android-sdk/integration-guide/configuration/base-options.md) - Content source