[LE Audio] Broadcast UI for Media output broadcast dialog

- Create the new dialog for broadcast that extands from
  MediaOutputBaseDialog and add the QR code view area.

- Create the edit dialog for the user to update broadcast name and
  broadcast code.

- Create the dialog for notifying the user that the broadcast feature is
  avaliable.

- We will add the test case for the Broadcast Dialog in next change
  list. This change list only for the UI part, and the Metadata will
  pass into the Broadcast Dialog in b/222674827.

- About the AndroidLint warning for contentDescription, we filed a bug
  b/226271667 for tracking the warning with the UX designer.

Bug: 214493779
Test: manual test
Change-Id: I37a6c0a3319560fb8f81ac45be3cb6465202dd13

9 files changed, 586 insertions, 0 deletions

diff --git a/packages/SystemUI/res/drawable/ic_broadcast_code_eye.xml b/packages/SystemUI/res/drawable/ic_broadcast_code_eye.xml
new file mode 100644
index 000000000000..dc50a5dcab07
--- /dev/null
+++ b/packages/SystemUI/res/drawable/ic_broadcast_code_eye.xml
@@ -0,0 +1,26 @@
+<!--
+Copyright (C) 2022 The Android Open Source Project
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+         http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M12,16Q13.875,16 15.188,14.688Q16.5,13.375 16.5,11.5Q16.5,9.625 15.188,8.312Q13.875,7 12,7Q10.125,7 8.812,8.312Q7.5,9.625 7.5,11.5Q7.5,13.375 8.812,14.688Q10.125,16 12,16ZM12,14.2Q10.875,14.2 10.088,13.412Q9.3,12.625 9.3,11.5Q9.3,10.375 10.088,9.587Q10.875,8.8 12,8.8Q13.125,8.8 13.913,9.587Q14.7,10.375 14.7,11.5Q14.7,12.625 13.913,13.412Q13.125,14.2 12,14.2ZM12,19Q8.35,19 5.35,16.962Q2.35,14.925 1,11.5Q2.35,8.075 5.35,6.037Q8.35,4 12,4Q15.65,4 18.65,6.037Q21.65,8.075 23,11.5Q21.65,14.925 18.65,16.962Q15.65,19 12,19ZM12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5ZM12,17Q14.825,17 17.188,15.512Q19.55,14.025 20.8,11.5Q19.55,8.975 17.188,7.487Q14.825,6 12,6Q9.175,6 6.812,7.487Q4.45,8.975 3.2,11.5Q4.45,14.025 6.812,15.512Q9.175,17 12,17Z"/>
+</vector>
diff --git a/packages/SystemUI/res/layout/media_output_broadcast_area.xml b/packages/SystemUI/res/layout/media_output_broadcast_area.xml
new file mode 100644
index 000000000000..4e33e123f12a
--- /dev/null
+++ b/packages/SystemUI/res/layout/media_output_broadcast_area.xml
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2022 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/broadcast_info_area"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:gravity="start|center_vertical"
+    android:orientation="vertical">
+
+    <View
+        style="@style/BroadcastDialog.Divider.Horizontal"
+        android:layout_marginBottom="6dp"/>
+
+    <LinearLayout
+        android:id="@+id/broadcast_qrcode_layout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal" >
+        <ImageView
+            android:id="@+id/qrcode_view"
+            android:layout_width="@dimen/media_output_qrcode_size"
+            android:layout_height="@dimen/media_output_qrcode_size"
+            android:src="@android:color/transparent"
+            android:gravity="start|center_vertical"
+            android:layout_marginStart="82dp"/>
+        <ImageView
+            android:id="@+id/broadcast_info"
+            android:layout_width="@dimen/media_output_broadcast_info"
+            android:layout_height="@dimen/media_output_broadcast_info"
+            android:src="@drawable/ic_info_outline"
+            android:tint="?android:attr/textColorTertiary"
+            android:clickable="true"
+            android:layout_marginTop="168dp"
+            android:layout_marginStart="31dp"/>
+    </LinearLayout>
+
+    <LinearLayout
+        android:id="@+id/broadcast_name_layout"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:paddingStart="@dimen/media_output_broadcast_info_item_padding_start"
+        android:paddingEnd="@dimen/media_output_broadcast_info_item_padding_end"
+        android:orientation="horizontal">
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_weight="1"
+            android:orientation="vertical"
+            style="@style/BroadcastDialog.InfoItem" >
+            <TextView
+                android:id="@+id/broadcast_name_title"
+                android:text="@string/media_output_broadcast_name"
+                style="@style/BroadcastDialog.InfoItem.Title" />
+            <TextView
+                android:id="@+id/broadcast_name_summary"
+                style="@style/BroadcastDialog.InfoItem.Summary" />
+        </LinearLayout>
+
+        <View
+            style="@style/BroadcastDialog.Divider.Vertical" />
+
+        <FrameLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="end|center_vertical">
+            <ImageView
+                android:id="@+id/broadcast_name_edit"
+                style="@style/BroadcastDialog.InfoItem.Edit" />
+        </FrameLayout>
+    </LinearLayout>
+
+    <LinearLayout
+        android:id="@+id/broadcast_code_layout"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:paddingStart="@dimen/media_output_broadcast_info_item_padding_start"
+        android:paddingEnd="@dimen/media_output_broadcast_info_item_padding_end"
+        android:orientation="horizontal" >
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_weight="1"
+            android:orientation="vertical"
+            style="@style/BroadcastDialog.InfoItem" >
+            <TextView
+                android:id="@+id/broadcast_code_title"
+                android:text="@string/media_output_broadcast_code"
+                style="@style/BroadcastDialog.InfoItem.Title" />
+            <TextView
+                android:id="@+id/broadcast_code_summary"
+                style="@style/BroadcastDialog.InfoItem.Summary" />
+        </LinearLayout>
+
+        <FrameLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="end|center_vertical"
+            android:layout_marginEnd="26dp">
+            <ImageView
+                android:id="@+id/broadcast_code_eye"
+                android:layout_width="20dp"
+                android:layout_height="16dp"
+                android:background="?android:attr/selectableItemBackground"
+                android:clickable="true"
+                android:focusable="true"
+                android:src="@drawable/ic_broadcast_code_eye"
+                android:tint="?android:attr/textColorPrimary"/>
+        </FrameLayout>
+
+        <View
+            style="@style/BroadcastDialog.Divider.Vertical" />
+
+        <FrameLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="end|center_vertical">
+            <ImageView
+                android:id="@+id/broadcast_code_edit"
+                style="@style/BroadcastDialog.InfoItem.Edit" />
+        </FrameLayout>
+    </LinearLayout>
+
+    <View
+        style="@style/BroadcastDialog.Divider.Horizontal"
+        android:layout_marginTop="14dp"
+        android:layout_marginBottom="20dp"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/media_output_broadcast_update_dialog.xml b/packages/SystemUI/res/layout/media_output_broadcast_update_dialog.xml
new file mode 100644
index 000000000000..8b7a019b791b
--- /dev/null
+++ b/packages/SystemUI/res/layout/media_output_broadcast_update_dialog.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2022 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingLeft="?android:attr/dialogPreferredPadding"
+    android:paddingRight="?android:attr/dialogPreferredPadding">
+    <EditText
+        android:id="@+id/broadcast_edit_text"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:minHeight="48dp"
+        android:textAlignment="viewStart"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/media_output_dialog.xml b/packages/SystemUI/res/layout/media_output_dialog.xml
index 05343e75b448..836f59dc8fb2 100644
--- a/packages/SystemUI/res/layout/media_output_dialog.xml
+++ b/packages/SystemUI/res/layout/media_output_dialog.xml
@@ -71,6 +71,13 @@
         </LinearLayout>
     </LinearLayout>
 
+    <ViewStub
+        android:id="@+id/broadcast_qrcode"
+        android:layout="@layout/media_output_broadcast_area"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content" >
+    </ViewStub>
+
     <LinearLayout
         android:id="@+id/device_list"
         android:layout_width="match_parent"
diff --git a/packages/SystemUI/res/values/dimens.xml b/packages/SystemUI/res/values/dimens.xml
index a309cc4ff1f5..1dd40fb60cbd 100644
--- a/packages/SystemUI/res/values/dimens.xml
+++ b/packages/SystemUI/res/values/dimens.xml
@@ -1429,4 +1429,15 @@
     <dimen name="dream_overlay_complication_margin">0dp</dimen>
 
     <dimen name="status_view_margin_horizontal">0dp</dimen>
+
+    <!-- Media output broadcast dialog QR code picture size -->
+    <dimen name="media_output_qrcode_size">216dp</dimen>
+    <dimen name="media_output_broadcast_info">21dp</dimen>
+    <dimen name="media_output_broadcast_info_item_width">256dp</dimen>
+    <dimen name="media_output_broadcast_info_item_height">56dp</dimen>
+    <dimen name="media_output_broadcast_info_item_padding_start">43dp</dimen>
+    <dimen name="media_output_broadcast_info_item_padding_end">31dp</dimen>
+    <dimen name="media_output_broadcast_info_title_height">24dp</dimen>
+    <dimen name="media_output_broadcast_info_summary_height">20dp</dimen>
+    <dimen name="media_output_broadcast_info_edit">18dp</dimen>
 </resources>
diff --git a/packages/SystemUI/res/values/strings.xml b/packages/SystemUI/res/values/strings.xml
index d3b76d90d09f..21ba6c6e7b15 100644
--- a/packages/SystemUI/res/values/strings.xml
+++ b/packages/SystemUI/res/values/strings.xml
@@ -2202,6 +2202,21 @@
     <!-- Button text for stopping casting [CHAR LIMIT=60] -->
     <string name="media_output_dialog_button_stop_casting">Stop casting</string>
 
+    <!-- Media Output Broadcast Dialog -->
+    <!-- Title for Broadcast First Notify Dialog [CHAR LIMIT=60] -->
+    <string name="media_output_first_broadcast_title">How broadcasting works</string>
+    <!-- Title for Broadcast Notify Dialog [CHAR LIMIT=60] -->
+    <string name="media_output_broadcast">Broadcast</string>
+    <!-- Message for notifying the user about the Broadcast at first launch [CHAR LIMIT=NONE] -->
+    <string name="media_output_first_notify_broadcast_message">People near you with compatible Bluetooth devices can listen to the media you\'re broadcasting</string>
+    <!-- Message for Broadcasting information and QR code [CHAR LIMIT=NONE] -->
+    <string name="media_output_broadcasting_message">To listen to your broadcast, people nearby with compatible Bluetooth devices can scan your QR code or use your broadcast name and password</string>
+    <!-- Title for Broadcast Name [CHAR LIMIT=60] -->
+    <string name="media_output_broadcast_name">Broadcast Name</string>
+    <!-- Title for Broadcast Code(Password) [CHAR LIMIT=60] -->
+    <string name="media_output_broadcast_code">Password</string>
+    <!-- Button for change broadcast name and broadcast code [CHAR LIMIT=60] -->
+    <string name="media_output_broadcast_dialog_save">Save</string>
 
     <!-- Label for clip data when copying the build number off QS [CHAR LIMIT=NONE]-->
     <string name="build_number_clip_data_label">Build number</string>
diff --git a/packages/SystemUI/res/values/styles.xml b/packages/SystemUI/res/values/styles.xml
index a61eda8f0e09..1312654fae98 100644
--- a/packages/SystemUI/res/values/styles.xml
+++ b/packages/SystemUI/res/values/styles.xml
@@ -1064,4 +1064,66 @@
         <item name="android:fontFamily">?android:attr/textAppearanceSmall</item>
         <item name="android:textDirection">locale</item>
     </style>
+
+    <style name="BroadcastDialog">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_gravity">start|center_vertical</item>
+    </style>
+
+    <style name="BroadcastDialog.InfoItem">
+        <item name="android:layout_width">@dimen/media_output_broadcast_info_item_width</item>
+        <item name="android:layout_height">@dimen/media_output_broadcast_info_item_height</item>
+        <item name="android:clickable">false</item>
+        <item name="android:gravity">start|center_vertical</item>
+    </style>
+
+    <style name="BroadcastDialog.InfoItem.Title">
+        <item name="android:layout_height">@dimen/media_output_broadcast_info_title_height</item>
+        <item name="android:textAppearance">@style/TextAppearance.BroadcastDialog</item>
+    </style>
+
+    <style name="BroadcastDialog.InfoItem.Summary">
+        <item name="android:layout_height">@dimen/media_output_broadcast_info_summary_height</item>
+        <item name="android:textAppearance">@style/TextAppearance.BroadcastDialog.Secondary</item>
+    </style>
+
+    <style name="BroadcastDialog.InfoItem.Edit">
+        <item name="android:layout_width">@dimen/media_output_broadcast_info_edit</item>
+        <item name="android:layout_height">@dimen/media_output_broadcast_info_edit</item>
+        <item name="android:background">?android:attr/selectableItemBackground</item>
+        <item name="android:clickable">true</item>
+        <item name="android:focusable">true</item>
+        <item name="android:src">@*android:drawable/ic_mode_edit</item>
+        <item name="android:tint">?android:attr/textColorPrimary</item>
+    </style>
+
+    <style name="BroadcastDialog.Divider">
+        <item name="android:background">?android:attr/textColorSecondary</item>
+    </style>
+
+    <style name="BroadcastDialog.Divider.Horizontal">
+        <item name="android:layout_width">348dp</item>
+        <item name="android:layout_height">1dp</item>
+        <item name="android:layout_gravity">center_horizontal</item>
+    </style>
+
+
+    <style name="BroadcastDialog.Divider.Vertical">
+        <item name="android:layout_width">1dp</item>
+        <item name="android:layout_height">28dp</item>
+        <item name="android:layout_marginEnd">30dp</item>
+    </style>
+
+    <style name="TextAppearance.BroadcastDialog">
+        <item name="android:fontFamily">@*android:string/config_headlineFontFamily</item>
+        <item name="android:textSize">16sp</item>
+        <item name="android:textColor">?android:attr/textColorPrimary</item>
+        <item name="android:textDirection">locale</item>
+    </style>
+
+    <style name="TextAppearance.BroadcastDialog.Secondary">
+        <item name="android:textSize">14sp</item>
+        <item name="android:textColor">?android:attr/textColorSecondary</item>
+    </style>
 </resources>
diff --git a/packages/SystemUI/src/com/android/systemui/media/dialog/MediaOutputBroadcastDialog.java b/packages/SystemUI/src/com/android/systemui/media/dialog/MediaOutputBroadcastDialog.java
new file mode 100644
index 000000000000..c277c334d9c4
--- /dev/null
+++ b/packages/SystemUI/src/com/android/systemui/media/dialog/MediaOutputBroadcastDialog.java
@@ -0,0 +1,249 @@
+/*
+ * Copyright (C) 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.android.systemui.media.dialog;
+
+import android.app.AlertDialog;
+import android.content.Context;
+import android.graphics.Bitmap;
+import android.graphics.drawable.Drawable;
+import android.os.Bundle;
+import android.text.method.HideReturnsTransformationMethod;
+import android.text.method.PasswordTransformationMethod;
+import android.util.Log;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewStub;
+import android.view.WindowManager;
+import android.widget.Button;
+import android.widget.EditText;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import androidx.core.graphics.drawable.IconCompat;
+
+import com.android.settingslib.qrcode.QrCodeGenerator;
+import com.android.systemui.R;
+import com.android.systemui.broadcast.BroadcastSender;
+import com.android.systemui.dagger.SysUISingleton;
+import com.android.systemui.statusbar.phone.SystemUIDialog;
+
+import com.google.zxing.WriterException;
+
+/**
+ * Dialog for media output broadcast.
+ */
+@SysUISingleton
+public class MediaOutputBroadcastDialog extends MediaOutputBaseDialog {
+    private static final String TAG = "BroadcastDialog";
+
+    private ViewStub mBroadcastInfoArea;
+    private ImageView mBroadcastQrCodeView;
+    private ImageView mBroadcastNotify;
+    private TextView mBroadcastName;
+    private ImageView mBroadcastNameEdit;
+    private TextView mBroadcastCode;
+    private ImageView mBroadcastCodeEye;
+    private Boolean mIsPasswordHide = true;
+    private ImageView mBroadcastCodeEdit;
+    private Button mStopButton;
+
+    static final int METADATA_BROADCAST_NAME = 0;
+    static final int METADATA_BROADCAST_CODE = 1;
+
+    MediaOutputBroadcastDialog(Context context, boolean aboveStatusbar,
+            BroadcastSender broadcastSender, MediaOutputController mediaOutputController) {
+        super(context, broadcastSender, mediaOutputController);
+        mAdapter = new MediaOutputGroupAdapter(mMediaOutputController);
+        // TODO(b/226710953): Move the part to MediaOutputBaseDialog for every class
+        //  that extends MediaOutputBaseDialog
+        if (!aboveStatusbar) {
+            getWindow().setType(WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY);
+        }
+    }
+
+    @Override
+    public void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        initBtQrCodeUI();
+    }
+
+    @Override
+    int getHeaderIconRes() {
+        return 0;
+    }
+
+    @Override
+    IconCompat getHeaderIcon() {
+        return mMediaOutputController.getHeaderIcon();
+    }
+
+    @Override
+    int getHeaderIconSize() {
+        return mContext.getResources().getDimensionPixelSize(
+                R.dimen.media_output_dialog_header_album_icon_size);
+    }
+
+    @Override
+    CharSequence getHeaderText() {
+        return mMediaOutputController.getHeaderTitle();
+    }
+
+    @Override
+    CharSequence getHeaderSubtitle() {
+        return mMediaOutputController.getHeaderSubTitle();
+    }
+
+    @Override
+    Drawable getAppSourceIcon() {
+        return mMediaOutputController.getAppSourceIcon();
+    }
+
+    @Override
+    int getStopButtonVisibility() {
+        return View.VISIBLE;
+    }
+
+    // TODO(b/222674827): To get the information from BluetoothLeBroadcastMetadata(Broadcast code)
+    // and BluetoothLeAudioContentMetadata(Program info) when start Broadcast is successful.
+    private String getBroadcastMetaDataInfo(int metaData) {
+        switch (metaData) {
+            case METADATA_BROADCAST_NAME:
+                return "";
+            case METADATA_BROADCAST_CODE:
+                return "";
+            default:
+                return "";
+        }
+    }
+
+    private void initBtQrCodeUI() {
+        //add the view to xml
+        inflateBroadcastInfoArea();
+
+        //init UI component
+        mBroadcastQrCodeView = getDialogView().requireViewById(R.id.qrcode_view);
+        //Set the QR code view
+        setQrCodeView();
+
+        mBroadcastNotify = getDialogView().requireViewById(R.id.broadcast_info);
+        mBroadcastNotify.setOnClickListener(v -> {
+            mMediaOutputController.launchLeBroadcastNotifyDialog(null, null,
+                    MediaOutputController.BroadcastNotifyDialog.ACTION_BROADCAST_INFO_ICON);
+        });
+        mBroadcastName = getDialogView().requireViewById(R.id.broadcast_name_summary);
+        mBroadcastNameEdit = getDialogView().requireViewById(R.id.broadcast_name_edit);
+        mBroadcastNameEdit.setOnClickListener(v -> {
+            launchBroadcastUpdatedDialog(false, mBroadcastName.getText().toString());
+        });
+        mBroadcastCode = getDialogView().requireViewById(R.id.broadcast_code_summary);
+        mBroadcastCode.setTransformationMethod(PasswordTransformationMethod.getInstance());
+        mBroadcastCodeEye = getDialogView().requireViewById(R.id.broadcast_code_eye);
+        mBroadcastCodeEye.setOnClickListener(v -> {
+            updateBroadcastCodeVisibility();
+        });
+        mBroadcastCodeEdit = getDialogView().requireViewById(R.id.broadcast_code_edit);
+        mBroadcastCodeEdit.setOnClickListener(v -> {
+            launchBroadcastUpdatedDialog(true, mBroadcastCode.getText().toString());
+        });
+
+        mBroadcastName.setText(getBroadcastMetaDataInfo(METADATA_BROADCAST_NAME));
+        mBroadcastCode.setText(getBroadcastMetaDataInfo(METADATA_BROADCAST_CODE));
+
+        mStopButton = getDialogView().requireViewById(R.id.stop);
+        mStopButton.setOnClickListener(v -> {
+            stopBroadcast();
+        });
+    }
+
+    private void inflateBroadcastInfoArea() {
+        mBroadcastInfoArea = getDialogView().requireViewById(R.id.broadcast_qrcode);
+        mBroadcastInfoArea.inflate();
+    }
+
+    private void setQrCodeView() {
+        //get the MetaData, and convert to BT QR code format.
+        String broadcastMetaData = getBroadcastMetaData();
+        if (broadcastMetaData.isEmpty()) {
+            //TDOD(b/226708424) Error handling for unable to generate the QR code bitmap
+            return;
+        }
+        try {
+            final int qrcodeSize = getContext().getResources().getDimensionPixelSize(
+                    R.dimen.media_output_qrcode_size);
+            final Bitmap bmp = QrCodeGenerator.encodeQrCode(broadcastMetaData, qrcodeSize);
+            mBroadcastQrCodeView.setImageBitmap(bmp);
+        } catch (WriterException e) {
+            //TDOD(b/226708424) Error handling for unable to generate the QR code bitmap
+            Log.e(TAG, "Error generatirng QR code bitmap " + e);
+        }
+    }
+
+    private void updateBroadcastCodeVisibility() {
+        mBroadcastCode.setTransformationMethod(
+                mIsPasswordHide ? HideReturnsTransformationMethod.getInstance()
+                        : PasswordTransformationMethod.getInstance());
+        mIsPasswordHide = !mIsPasswordHide;
+    }
+
+    private void launchBroadcastUpdatedDialog(boolean isPassword, String editString) {
+        final View layout = LayoutInflater.from(mContext).inflate(
+                R.layout.media_output_broadcast_update_dialog, null);
+        final EditText editText = layout.requireViewById(R.id.broadcast_edit_text);
+        editText.setText(editString);
+        final AlertDialog alertDialog = new Builder(mContext)
+                .setTitle(isPassword ? R.string.media_output_broadcast_code
+                    : R.string.media_output_broadcast_name)
+                .setView(layout)
+                .setNegativeButton(android.R.string.cancel, null)
+                .setPositiveButton(R.string.media_output_broadcast_dialog_save,
+                        (d, w) -> {
+                            updateBroadcast(isPassword, editText.getText().toString());
+                        })
+                .create();
+
+        alertDialog.getWindow().setType(WindowManager.LayoutParams.TYPE_KEYGUARD_DIALOG);
+        SystemUIDialog.setShowForAllUsers(alertDialog, true);
+        SystemUIDialog.registerDismissListener(alertDialog);
+        alertDialog.show();
+    }
+
+    /**
+     * TODO(b/222674827): The method should be get the BluetoothLeBroadcastMetadata after
+     * starting the Broadcast session successfully. Then we will follow the BT QR code format
+     * that convert BluetoothLeBroadcastMetadata object to String format.
+     */
+    private String getBroadcastMetaData() {
+        return "";
+    }
+
+    /**
+     * TODO(b/222676140): These method are about the LE Audio Broadcast API. The framework APIS
+     * will be wrapped in SettingsLib. And the UI will be executed through it.
+     */
+    private void updateBroadcast(boolean isPassword, String updatedString) {
+
+    }
+
+    /**
+     * TODO(b/222676140): These method are about the LE Audio Broadcast API. The framework APIS
+     * will be wrapped in SettingsLib. And the UI will be executed through it.
+     */
+    private void stopBroadcast() {
+        dismiss();
+    }
+}
diff --git a/packages/SystemUI/src/com/android/systemui/media/dialog/MediaOutputController.java b/packages/SystemUI/src/com/android/systemui/media/dialog/MediaOutputController.java
index 1cc96c0fd0de..97e79e9cab1b 100644
--- a/packages/SystemUI/src/com/android/systemui/media/dialog/MediaOutputController.java
+++ b/packages/SystemUI/src/com/android/systemui/media/dialog/MediaOutputController.java
@@ -18,6 +18,7 @@ package com.android.systemui.media.dialog;
 
 import static android.provider.Settings.ACTION_BLUETOOTH_PAIRING_SETTINGS;
 
+import android.app.AlertDialog;
 import android.app.Notification;
 import android.app.WallpaperColors;
 import android.content.Context;
@@ -46,6 +47,7 @@ import android.provider.Settings;
 import android.text.TextUtils;
 import android.util.Log;
 import android.view.View;
+import android.view.WindowManager;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.VisibleForTesting;
@@ -64,11 +66,13 @@ import com.android.settingslib.utils.ThreadUtils;
 import com.android.systemui.R;
 import com.android.systemui.animation.ActivityLaunchAnimator;
 import com.android.systemui.animation.DialogLaunchAnimator;
+import com.android.systemui.broadcast.BroadcastSender;
 import com.android.systemui.media.nearby.NearbyMediaDevicesManager;
 import com.android.systemui.monet.ColorScheme;
 import com.android.systemui.plugins.ActivityStarter;
 import com.android.systemui.statusbar.notification.collection.NotificationEntry;
 import com.android.systemui.statusbar.notification.collection.notifcollection.CommonNotifCollection;
+import com.android.systemui.statusbar.phone.SystemUIDialog;
 
 import java.util.ArrayList;
 import java.util.Collection;
@@ -93,6 +97,7 @@ public class MediaOutputController implements LocalMediaManager.DeviceCallback,
     private final String mPackageName;
     private final Context mContext;
     private final MediaSessionManager mMediaSessionManager;
+    private final LocalBluetoothManager mLocalBluetoothManager;
     private final ActivityStarter mActivityStarter;
     private final DialogLaunchAnimator mDialogLaunchAnimator;
     private final List<MediaDevice> mGroupMediaDevices = new CopyOnWriteArrayList<>();
@@ -117,6 +122,11 @@ public class MediaOutputController implements LocalMediaManager.DeviceCallback,
     private int mColorConnectedItemBackground;
     private int mColorPositiveButtonText;
 
+    public enum BroadcastNotifyDialog {
+        ACTION_FIRST_LAUNCH,
+        ACTION_BROADCAST_INFO_ICON
+    }
+
     @Inject
     public MediaOutputController(@NonNull Context context, String packageName,
             MediaSessionManager mediaSessionManager, LocalBluetoothManager
@@ -127,6 +137,7 @@ public class MediaOutputController implements LocalMediaManager.DeviceCallback,
         mContext = context;
         mPackageName = packageName;
         mMediaSessionManager = mediaSessionManager;
+        mLocalBluetoothManager = lbm;
         mActivityStarter = starter;
         mNotifCollection = notifCollection;
         InfoMediaManager imm = new InfoMediaManager(mContext, packageName, null, lbm);
@@ -628,6 +639,42 @@ public class MediaOutputController implements LocalMediaManager.DeviceCallback,
         mActivityStarter.startActivity(launchIntent, true, controller);
     }
 
+    void launchLeBroadcastNotifyDialog(View mediaOutputDialog, BroadcastSender broadcastSender,
+            BroadcastNotifyDialog action) {
+        final AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
+        switch (action) {
+            case ACTION_FIRST_LAUNCH:
+                builder.setTitle(R.string.media_output_first_broadcast_title);
+                builder.setMessage(R.string.media_output_first_notify_broadcast_message);
+                builder.setNegativeButton(android.R.string.cancel, null);
+                builder.setPositiveButton(R.string.media_output_broadcast,
+                        (d, w) -> {
+                            launchMediaOutputBroadcastDialog(mediaOutputDialog, broadcastSender);
+                        });
+                break;
+            case ACTION_BROADCAST_INFO_ICON:
+                builder.setTitle(R.string.media_output_broadcast);
+                builder.setMessage(R.string.media_output_broadcasting_message);
+                builder.setPositiveButton(android.R.string.ok, null);
+                break;
+        }
+
+        final AlertDialog dialog = builder.create();
+        dialog.getWindow().setType(WindowManager.LayoutParams.TYPE_KEYGUARD_DIALOG);
+        SystemUIDialog.setShowForAllUsers(dialog, true);
+        SystemUIDialog.registerDismissListener(dialog);
+        dialog.show();
+    }
+
+    void launchMediaOutputBroadcastDialog(View mediaOutputDialog, BroadcastSender broadcastSender) {
+        MediaOutputController controller = new MediaOutputController(mContext, mPackageName,
+                mMediaSessionManager, mLocalBluetoothManager, mActivityStarter,
+                mNotifCollection, mDialogLaunchAnimator, Optional.of(mNearbyMediaDevicesManager));
+        MediaOutputBroadcastDialog dialog = new MediaOutputBroadcastDialog(mContext, true,
+                broadcastSender, controller);
+        mDialogLaunchAnimator.showFromView(dialog, mediaOutputDialog);
+    }
+
     boolean isActiveRemoteDevice(@NonNull MediaDevice device) {
         final List<String> features = device.getFeatures();
         return (features.contains(MediaRoute2Info.FEATURE_REMOTE_PLAYBACK)