view_tubi_radio_button.xml

Overview

The `view_tubi_radio_button.xml` file is an Android layout resource defining a custom radio button component for the Tubi TV application UI. Its primary purpose is to present a horizontally arranged radio button alongside a descriptive text label, styled to match the Tubi brand guidelines. This layout is intended to be used wherever a selectable radio button option with labeled text is required, such as in quality selectors or preference settings within the app.

Detailed Explanation

Root Element: <layout>

• Purpose: Enables data binding features in Android (though no bindings are present in this snippet).

• Namespaces:

  • xmlns:android: Core Android XML namespace for UI attributes.

  • xmlns:tools: Used for design-time attributes visible only in the IDE (Android Studio).

Primary Container: LinearLayout

• ID: @+id/tubi_radio_button_root

• Layout Width / Height: match_parent (fills the parent container)

• Background: @color/tubi_tv_steel_grey — a brand-specific color resource.

• Orientation: horizontal — arranges child views side by side.

• Padding: Top and bottom 7dp, left 29dp — spacing to visually separate this component from others.

**Usage:**

This container ensures the radio button and text label appear side by side with proper spacing and background.

Child 1: <RadioButton>

• ID: @+id/tubi_radio_button

• Layout Width / Height: wrap_content — size adjusts to content.

• Button Drawable: @drawable/tubi_radio_quality_selector — custom drawable replacing the default radio button circle, likely a graphic that fits Tubi's style.

• Design-Time Attribute: tools:checked="true" — shows the radio button as checked only in the layout preview, no runtime effect.

**Usage:**

The radio button is the interactive element allowing users to select this option. The customized drawable enhances visual consistency with the app's branding.

Child 2: <com.tubitv.ui.VaudTextView>

• ID: @+id/tubi_radio_button_text

• Layout Width / Height: wrap_content

• Padding Left: 24dp — spacing from the radio button.

• Text Size: 18sp — sufficiently large for readability.

• Design-Time Text: tools:text="1080P" — placeholder text shown in preview only.

**Additional Notes:**

• VaudTextView is a custom TextView subclass from the Tubi UI library (com.tubitv.ui), presumably adding custom fonts, styles, or behaviors beyond the standard Android TextView.

• This text label describes the option represented by the radio button (e.g., video quality like "1080P").

Important Implementation Details

• Custom Drawable for RadioButton: Using android:button="@drawable/tubi_radio_quality_selector" allows applying a tailored image or selector states to reflect different radio button states (checked/unchecked) in a visually consistent manner.

• Custom TextView: Leveraging VaudTextView instead of the default TextView suggests specialized styling or functionality centralized in this class, enhancing maintainability and look-and-feel consistency.

• Padding & Layout: Careful use of padding and horizontal orientation ensures a clean, aligned UI component suitable for list or settings screens.

• Data Binding Enabled: Though not utilized here, the root <layout> element enables future extensions with data binding for dynamic content updates.

Interaction with Other Parts of the System

• UI Integration: This layout file is likely inflated by an Android Activity or Fragment or custom view class to display radio button options to the user.

• Logic Layer: The app's Java/Kotlin code would reference the IDs (tubi_radio_button, tubi_radio_button_text) to set text dynamically, listen for selection changes, or programmatically check/uncheck the button.

• Theming: Pulls colors and drawables from centralized resources, ensuring consistency with the overall app theme.

• Custom View Dependency: Depends on com.tubitv.ui.VaudTextView class, which must be part of the app's UI toolkit or library module.

Usage Example

Assuming an Activity inflates this layout as part of a quality selection screen:

val radioButtonText: VaudTextView = findViewById(R.id.tubi_radio_button_text)
val radioButton: RadioButton = findViewById(R.id.tubi_radio_button)

// Set the text dynamically
radioButtonText.text = "720P"

// Listen for selection
radioButton.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) {
        // Apply quality setting logic
    }
}

Visual Diagram

flowchart LR
    A[LinearLayout: tubi_radio_button_root]
    A --> B[RadioButton: tubi_radio_button]
    A --> C[VaudTextView: tubi_radio_button_text]

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333
    style C fill:#bbf,stroke:#333

**Diagram Explanation:**

• The root container (LinearLayout) contains two child components:

  • The RadioButton with a custom drawable.

  • The VaudTextView displaying the label.

• Their horizontal arrangement forms the composite radio button UI element.

Summary

`view_tubi_radio_button.xml` defines a reusable, horizontally arranged radio button component tailored to Tubi TV’s branding and UI standards. It combines a custom drawable radio button and a specialized text view inside a padded linear layout, facilitating clear, consistent user options such as video quality selections. Its simple yet effective structure integrates tightly with the app’s UI framework and resource system, supporting dynamic content and interaction handling via Android’s view binding and event listeners.