view_tubi_ad_learn_more.xml

Overview

`view_tubi_ad_learn_more.xml` is an Android layout resource file that defines the visual structure and data bindings for a compact "Learn More" advertisement view in the Tubi TV application. The view is designed to display information about the number of ads remaining, a message indicating when ads will resume, and a clickable "Learn More" button (if applicable) that directs users to more information about the current ad.

This layout utilizes Android Data Binding to dynamically update UI components based on the state exposed by a `UserController` class, specifically reacting to ad-related data such as the number of ads left and the presence of an ad click URL.

Detailed Explanation

Root Element

• <layout>: The root tag enabling Android Data Binding features. It contains:

  • <data>: Defines variables and imports used for data binding expressions.

  • View hierarchy: Defines the UI elements and their constraints.

Data Binding Setup

<data>
    <import type="android.view.View" />
    <import type="android.text.TextUtils" />
    <variable
        name="controller"
        type="com.tubitv.media.bindings.UserController" />
</data>

• Imports:

  • View class for visibility bindings.

  • TextUtils class for text validation in visibility logic.

• Variable:

  • controller: An instance of UserController, which provides dynamic data and event handlers.

View Hierarchy and Components

The root view is a **ConstraintLayout** with `match_parent` width and `wrap_content` height, ensuring the view wraps its content horizontally and vertically.

1. Ads Remaining Label

<com.tubitv.ui.VaudTextView
    android:id="@+id/view_tubi_ad_learn_more_ads_remaining"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:maxLines="1"
    android:textColor="@color/tubi_tv_golden_gate"
    android:textSize="@dimen/view_tubi_ad_learn_more_text_size"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Ad" />

• Type: VaudTextView (a custom TextView presumably with specific font/styling).

• Displays a static label or identifier for the ads section.

• Styled with golden gate color and limited to a single line.

• Positioned at the top-left of the parent.

2. Ads Remaining Description

<com.tubitv.ui.VaudTextView
    android:id="@+id/view_tubi_ad_learn_more_ads_resume_shortly"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:maxLines="1"
    android:text="@{String.format(@string/view_tubi_ad_learn_more_ads_remaining_text, controller.numberOfAdsLeft)}"
    android:textColor="@android:color/white"
    android:textSize="@dimen/view_tubi_ad_learn_more_text_size"
    app:layout_constraintBottom_toBottomOf="@+id/view_tubi_ad_learn_more_ads_remaining"
    app:layout_constraintLeft_toRightOf="@+id/view_tubi_ad_learn_more_ads_remaining"
    app:layout_constraintTop_toTopOf="@+id/view_tubi_ad_learn_more_ads_remaining" />

• Displays a dynamic string showing how many ads are left before resuming content.

• Bound to controller.numberOfAdsLeft via a string resource format.

• Positioned horizontally adjacent to the "Ads Remaining" label, aligned vertically.

• Text is white and constrained to one line.

3. Learn More Button Container (Clickable)

<android.support.constraint.ConstraintLayout
    android:id="@+id/view_tubi_ad_learn_more_ads_learn_ll"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tubi_tv_player_ad_learn_more_background"
    android:clickable="true"
    android:onClick="@{()-> controller.clickCurrentAd()}"
    android:visibility="@{!TextUtils.isEmpty(controller.adClickUrl) ? View.VISIBLE : View.GONE }"
    app:layout_constraintBottom_toBottomOf="@+id/view_tubi_ad_learn_more_ads_resume_shortly"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@+id/view_tubi_ad_learn_more_ads_resume_shortly">

• A clickable container representing the "Learn More" button.

• Visibility depends on whether controller.adClickUrl is non-empty.

• Clicking triggers controller.clickCurrentAd(), which presumably opens the ad URL.

• Styled with a specific background drawable.

Contents of Learn More Button:

• Text label:

  <com.tubitv.ui.VaudTextView
      android:id="@+id/view_tubi_ad_learn_more_ads_learn_more_text"
      android:text="@string/view_tubi_ad_learn_more_ads_learn_more_text"
      android:textColor="@android:color/white"
      app:vaud_typeface="vaud_bold" />
  

  • Displays a "Learn More" string in bold white text.

• Icon:

  <ImageView
      android:id="@+id/view_tubi_ad_learn_more_ads_learn_more_icon"
      android:src="@drawable/view_tubi_ad_learn_more_ads_learn_icon" />
  

  • A small icon next to the text indicating learn more action.

Parameters and Data Binding Variables

**Key Properties from `controller` used:**

• numberOfAdsLeft (int): Number of ads left to be played before content resumes.

• adClickUrl (String): URL to open when the "Learn More" button is clicked.

• clickCurrentAd() (method): Event handler invoked when the "Learn More" button is clicked.

Usage Example

This layout is intended to be used within an Android UI component (e.g., a Fragment or Activity) that has a `UserController` instance bound to it. The binding would typically be set up as follows:

ViewTubiAdLearnMoreBinding binding = ViewTubiAdLearnMoreBinding.inflate(layoutInflater);
binding.setController(userController);

Once set, the UI automatically updates:

• The "ads remaining" text reflects the current number of ads left.

• The "Learn More" button appears only if there is a valid ad URL.

• Clicking the button triggers the clickCurrentAd() method on the controller.

Important Implementation Details

• Data Binding Expressions: The layout uses data binding expressions to dynamically update UI components without manual UI refresh code.

• Conditional Visibility: The "Learn More" button's visibility is conditionally controlled by checking if the ad URL string is empty or not, leveraging TextUtils.isEmpty().

• ConstraintLayout: Used to create a flexible, responsive layout that adjusts well to different screen sizes.

• Custom Views: Uses VaudTextView, a custom TextView which likely encapsulates specialized font or style logic consistent with Tubi's branding.

• Click Handling: The click event is directly bound in XML, reducing boilerplate in the host Activity/Fragment.

Interaction with Other Parts of the System

• UserController: This is the primary bridge between the UI and the business logic. It supplies data and handles user interaction events.

• Resources:

  • Strings such as view_tubi_ad_learn_more_ads_remaining_text and view_tubi_ad_learn_more_ads_learn_more_text provide localized text.

  • Colors and dimensions are defined in resource files for consistent styling.

  • Drawables like tubi_tv_player_ad_learn_more_background and view_tubi_ad_learn_more_ads_learn_icon define the visual appearance.

• Ad Playback Workflow: This view likely appears during ad playback phases, informing users about ad progress and providing an option to learn more about the ads.

• Navigation: Clicking "Learn More" probably opens a web view or external browser to the ad's landing page, managed by the controller.

Visual Diagram

flowchart TD
    A[view_tubi_ad_learn_more.xml Layout] --> B[ConstraintLayout (Root)]
    
    B --> C[VaudTextView: ads_remaining_label]
    B --> D[VaudTextView: ads_remaining_description]
    B --> E[ConstraintLayout: learn_more_button_container]
    
    E --> F[VaudTextView: learn_more_text]
    E --> G[ImageView: learn_more_icon]
    
    %% Data Binding Links
    B -- binds --> H[UserController]
    H -- provides --> D["numberOfAdsLeft"]
    H -- provides --> E["adClickUrl" visibility]
    E -- click triggers --> H["clickCurrentAd()"]

Summary

`view_tubi_ad_learn_more.xml` is a data-bound Android layout that visually presents ad-related information and interaction options within the Tubi TV app. It dynamically reflects the state of ad playback, showing how many ads remain and providing a conditional "Learn More" button linked to the current ad's URL. The layout leverages ConstraintLayout for flexible design, custom text views for branding, and data binding for clean, reactive UI updates tied to a `UserController` data source. This file is a UI component integrated into the ad playback experience, enhancing user engagement by offering clear, actionable information during ads.

If you need further details on the `UserController` or other components interacting with this layout, please provide the relevant source files or documentation.