Update hearing device dialog UI

1. Move title out of spinner
2. Spinner dropdown style
3. Add title of related tools

Flag: EXEMPT bugfix
Bug: 376779544
Test: manually check the UI, results attached in bug
Test: atest HearingDevicesDialogDelegateTest
Change-Id: Iffa77fc5283635dc73b18508eb07e6b257511057

14 files changed, 343 insertions, 158 deletions

diff --git a/packages/SystemUI/multivalentTests/src/com/android/systemui/accessibility/hearingaid/HearingDevicesDialogDelegateTest.java b/packages/SystemUI/multivalentTests/src/com/android/systemui/accessibility/hearingaid/HearingDevicesDialogDelegateTest.java
index fcb433b5db4e..b866e81c9017 100644
--- a/packages/SystemUI/multivalentTests/src/com/android/systemui/accessibility/hearingaid/HearingDevicesDialogDelegateTest.java
+++ b/packages/SystemUI/multivalentTests/src/com/android/systemui/accessibility/hearingaid/HearingDevicesDialogDelegateTest.java
@@ -47,7 +47,6 @@ import android.provider.Settings;
 import android.testing.TestableLooper;
 import android.view.View;
 import android.view.ViewGroup;
-import android.widget.LinearLayout;
 import android.widget.Space;
 import android.widget.Spinner;
 
@@ -217,6 +216,18 @@ public class HearingDevicesDialogDelegateTest extends SysuiTestCase {
 
     @Test
     @EnableFlags(Flags.FLAG_HEARING_DEVICES_DIALOG_RELATED_TOOLS)
+    public void showDialog_noLiveCaption_noRelatedToolsInConfig_relatedToolLayoutGone() {
+        mContext.getOrCreateTestableResources().addOverride(
+                R.array.config_quickSettingsHearingDevicesRelatedToolName, new String[]{});
+
+        setUpPairNewDeviceDialog();
+        mDialog.show();
+
+        assertToolsUi(0);
+    }
+
+    @Test
+    @EnableFlags(Flags.FLAG_HEARING_DEVICES_DIALOG_RELATED_TOOLS)
     public void showDialog_hasLiveCaption_noRelatedToolsInConfig_showOneRelatedTool() {
         when(mPackageManager.queryIntentActivities(
                 eq(LIVE_CAPTION_INTENT), anyInt())).thenReturn(
@@ -227,8 +238,7 @@ public class HearingDevicesDialogDelegateTest extends SysuiTestCase {
         setUpPairNewDeviceDialog();
         mDialog.show();
 
-        LinearLayout relatedToolsView = (LinearLayout) getRelatedToolsView(mDialog);
-        assertThat(countChildWithoutSpace(relatedToolsView)).isEqualTo(1);
+        assertToolsUi(1);
     }
 
     @Test
@@ -251,8 +261,7 @@ public class HearingDevicesDialogDelegateTest extends SysuiTestCase {
         setUpPairNewDeviceDialog();
         mDialog.show();
 
-        LinearLayout relatedToolsView = (LinearLayout) getRelatedToolsView(mDialog);
-        assertThat(countChildWithoutSpace(relatedToolsView)).isEqualTo(2);
+        assertToolsUi(2);
     }
 
     @Test
@@ -263,8 +272,8 @@ public class HearingDevicesDialogDelegateTest extends SysuiTestCase {
         setUpDeviceListDialog();
         mDialog.show();
 
-        Spinner spinner = (Spinner) getPresetSpinner(mDialog);
-        assertThat(spinner.getVisibility()).isEqualTo(View.GONE);
+        ViewGroup presetLayout = getPresetLayout(mDialog);
+        assertThat(presetLayout.getVisibility()).isEqualTo(View.GONE);
     }
 
     @Test
@@ -276,8 +285,9 @@ public class HearingDevicesDialogDelegateTest extends SysuiTestCase {
         setUpDeviceListDialog();
         mDialog.show();
 
-        Spinner spinner = (Spinner) getPresetSpinner(mDialog);
-        assertThat(spinner.getVisibility()).isEqualTo(View.VISIBLE);
+        ViewGroup presetLayout = getPresetLayout(mDialog);
+        assertThat(presetLayout.getVisibility()).isEqualTo(View.VISIBLE);
+        Spinner spinner = getPresetSpinner(mDialog);
         assertThat(spinner.getSelectedItemPosition()).isEqualTo(0);
     }
 
@@ -292,8 +302,9 @@ public class HearingDevicesDialogDelegateTest extends SysuiTestCase {
         mDialogDelegate.onActiveDeviceChanged(mCachedDevice, BluetoothProfile.LE_AUDIO);
         mTestableLooper.processAllMessages();
 
-        Spinner spinner = (Spinner) getPresetSpinner(mDialog);
-        assertThat(spinner.getVisibility()).isEqualTo(View.VISIBLE);
+        ViewGroup presetLayout = getPresetLayout(mDialog);
+        assertThat(presetLayout.getVisibility()).isEqualTo(View.VISIBLE);
+        Spinner spinner = getPresetSpinner(mDialog);
         assertThat(spinner.getSelectedItemPosition()).isEqualTo(0);
     }
 
@@ -359,14 +370,23 @@ public class HearingDevicesDialogDelegateTest extends SysuiTestCase {
         return dialog.requireViewById(R.id.pair_new_device_button);
     }
 
-    private View getRelatedToolsView(SystemUIDialog dialog) {
-        return dialog.requireViewById(R.id.related_tools_container);
+    private ViewGroup getToolsContainer(SystemUIDialog dialog) {
+        return dialog.requireViewById(R.id.tools_container);
+    }
+
+    private ViewGroup getToolsLayout(SystemUIDialog dialog) {
+        return dialog.requireViewById(R.id.tools_layout);
     }
 
-    private View getPresetSpinner(SystemUIDialog dialog) {
+    private Spinner getPresetSpinner(SystemUIDialog dialog) {
         return dialog.requireViewById(R.id.preset_spinner);
     }
 
+    private ViewGroup getPresetLayout(SystemUIDialog dialog) {
+        return dialog.requireViewById(R.id.preset_layout);
+    }
+
+
     private int countChildWithoutSpace(ViewGroup viewGroup) {
         int spaceCount = 0;
         for (int i = 0; i < viewGroup.getChildCount(); i++) {
@@ -377,6 +397,15 @@ public class HearingDevicesDialogDelegateTest extends SysuiTestCase {
         return viewGroup.getChildCount() - spaceCount;
     }
 
+    private void assertToolsUi(int childCount) {
+        ViewGroup toolsContainer = getToolsContainer(mDialog);
+        assertThat(countChildWithoutSpace(toolsContainer)).isEqualTo(childCount);
+
+        int targetVisibility = childCount == 0 ? View.GONE : View.VISIBLE;
+        ViewGroup toolsLayout = getToolsLayout(mDialog);
+        assertThat(toolsLayout.getVisibility()).isEqualTo(targetVisibility);
+    }
+
     @After
     public void reset() {
         if (mDialogDelegate != null) {
diff --git a/packages/SystemUI/res/drawable/hearing_devices_preset_spinner_background.xml b/packages/SystemUI/res/drawable/hearing_devices_spinner_background.xml
index c83b6d38a0e1..dfefb9d166af 100644
--- a/packages/SystemUI/res/drawable/hearing_devices_preset_spinner_background.xml
+++ b/packages/SystemUI/res/drawable/hearing_devices_spinner_background.xml
@@ -14,7 +14,8 @@
     limitations under the License.
 -->
 
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
     android:paddingMode="stack">
     <item>
@@ -30,8 +31,8 @@
         android:end="20dp"
         android:gravity="end|center_vertical">
         <vector
-            android:width="@dimen/hearing_devices_preset_spinner_arrow_size"
-            android:height="@dimen/hearing_devices_preset_spinner_arrow_size"
+            android:width="@dimen/hearing_devices_preset_spinner_icon_size"
+            android:height="@dimen/hearing_devices_preset_spinner_icon_size"
             android:viewportWidth="24"
             android:viewportHeight="24"
             android:tint="?androidprv:attr/colorControlNormal">
diff --git a/packages/SystemUI/res/drawable/hearing_devices_preset_spinner_popup_background.xml b/packages/SystemUI/res/drawable/hearing_devices_spinner_popup_background.xml
index f35975ee8548..f35975ee8548 100644
--- a/packages/SystemUI/res/drawable/hearing_devices_preset_spinner_popup_background.xml
+++ b/packages/SystemUI/res/drawable/hearing_devices_spinner_popup_background.xml
diff --git a/packages/SystemUI/res/layout/hearing_devices_preset_dropdown_item.xml b/packages/SystemUI/res/drawable/hearing_devices_spinner_selected_background.xml
index 17c0222ef69e..c708d2280161 100644
--- a/packages/SystemUI/res/layout/hearing_devices_preset_dropdown_item.xml
+++ b/packages/SystemUI/res/drawable/hearing_devices_spinner_selected_background.xml
@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <!--
     Copyright (C) 2024 The Android Open Source Project
 
@@ -13,14 +14,9 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-
-<TextView xmlns:android="http://schemas.android.com/apk/res/android"
-    android:id="@+id/hearing_devices_preset_option_text"
-    style="?android:attr/spinnerDropDownItemStyle"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:minHeight="@dimen/hearing_devices_preset_spinner_height"
-    android:paddingStart="@dimen/hearing_devices_preset_spinner_text_padding_start"
-    android:gravity="center_vertical"
-    android:textDirection="locale"
-    android:ellipsize="end" />
\ No newline at end of file
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+    android:drawable="@drawable/settingslib_switch_bar_bg_on"
+    android:insetTop="8dp"
+    android:insetBottom="8dp"
+    android:insetLeft="11dp"
+    android:insetRight="11dp" />
\ No newline at end of file
diff --git a/packages/SystemUI/res/drawable/ic_check.xml b/packages/SystemUI/res/drawable/ic_check.xml
new file mode 100644
index 000000000000..80707d876146
--- /dev/null
+++ b/packages/SystemUI/res/drawable/ic_check.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    Copyright 2024 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:viewportHeight="24"
+    android:viewportWidth="24">
+    <path
+        android:pathData="M0 0h24v24H0z"/>
+    <path
+        android:fillColor="#FFFFFFFF"
+        android:pathData="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+</vector>
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/hearing_devices_preset_spinner_selected.xml b/packages/SystemUI/res/layout/hearing_devices_preset_spinner_selected.xml
deleted file mode 100644
index d512e7c3a433..000000000000
--- a/packages/SystemUI/res/layout/hearing_devices_preset_spinner_selected.xml
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
-    Copyright (C) 2024 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:minHeight="@dimen/hearing_devices_preset_spinner_height"
-    android:paddingStart="@dimen/hearing_devices_preset_spinner_text_padding_start"
-    android:paddingTop="@dimen/hearing_devices_preset_spinner_text_padding_vertical"
-    android:paddingBottom="@dimen/hearing_devices_preset_spinner_text_padding_vertical"
-    android:orientation="vertical">
-    <TextView
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:textAppearance="@style/TextAppearance.Dialog.Title"
-        android:lineSpacingExtra="6dp"
-        android:text="@string/hearing_devices_preset_label"
-        android:fontFamily="@*android:string/config_headlineFontFamilyMedium"
-        android:textSize="14sp"
-        android:gravity="center_vertical"
-        android:textDirection="locale"
-        android:layout_weight="1" />
-    <TextView
-        android:id="@+id/hearing_devices_preset_option_text"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:textAppearance="@style/TextAppearance.Dialog.Body"
-        android:lineSpacingExtra="6dp"
-        android:gravity="center_vertical"
-        android:ellipsize="end"
-        android:maxLines="1"
-        android:textDirection="locale"
-        android:layout_weight="1" />
-</LinearLayout>
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/hearing_devices_spinner_dropdown_view.xml b/packages/SystemUI/res/layout/hearing_devices_spinner_dropdown_view.xml
new file mode 100644
index 000000000000..70f2cd5fcc28
--- /dev/null
+++ b/packages/SystemUI/res/layout/hearing_devices_spinner_dropdown_view.xml
@@ -0,0 +1,45 @@
+<!--
+    Copyright (C) 2024 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"
+    xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="@dimen/bluetooth_dialog_device_height"
+    android:paddingStart="@dimen/hearing_devices_preset_spinner_padding"
+    android:paddingEnd="@dimen/hearing_devices_preset_spinner_padding"
+    android:orientation="horizontal">
+
+    <ImageView
+        android:id="@+id/hearing_devices_spinner_check_icon"
+        android:layout_width="@dimen/hearing_devices_preset_spinner_icon_size"
+        android:layout_height="@dimen/hearing_devices_preset_spinner_icon_size"
+        android:layout_gravity="center_vertical"
+        android:layout_marginEnd="@dimen/hearing_devices_layout_margin"
+        android:tint="?androidprv:attr/materialColorOnPrimaryContainer"
+        android:src="@drawable/ic_check"
+        android:contentDescription="@string/hearing_devices_spinner_item_selected"/>
+    <TextView
+        android:id="@+id/hearing_devices_spinner_text"
+        style="?android:attr/spinnerDropDownItemStyle"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:textDirection="locale"
+        android:paddingStart="0dp"
+        android:maxLines="1"
+        android:ellipsize="end" />
+
+</LinearLayout>
diff --git a/packages/SystemUI/res/layout/hearing_devices_spinner_view.xml b/packages/SystemUI/res/layout/hearing_devices_spinner_view.xml
new file mode 100644
index 000000000000..75742440e889
--- /dev/null
+++ b/packages/SystemUI/res/layout/hearing_devices_spinner_view.xml
@@ -0,0 +1,32 @@
+<!--
+    Copyright (C) 2024 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="@dimen/bluetooth_dialog_device_height"
+    android:paddingStart="@dimen/hearing_devices_preset_spinner_padding"
+    android:paddingEnd="@dimen/hearing_devices_preset_spinner_padding">
+    <TextView
+        android:id="@+id/hearing_devices_spinner_text"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textAppearance="@style/TextAppearance.Dialog.Body"
+        android:layout_gravity="center_vertical"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:textDirection="locale" />
+</LinearLayout>
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/hearing_devices_tile_dialog.xml b/packages/SystemUI/res/layout/hearing_devices_tile_dialog.xml
index 80692f9481b7..bf04a6f64d6a 100644
--- a/packages/SystemUI/res/layout/hearing_devices_tile_dialog.xml
+++ b/packages/SystemUI/res/layout/hearing_devices_tile_dialog.xml
@@ -28,50 +28,16 @@
         android:layout_height="wrap_content"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@id/preset_spinner" />
-
-    <Spinner
-        android:id="@+id/preset_spinner"
-        style="@style/BluetoothTileDialog.Device"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/hearing_devices_layout_margin"
-        android:minHeight="@dimen/hearing_devices_preset_spinner_height"
-        android:gravity="center_vertical"
-        android:background="@drawable/hearing_devices_preset_spinner_background"
-        android:popupBackground="@drawable/hearing_devices_preset_spinner_popup_background"
-        android:dropDownVerticalOffset="@dimen/hearing_devices_preset_spinner_height"
-        android:dropDownWidth="match_parent"
-        android:paddingStart="0dp"
-        android:paddingEnd="0dp"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/device_list"
-        app:layout_constraintBottom_toTopOf="@id/pair_new_device_button"
-        android:longClickable="false"
-        android:visibility="gone"/>
-
-    <androidx.constraintlayout.widget.Barrier
-        android:id="@+id/device_function_barrier"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:barrierAllowsGoneWidgets="false"
-        app:barrierDirection="bottom"
-        app:constraint_referenced_ids="device_list,preset_spinner" />
+        app:layout_constraintEnd_toEndOf="parent" />
 
     <Button
         android:id="@+id/pair_new_device_button"
         style="@style/BluetoothTileDialog.Device"
-        android:paddingEnd="0dp"
-        android:paddingStart="20dp"
-        android:background="@drawable/bluetooth_tile_dialog_bg_off"
-        android:layout_width="0dp"
-        android:layout_height="64dp"
-        android:contentDescription="@string/accessibility_hearing_device_pair_new_device"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/device_function_barrier"
+        app:layout_constraintTop_toBottomOf="@id/device_list"
+        android:layout_height="@dimen/bluetooth_dialog_device_height"
+        android:contentDescription="@string/accessibility_hearing_device_pair_new_device"
         android:drawableStart="@drawable/ic_add"
         android:drawablePadding="20dp"
         android:drawableTint="?android:attr/textColorPrimary"
@@ -81,26 +47,75 @@
         android:textDirection="locale"
         android:textAlignment="viewStart"
         android:maxLines="1"
-        android:ellipsize="end" />
+        android:ellipsize="end"
+        android:background="@drawable/bluetooth_tile_dialog_bg_off" />
 
-    <androidx.constraintlayout.widget.Barrier
-        android:id="@+id/device_barrier"
-        android:layout_width="wrap_content"
+    <LinearLayout
+        android:id="@+id/preset_layout"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        app:barrierAllowsGoneWidgets="false"
-        app:barrierDirection="bottom"
-        app:constraint_referenced_ids="device_function_barrier, pair_new_device_button" />
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/pair_new_device_button"
+        android:layout_marginTop="@dimen/hearing_devices_layout_margin"
+        android:orientation="vertical">
+        <TextView
+            android:id="@+id/preset_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/bluetooth_dialog_layout_margin"
+            android:layout_marginEnd="@dimen/bluetooth_dialog_layout_margin"
+            android:paddingStart="@dimen/hearing_devices_small_title_padding_horizontal"
+            android:text="@string/hearing_devices_preset_label"
+            android:textAppearance="@style/TextAppearance.Dialog.Title"
+            android:textSize="14sp"
+            android:gravity="center_vertical"
+            android:fontFamily="@*android:string/config_headlineFontFamilyMedium"
+            android:textDirection="locale"/>
+        <Spinner
+            android:id="@+id/preset_spinner"
+            style="@style/BluetoothTileDialog.Device"
+            android:layout_height="@dimen/bluetooth_dialog_device_height"
+            android:layout_marginTop="4dp"
+            android:paddingStart="0dp"
+            android:paddingEnd="0dp"
+            android:background="@drawable/hearing_devices_spinner_background"
+            android:popupBackground="@drawable/hearing_devices_spinner_popup_background"
+            android:dropDownWidth="match_parent"
+            android:longClickable="false"/>
+    </LinearLayout>
 
     <LinearLayout
-        android:id="@+id/related_tools_container"
+        android:id="@+id/tools_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/bluetooth_dialog_layout_margin"
-        android:layout_marginEnd="@dimen/bluetooth_dialog_layout_margin"
-        android:layout_marginTop="@dimen/hearing_devices_layout_margin"
-        android:orientation="horizontal"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/device_barrier" />
+        app:layout_constraintTop_toBottomOf="@id/preset_layout"
+        android:layout_marginTop="@dimen/hearing_devices_layout_margin"
+        android:orientation="vertical">
+        <TextView
+            android:id="@+id/tools_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/bluetooth_dialog_layout_margin"
+            android:layout_marginEnd="@dimen/bluetooth_dialog_layout_margin"
+            android:paddingStart="@dimen/hearing_devices_small_title_padding_horizontal"
+            android:text="@string/hearing_devices_tools_label"
+            android:textAppearance="@style/TextAppearance.Dialog.Title"
+            android:textSize="14sp"
+            android:gravity="center_vertical"
+            android:fontFamily="@*android:string/config_headlineFontFamilyMedium"
+            android:textDirection="locale"/>
+        <LinearLayout
+            android:id="@+id/tools_container"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/bluetooth_dialog_layout_margin"
+            android:layout_marginEnd="@dimen/bluetooth_dialog_layout_margin"
+            android:layout_marginTop="4dp"
+            android:orientation="horizontal"/>
+    </LinearLayout>
+
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/hearing_tool_item.xml b/packages/SystemUI/res/layout/hearing_tool_item.xml
index f5baf2aaf6dc..da9178b56d73 100644
--- a/packages/SystemUI/res/layout/hearing_tool_item.xml
+++ b/packages/SystemUI/res/layout/hearing_tool_item.xml
@@ -46,7 +46,7 @@
         android:textAlignment="center"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/hearing_devices_layout_margin"
+        android:layout_marginTop="4dp"
         android:ellipsize="end"
         android:textSize="12sp"
         android:maxLines="3"
diff --git a/packages/SystemUI/res/values/dimens.xml b/packages/SystemUI/res/values/dimens.xml
index de547add1d1a..660bbf616d33 100644
--- a/packages/SystemUI/res/values/dimens.xml
+++ b/packages/SystemUI/res/values/dimens.xml
@@ -1800,10 +1800,9 @@
 
     <!-- Hearing devices dialog related dimensions -->
     <dimen name="hearing_devices_layout_margin">12dp</dimen>
-    <dimen name="hearing_devices_preset_spinner_height">72dp</dimen>
-    <dimen name="hearing_devices_preset_spinner_text_padding_start">20dp</dimen>
-    <dimen name="hearing_devices_preset_spinner_text_padding_vertical">15dp</dimen>
-    <dimen name="hearing_devices_preset_spinner_arrow_size">24dp</dimen>
+    <dimen name="hearing_devices_small_title_padding_horizontal">16dp</dimen>
+    <dimen name="hearing_devices_preset_spinner_padding">22dp</dimen>
+    <dimen name="hearing_devices_preset_spinner_icon_size">24dp</dimen>
     <dimen name="hearing_devices_preset_spinner_background_radius">28dp</dimen>
     <dimen name="hearing_devices_tool_icon_size">28dp</dimen>
 
diff --git a/packages/SystemUI/res/values/strings.xml b/packages/SystemUI/res/values/strings.xml
index ab64ae5c72df..b6381ab3624d 100644
--- a/packages/SystemUI/res/values/strings.xml
+++ b/packages/SystemUI/res/values/strings.xml
@@ -1001,6 +1001,10 @@
     <string name="hearing_devices_presets_error">Couldn\'t update preset</string>
     <!-- QuickSettings: Title for hearing aids presets. Preset is a set of hearing aid settings. User can apply different settings in different environments (e.g. Outdoor, Restaurant, Home) [CHAR LIMIT=40]-->
     <string name="hearing_devices_preset_label">Preset</string>
+    <!-- QuickSettings: Content description for the icon that indicates the item is selected [CHAR LIMIT=NONE]-->
+    <string name="hearing_devices_spinner_item_selected">Selected</string>
+    <!-- QuickSettings: Title for related tools of hearing. [CHAR LIMIT=40]-->
+    <string name="hearing_devices_tools_label">Tools</string>
     <!-- QuickSettings: Tool name for hearing devices dialog related tools [CHAR LIMIT=40] [BACKUP_MESSAGE_ID=8916875614623730005]-->
     <string name="quick_settings_hearing_devices_live_caption_title">Live Caption</string>
 
diff --git a/packages/SystemUI/src/com/android/systemui/accessibility/hearingaid/HearingDevicesDialogDelegate.java b/packages/SystemUI/src/com/android/systemui/accessibility/hearingaid/HearingDevicesDialogDelegate.java
index 1978bb89b5b2..1f21af80cebb 100644
--- a/packages/SystemUI/src/com/android/systemui/accessibility/hearingaid/HearingDevicesDialogDelegate.java
+++ b/packages/SystemUI/src/com/android/systemui/accessibility/hearingaid/HearingDevicesDialogDelegate.java
@@ -35,10 +35,9 @@ import android.provider.Settings;
 import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.View;
-import android.view.View.Visibility;
+import android.view.ViewGroup;
 import android.view.accessibility.AccessibilityNodeInfo;
 import android.widget.AdapterView;
-import android.widget.ArrayAdapter;
 import android.widget.Button;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
@@ -114,10 +113,9 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
     private SystemUIDialog mDialog;
     private RecyclerView mDeviceList;
     private List<DeviceItem> mHearingDeviceItemList;
+    private View mPresetLayout;
     private Spinner mPresetSpinner;
-    private ArrayAdapter<String> mPresetInfoAdapter;
-    private Button mPairButton;
-    private LinearLayout mRelatedToolsContainer;
+    private HearingDevicesSpinnerAdapter mPresetInfoAdapter;
     private final HearingDevicesPresetsController.PresetCallback mPresetCallback =
             new HearingDevicesPresetsController.PresetCallback() {
                 @Override
@@ -245,7 +243,7 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
                     mPresetsController.getAllPresetInfo();
             final int activePresetIndex = mPresetsController.getActivePresetIndex();
             refreshPresetInfoAdapter(presetInfos, activePresetIndex);
-            mPresetSpinner.setVisibility(
+            mPresetLayout.setVisibility(
                     (activeHearingDevice != null && activeHearingDevice.isConnectedHapClientDevice()
                             && !mPresetInfoAdapter.isEmpty()) ? VISIBLE : GONE);
         });
@@ -291,14 +289,13 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
         }
 
         mUiEventLogger.log(HearingDevicesUiEvent.HEARING_DEVICES_DIALOG_SHOW, mLaunchSourceId);
-        mPairButton = dialog.requireViewById(R.id.pair_new_device_button);
         mDeviceList = dialog.requireViewById(R.id.device_list);
+        mPresetLayout = dialog.requireViewById(R.id.preset_layout);
         mPresetSpinner = dialog.requireViewById(R.id.preset_spinner);
-        mRelatedToolsContainer = dialog.requireViewById(R.id.related_tools_container);
 
         setupDeviceListView(dialog);
         setupPresetSpinner(dialog);
-        setupPairNewDeviceButton(dialog, mShowPairNewDevice ? VISIBLE : GONE);
+        setupPairNewDeviceButton(dialog);
         if (com.android.systemui.Flags.hearingDevicesDialogRelatedTools()) {
             setupRelatedToolsView(dialog);
         }
@@ -353,11 +350,7 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
                 mHearingDeviceItemList);
         mPresetsController.setHearingDeviceIfSupportHap(activeHearingDevice);
 
-        mPresetInfoAdapter = new ArrayAdapter<>(dialog.getContext(),
-                R.layout.hearing_devices_preset_spinner_selected,
-                R.id.hearing_devices_preset_option_text);
-        mPresetInfoAdapter.setDropDownViewResource(
-                R.layout.hearing_devices_preset_dropdown_item);
+        mPresetInfoAdapter = new HearingDevicesSpinnerAdapter(dialog.getContext());
         mPresetSpinner.setAdapter(mPresetInfoAdapter);
 
         // disable redundant Touch & Hold accessibility action for Switch Access
@@ -378,6 +371,7 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
         mPresetSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
             @Override
             public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
+                mPresetInfoAdapter.setSelected(position);
                 mUiEventLogger.log(HearingDevicesUiEvent.HEARING_DEVICES_PRESET_SELECT,
                         mLaunchSourceId);
                 mPresetsController.selectPreset(
@@ -389,14 +383,17 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
                 // Do nothing
             }
         });
-        mPresetSpinner.setVisibility(
+        mPresetLayout.setVisibility(
                 (activeHearingDevice != null && activeHearingDevice.isConnectedHapClientDevice()
                         && !mPresetInfoAdapter.isEmpty()) ? VISIBLE : GONE);
     }
 
-    private void setupPairNewDeviceButton(SystemUIDialog dialog, @Visibility int visibility) {
-        if (visibility == VISIBLE) {
-            mPairButton.setOnClickListener(v -> {
+    private void setupPairNewDeviceButton(SystemUIDialog dialog) {
+        final Button pairButton = dialog.requireViewById(R.id.pair_new_device_button);
+
+        pairButton.setVisibility(mShowPairNewDevice ? VISIBLE : GONE);
+        if (mShowPairNewDevice) {
+            pairButton.setOnClickListener(v -> {
                 mUiEventLogger.log(HearingDevicesUiEvent.HEARING_DEVICES_PAIR, mLaunchSourceId);
                 dismissDialogIfExists();
                 final Intent intent = new Intent(Settings.ACTION_HEARING_DEVICE_PAIRING_SETTINGS);
@@ -404,12 +401,11 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
                 mActivityStarter.postStartActivityDismissingKeyguard(intent, /* delay= */ 0,
                         mDialogTransitionAnimator.createActivityTransitionController(dialog));
             });
-        } else {
-            mPairButton.setVisibility(GONE);
         }
     }
 
     private void setupRelatedToolsView(SystemUIDialog dialog) {
+
         final Context context = dialog.getContext();
         final List<ToolItem> toolItemList = new ArrayList<>();
         final String[] toolNameArray;
@@ -430,15 +426,20 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
         } catch (Resources.NotFoundException e) {
             Log.i(TAG, "No hearing devices related tool config resource");
         }
+
+        final View toolsLayout = dialog.requireViewById(R.id.tools_layout);
+        toolsLayout.setVisibility(toolItemList.isEmpty() ? GONE : VISIBLE);
+
+        final LinearLayout toolsContainer = dialog.requireViewById(R.id.tools_container);
         for (int i = 0; i < toolItemList.size(); i++) {
-            View view = createHearingToolView(context, toolItemList.get(i));
-            mRelatedToolsContainer.addView(view);
+            View view = createHearingToolView(context, toolItemList.get(i), toolsContainer);
+            toolsContainer.addView(view);
             if (i != toolItemList.size() - 1) {
                 final int spaceSize = context.getResources().getDimensionPixelSize(
                         R.dimen.hearing_devices_layout_margin);
                 Space space = new Space(context);
                 space.setLayoutParams(new LinearLayout.LayoutParams(spaceSize, 0));
-                mRelatedToolsContainer.addView(space);
+                toolsContainer.addView(space);
             }
         }
     }
@@ -453,6 +454,7 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
             for (int position = 0; position < size; position++) {
                 if (presetInfos.get(position).getIndex() == activePresetIndex) {
                     mPresetSpinner.setSelection(position, /* animate= */ false);
+                    mPresetInfoAdapter.setSelected(position);
                 }
             }
         }
@@ -493,9 +495,9 @@ public class HearingDevicesDialogDelegate implements SystemUIDialog.Delegate,
     }
 
     @NonNull
-    private View createHearingToolView(Context context, ToolItem item) {
-        View view = LayoutInflater.from(context).inflate(R.layout.hearing_tool_item,
-                mRelatedToolsContainer, false);
+    private View createHearingToolView(Context context, ToolItem item, ViewGroup container) {
+        View view = LayoutInflater.from(context).inflate(R.layout.hearing_tool_item, container,
+                false);
         ImageView icon = view.requireViewById(R.id.tool_icon);
         TextView text = view.requireViewById(R.id.tool_name);
         view.setContentDescription(item.getToolName());
diff --git a/packages/SystemUI/src/com/android/systemui/accessibility/hearingaid/HearingDevicesSpinnerAdapter.java b/packages/SystemUI/src/com/android/systemui/accessibility/hearingaid/HearingDevicesSpinnerAdapter.java
new file mode 100644
index 000000000000..28d742cfa49b
--- /dev/null
+++ b/packages/SystemUI/src/com/android/systemui/accessibility/hearingaid/HearingDevicesSpinnerAdapter.java
@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 2024 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.accessibility.hearingaid;
+
+import static android.view.View.GONE;
+import static android.view.View.VISIBLE;
+
+import android.content.Context;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.ArrayAdapter;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.android.settingslib.Utils;
+import com.android.systemui.res.R;
+
+/**
+ * An ArrayAdapter which was used by Spinner in hearing devices dialog.
+ */
+public class HearingDevicesSpinnerAdapter extends ArrayAdapter<String> {
+
+    private final Context mContext;
+    private int mSelectedPosition;
+
+    public HearingDevicesSpinnerAdapter(@NonNull Context context) {
+        super(context, R.layout.hearing_devices_spinner_view,
+                R.id.hearing_devices_spinner_text);
+        setDropDownViewResource(R.layout.hearing_devices_spinner_dropdown_view);
+        mContext = context;
+    }
+
+    @Override
+    public View getDropDownView(int position, @Nullable View convertView,
+            @NonNull ViewGroup parent) {
+
+        View view = super.getDropDownView(position, convertView, parent);
+
+        final boolean isSelected = position == mSelectedPosition;
+        view.setBackgroundResource(isSelected
+                ? R.drawable.hearing_devices_spinner_selected_background
+                : R.drawable.bluetooth_tile_dialog_bg_off);
+
+        View checkIcon = view.findViewById(R.id.hearing_devices_spinner_check_icon);
+        if (checkIcon != null) {
+            checkIcon.setVisibility(isSelected ? VISIBLE : GONE);
+        }
+
+        TextView text = view.findViewById(R.id.hearing_devices_spinner_text);
+        if (text != null) {
+            int tintColor = Utils.getColorAttr(mContext,
+                    isSelected ? com.android.internal.R.attr.materialColorOnPrimaryContainer
+                            : com.android.internal.R.attr.materialColorOnSurface).getDefaultColor();
+            text.setTextColor(tintColor);
+        }
+        return view;
+    }
+
+    /**
+     * Sets the selected position into this adapter. The selected item will have different UI in
+     * the dropdown view.
+     *
+     * @param position the selected position
+     */
+    public void setSelected(int position) {
+        mSelectedPosition = position;
+        notifyDataSetChanged();
+    }
+}