tubi_tv_drawable_play_selector_tv.xml

Overview

The [tubi_tv_drawable_play_selector_tv.xml](/projects/288/68396) file is an Android **drawable selector resource** used to define different visual states for a UI component—specifically, the "Play" button in the Tubi TV application for TV devices. This XML file enables the app to display different drawable images depending on the button's interaction state (pressed, focused, or default).

In Android TV apps, where remote control navigation replaces touch input, visual focus and pressed states provide key UX feedback to the user. This selector manages these states visually by specifying which drawable resource to display for each state.

Detailed Explanation

File Type and Purpose

Type: Drawable selector XML
Purpose: To provide state-based drawable resources for the "Play" button.
Usage Context: Android TV interface, where focus and press states are essential for user navigation feedback.

XML Structure

The root element is ``, which contains multiple `` elements. Each `` specifies a drawable resource and an associated state condition.

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

Explanation of Each `<item>` Element

Item No.	Attributes	Description	Drawable Resource
1	`android:state_pressed="true"`	When the button is pressed (e.g., user clicks or taps), show this drawable.	`@drawable/tubi_tv_play_large_pressed`
2	`android:state_focused="true"`	When the button has focus (e.g., navigated by remote control but not pressed), show this drawable.	`@drawable/tubi_tv_play_large`
3	`android:state_focused="false"`	When the button does not have focus, show this drawable (serves as default/fallback state).	`@drawable/tubi_tv_play_large_pressed`

Key Points and Behavior

State Priority: Android evaluates <item> elements in order. The first matching state is used.
Pressed State: Highest priority — when pressed, the button shows the "pressed" drawable.
Focused State: Next priority — when focused (but not pressed), shows the default "large" play drawable.
Focused False: If not focused, it falls back to the "pressed" drawable, which may be a design choice or a fallback to a default appearance.

Usage Example

This drawable selector is typically referenced in a layout XML file or programmatically assigned to a UI element such as an `ImageButton` or `ImageView` in the Android TV app.

<ImageButton
    android:id="@+id/play_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tubi_tv_drawable_play_selector_tv"
    android:contentDescription="@string/play_button_desc" />

When the user navigates to this button using a TV remote, the drawable changes according to the selector rules, providing immediate visual feedback.
When the user presses the button, the pressed drawable is displayed.

Implementation Details

This file leverages Android's StateListDrawable capability via XML selectors.
The drawable resources referenced (tubi_tv_play_large_pressed, tubi_tv_play_large) are bitmap or vector images located in the app's res/drawable directory.
The use of selectors is a memory-efficient way to handle multiple button states without needing Java/Kotlin code to switch images manually.

Interaction with Other Components

UI Components: This selector is assigned as the background or source drawable for play buttons on the TV interface.
Drawable Resources: It depends on the presence of the following drawables:
- tubi_tv_play_large_pressed
- tubi_tv_play_large
Focus and Input Handling: The app's input handling system (e.g., remote control navigation) triggers state changes (state_focused, state_pressed) that cause this selector to update the button's appearance.
Styling and Themes: This selector can be part of a larger style/theme applied to buttons to maintain consistent UI design.

Visual Diagram

flowchart TD
    A[User Interaction]
    A -->|Press Button| B(state_pressed = true)
    A -->|Focus Button| C(state_focused = true)
    A -->|No Focus| D(state_focused = false)

    B -->|Show Drawable| E[tubi_tv_play_large_pressed]
    C -->|Show Drawable| F[tubi_tv_play_large]
    D -->|Show Drawable| E

    style E fill:#f9f,stroke:#333,stroke-width:1px
    style F fill:#bbf,stroke:#333,stroke-width:1px

Summary

tubi_tv_drawable_play_selector_tv.xml is a critical UI resource for handling play button states on Android TV.
It defines visual behaviors for pressed and focused button states using drawable resources.
This XML selector enables smooth, state-aware UI feedback that enhances user experience in the Tubi TV app.
Its interaction with input events and drawable resources exemplifies Android's efficient resource management for UI states.

If you need to customize the play button's visual feedback or add new states (e.g., disabled), you can extend this selector by adding more `` elements with corresponding state attributes and drawable resources.