styles.xml

Overview

The `styles.xml` file is an Android resource file that defines custom UI styles used throughout the application. It centralizes visual theme attributes and widget styling, enabling consistent look and feel across different screens and components. This file contains style definitions for the player theme, seek bar appearance, toggle buttons, and video buttons, specifically tailored for the Tubi video player interface.

By encapsulating style attributes in this file, the application ensures maintainability and ease of customization without modifying individual UI layouts. The styles extend existing Android framework themes and widgets, overriding or adding specific properties such as colors, dimensions, and drawable resources.

Detailed Explanation of Styles

1. `TubiPlayerTheme`

Type: Style (Theme)
Parent: Theme.AppCompat.NoActionBar (AppCompat theme without a title bar)
Purpose: Defines the overall theme used for the Tubi video player UI, focusing on fullscreen, no-title-bar display with a black background.

Attributes:

Attribute	Value	Description
`android:windowNoTitle`	`true`	Disables the window title bar.
`android:windowBackground`	`@android:color/black`	Sets the background color of the window to black.
`android:keepScreenOn`	`true`	Keeps the screen from dimming or locking while the player is active.
`android:windowFullscreen`	`true`	Enables fullscreen mode, hiding status and navigation bars.
`android:windowContentOverlay`	`@null`	Removes any default content overlay (e.g., shadows).

Usage Example:

<!-- Apply theme in AndroidManifest.xml -->
<activity android:name=".PlayerActivity"
          android:theme="@style/TubiPlayerTheme" />

2. `TubiSeekBar`

Type: Style (Widget)
Parent: @android:style/Widget.SeekBar (Default Android SeekBar style)
Purpose: Customizes the appearance of the video progress seek bar used in the player controls.

Attributes:

Attribute	Value	Description
`android:progressDrawable`	`@drawable/tubi_tv_seek_bar`	Custom drawable resource for the progress bar track.
`android:thumb`	`@drawable/tubi_tv_drawable_scrubber_selector`	Custom drawable for the draggable thumb/scrubber.
`android:minHeight`	`2dp`	Sets minimum height of the seek bar.
`android:maxHeight`	`2dp`	Sets maximum height of the seek bar.

Usage Example:

<SeekBar
    style="@style/TubiSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

3. `TubiEmptyToggleButton`

Type: Style (Widget)
Parent: None explicitly specified (inherits from default ToggleButton)
Purpose: Defines the style for toggle buttons in the controller options area that have no visible text labels.

Attributes:

Attribute	Value	Description
`android:layout_width`	`@dimen/view_tubi_controller_options_button_width`	Width dimension from app resources for consistent sizing.
`android:layout_height`	`@dimen/view_tubi_controller_options_height`	Height dimension from app resources.
`android:text`	`""`	Empty text when toggle is unchecked.
`android:textOff`	`""`	Empty text when toggle is off.
`android:textOn`	`""`	Empty text when toggle is on.

Usage Example:

<ToggleButton
    style="@style/TubiEmptyToggleButton"
    android:id="@+id/option_toggle_button" />

4. `TubiVideoButton`

Type: Style (Widget)
Parent: None explicitly specified (inherits from default Button/ImageView attributes)
Purpose: Styles video-related buttons in the controller UI with specific size, margins, background, and visibility.

Attributes:

Attribute	Value	Description
`android:layout_width`	`@dimen/view_tubi_controller_video_button_width`	Width dimension for video buttons.
`android:layout_height`	`@dimen/view_tubi_controller_video_button_height`	Height dimension for video buttons.
`android:layout_marginLeft`	`@dimen/view_tubi_controller_video_button_margin_left`	Left margin for button placement.
`android:layout_marginRight`	`@dimen/view_tubi_controller_video_button_margin_right`	Right margin for button placement.
`android:layout_marginTop`	`@dimen/view_tubi_controller_video_button_margin_top`	Top margin for button placement.
`android:background`	`?android:attr/selectableItemBackground`	Uses selectable background for touch feedback.
`android:scaleType`	`fitXY`	Scales content to fit both X and Y dimensions.
`android:visibility`	`gone`	Hidden by default; can be shown programmatically as needed.

Usage Example:

<ImageButton
    style="@style/TubiVideoButton"
    android:id="@+id/video_play_button" />

Important Implementation Details

Inheritance and Customization:
The styles extend core Android themes and widgets, overriding specific attributes to match the Tubi app branding and UI requirements.
Dimension References:
Dimensions such as widths, heights, and margins are referenced via @dimen/ resources, allowing centralized control of sizing across different screen densities and device types.
Drawable Resources:
The seek bar and thumb use custom drawable resources (tubi_tv_seek_bar, tubi_tv_drawable_scrubber_selector) which are not detailed here but typically include customized graphics or selectors for different states (normal, pressed, disabled).
Visibility Control:
The TubiVideoButton style sets default visibility to gone, implying buttons using this style are initially hidden and shown dynamically through code based on player state or user interaction.
No Text Toggle Buttons:
The TubiEmptyToggleButton deliberately removes any textual labels to rely on iconography or other visual cues, keeping the UI minimal and clean.

Interaction with Other System Components

UI Layouts:
This file is primarily consumed by XML layout files defining the player interface (e.g., activity or fragment layouts). UI components such as SeekBar, ToggleButton, and ImageButton reference these styles for consistent appearance.
Dimension and Drawable Resources:
The styles depend on dimension resources and drawable assets defined elsewhere in the project (res/values/dimens.xml, res/drawable/). Changes in those files affect the visual output of these styles.
Theming and Activity Configuration:
The TubiPlayerTheme is likely applied to the player activity or fragment via the Android manifest or programmatically, influencing window features and overall UI presentation.
Runtime UI Behavior:
Visibility attributes and drawable selectors imply that the UI adapts dynamically, with some buttons hidden or shown in response to user actions or playback states.

Visual Diagram: Style Structure Overview

flowchart TD
    A[styles.xml] --> B[TubiPlayerTheme]
    A --> C[TubiSeekBar]
    A --> D[TubiEmptyToggleButton]
    A --> E[TubiVideoButton]

    B --> B1[Theme.AppCompat.NoActionBar]
    B1 -. Inherits .-> B

    C --> C1[Widget.SeekBar]
    C1 -. Inherits .-> C

    D --> D1[ToggleButton (default)]
    D1 -. Inherits .-> D

    E --> E1[Button/ImageView (default)]
    E1 -. Inherits .-> E

    B -->|Applies to| F[PlayerActivity / Player UI]
    C -->|Used in| G[SeekBar UI Element]
    D -->|Used in| H[ToggleButton UI Element]
    E -->|Used in| I[Video Button UI Element]

Legend:
- Boxes represent styles or UI components.
- Solid arrows indicate "defined in" or "contains" relation.
- Dashed arrows represent inheritance.
- Labels show usage or inheritance relationships.

Summary

The `styles.xml` file provides essential style definitions that shape the visual and interactive aspects of the Tubi player UI. By leveraging Android theming and widget customization, it ensures a polished, consistent user experience while enabling flexibility and maintainability. It directly impacts player activity UI, controls appearance, and user interaction elements, tightly integrating with dimension and drawable resources to produce the final app interface.

styles.xml

Overview

Detailed Explanation of Styles

1. TubiPlayerTheme

Attributes:

Usage Example:

2. TubiSeekBar

Attributes:

Usage Example:

3. TubiEmptyToggleButton

Attributes:

Usage Example:

4. TubiVideoButton

Attributes:

Usage Example:

Important Implementation Details

Interaction with Other System Components

Visual Diagram: Style Structure Overview

Summary

1. `TubiPlayerTheme`

2. `TubiSeekBar`

3. `TubiEmptyToggleButton`

4. `TubiVideoButton`