# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/configuration/title-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.