tubi_tv_drawable_subtitles_on_selector_tv.xml

Overview

This XML file defines a **state list drawable** resource used in the Tubi TV Android application. It controls how a subtitles-on icon appears on a TV interface when the user interacts with the UI element that toggles subtitles. Specifically, it switches the drawable image shown based on the element's interaction state: pressed, focused, or default (unfocused).

This file helps provide visual feedback to the user by changing the subtitle icon's appearance depending on interaction context, enhancing usability and accessibility on TV devices where keyboard or remote navigation is common.

Detailed Explanation

Purpose

• To provide a stateful drawable selector for the "subtitles on" icon/button on TV devices.

• To define different drawable resources that will be used when the UI element is:

  • Pressed (e.g., when the user clicks or activates the button)

  • Focused (e.g., when the button is highlighted or ready for input)

  • Default / unfocused state

XML Structure and Elements

This file uses a [](/projects/288/68408) element as the root, which acts as a container for multiple `` elements. Each `` specifies a drawable resource to use when its associated state conditions are met.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tubi_tv_subtitles_on_faded" android:state_pressed="true"></item>
    <item android:drawable="@drawable/tubi_tv_subtitles_on" android:state_focused="true"></item>
    <item android:drawable="@drawable/tubi_tv_subtitles_on_faded" android:state_focused="false"></item>
</selector>

Explanation of <item> attributes:

• android:drawable
  Reference to the drawable resource to display for this state.

• android:state_pressed="true"
  Matches when the UI element is currently pressed.

• android:state_focused="true"
  Matches when the UI element has focus.

• android:state_focused="false"
  Matches when the UI element does not have focus (used as a fallback/default state here).

State Matching Logic

• When the button is pressed, the drawable tubi_tv_subtitles_on_faded is shown. This likely indicates a pressed/faded visual effect.

• When the button is focused (e.g., highlighted during navigation), the drawable tubi_tv_subtitles_on is shown in its normal, active state.

• When the button is not focused, the drawable tubi_tv_subtitles_on_faded is displayed to visually indicate inactivity or unselected state.

Usage Example

This drawable selector can be applied to a UI component in XML like this:

<ImageView
    android:id="@+id/subtitles_toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/tubi_tv_drawable_subtitles_on_selector_tv"
    android:focusable="true"
    android:clickable="true" />

• The ImageView will automatically update its image based on focus and press states.

• This makes it easy to maintain consistent visual feedback without manually changing images in code.

Implementation Details

• This file is purely declarative and does not contain any logic or algorithms.

• It leverages Android’s built-in StateListDrawable mechanism which efficiently handles state changes.

• The drawable resources referenced (tubi_tv_subtitles_on, tubi_tv_subtitles_on_faded) are expected to be PNGs, vector drawables, or other drawable formats located in the res/drawable folder.

• The naming convention suggests a consistent theme around the subtitles UI element for the TV platform.

Interaction with Other System Components

• UI Layer: This selector is used by UI components like ImageView or Button that represent the subtitles toggle control in the Tubi TV application on Android TV.

• Input Handling: Works in conjunction with Android's focus and input system to visually reflect state changes from remote control or keyboard navigation.

• Drawable Resources: Depends on the existence of the referenced drawable files (tubi_tv_subtitles_on, tubi_tv_subtitles_on_faded).

• TV UI Framework: Part of a broader set of drawable selectors and styles used to create a consistent and accessible TV user interface in the Tubi app.

Mermaid Diagram: Component Diagram of State Drawable Selector

componentDiagram
    component "tubi_tv_drawable_subtitles_on_selector_tv.xml" {
        [State Selector]
        [Drawable: tubi_tv_subtitles_on_faded]
        [Drawable: tubi_tv_subtitles_on]
    }

    component "Subtitles Toggle UI Component" {
        [ImageView or Button]
    }

    [Subtitles Toggle UI Component] --> [State Selector] : uses drawable selector
    [State Selector] --> [Drawable: tubi_tv_subtitles_on_faded] : pressed, unfocused states
    [State Selector] --> [Drawable: tubi_tv_subtitles_on] : focused state

Summary

• File Type: Android XML drawable selector

• Purpose: Define visual states for the subtitles-on icon on TV UI.

• Key Feature: Changes drawable based on pressed and focused states.

• Usage: Applied as a source drawable to UI elements representing subtitle toggle.

• Benefit: Provides user feedback on interaction states without additional logic.

This XML file is a simple yet crucial part of the Tubi TV app’s UI system, ensuring that users can clearly identify when subtitles are enabled and what state the toggle button is in, using consistent visual cues.