diff --git a/packages/SystemUI/res/layout/media_smartspace_recommendations.xml b/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
index 9210d05bf72ef..1c4c89fb254af 100644
--- a/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
+++ b/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
@@ -19,29 +19,57 @@
 <com.android.systemui.util.animation.TransitionLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
     android:id="@+id/media_recommendations"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:paddingTop="8dp"
-    android:paddingBottom="8dp"
+    android:paddingStart="@dimen/qs_media_padding"
+    android:paddingEnd="@dimen/qs_media_padding"
     android:clipChildren="false"
     android:clipToPadding="false"
     android:forceHasOverlappingRendering="false"
     android:background="@drawable/qs_media_background">
 
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/media_vertical_start_guideline"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.25" />
+
+    <ImageView
+        android:id="@+id/recommendation_card_icon"
+        android:layout_width="@dimen/qs_aa_media_rec_header_icon_size"
+        android:layout_height="@dimen/qs_aa_media_rec_header_icon_size"
+        android:src="@drawable/ic_headset"
+        android:tint="?android:attr/colorPrimary" />
+
+    <TextView
+        android:id="@+id/recommendation_card_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:singleLine="true"
+        android:text="@string/controls_media_smartspace_rec_title"
+        android:fontFamily="google-sans-medium"
+        android:textColor="?android:attr/colorPrimary"
+        android:textDirection="locale"
+        android:textSize="@dimen/qq_aa_media_rec_header_text_size" />
+
     <ImageView
         android:id="@+id/media_cover1"
         android:layout_width="@dimen/qs_aa_media_rec_album_size"
         android:layout_height="@dimen/qs_aa_media_rec_album_size"
         android:adjustViewBounds="true"
         android:background="@drawable/bg_smartspace_media_item"
+        android:backgroundTint="?androidprv:attr/colorAccentSecondary"
         android:clipToOutline="true"
         android:scaleType="centerCrop"/>
 
-    <ImageView
+    <com.android.internal.widget.CachingIconView
         android:id="@+id/media_logo1"
-        android:layout_width="@dimen/qs_aa_media_rec_icon_size"
-        android:layout_height="@dimen/qs_aa_media_rec_icon_size" />
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:background="@drawable/qs_media_icon_background" />
 
     <ImageView
         android:id="@+id/media_cover2"
@@ -49,13 +77,15 @@
         android:layout_height="@dimen/qs_aa_media_rec_album_size"
         android:adjustViewBounds="true"
         android:background="@drawable/bg_smartspace_media_item"
+        android:backgroundTint="?androidprv:attr/colorAccentSecondary"
         android:clipToOutline="true"
         android:scaleType="centerCrop"/>
 
-    <ImageView
+    <com.android.internal.widget.CachingIconView
         android:id="@+id/media_logo2"
-        android:layout_width="@dimen/qs_aa_media_rec_icon_size"
-        android:layout_height="@dimen/qs_aa_media_rec_icon_size" />
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:background="@drawable/qs_media_icon_background" />
 
     <ImageView
         android:id="@+id/media_cover3"
@@ -63,13 +93,15 @@
         android:layout_height="@dimen/qs_aa_media_rec_album_size"
         android:adjustViewBounds="true"
         android:background="@drawable/bg_smartspace_media_item"
+        android:backgroundTint="?androidprv:attr/colorAccentSecondary"
         android:clipToOutline="true"
         android:scaleType="centerCrop"/>
 
-    <ImageView
+    <com.android.internal.widget.CachingIconView
         android:id="@+id/media_logo3"
-        android:layout_width="@dimen/qs_aa_media_rec_icon_size"
-        android:layout_height="@dimen/qs_aa_media_rec_icon_size" />
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:background="@drawable/qs_media_icon_background" />
 
     <ImageView
         android:id="@+id/media_cover4"
@@ -77,15 +109,49 @@
         android:layout_height="@dimen/qs_aa_media_rec_album_size"
         android:adjustViewBounds="true"
         android:background="@drawable/bg_smartspace_media_item"
+        android:backgroundTint="?androidprv:attr/colorAccentSecondary"
         android:clipToOutline="true"
         android:scaleType="centerCrop"/>
 
-    <ImageView
+    <com.android.internal.widget.CachingIconView
         android:id="@+id/media_logo4"
-        android:layout_width="@dimen/qs_aa_media_rec_icon_size"
-        android:layout_height="@dimen/qs_aa_media_rec_icon_size" />
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:background="@drawable/qs_media_icon_background" />
 
-    <!-- Constraints are set here as they are the same regardless of host -->
+    <ImageView
+        android:id="@+id/media_cover5"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        android:adjustViewBounds="true"
+        android:background="@drawable/bg_smartspace_media_item"
+        android:backgroundTint="?androidprv:attr/colorAccentSecondary"
+        android:clipToOutline="true"
+        android:scaleType="centerCrop"/>
+
+    <com.android.internal.widget.CachingIconView
+        android:id="@+id/media_logo5"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:background="@drawable/qs_media_icon_background" />
+
+    <ImageView
+        android:id="@+id/media_cover6"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        android:adjustViewBounds="true"
+        android:background="@drawable/bg_smartspace_media_item"
+        android:backgroundTint="?androidprv:attr/colorAccentSecondary"
+        android:clipToOutline="true"
+        android:scaleType="centerCrop"/>
+
+    <com.android.internal.widget.CachingIconView
+        android:id="@+id/media_logo6"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:background="@drawable/qs_media_icon_background" />
+
+    <!-- Long press menu -->
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
@@ -136,7 +202,8 @@
         android:minWidth="48dp"
         android:minHeight="48dp"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/dismiss" >
+        app:layout_constraintEnd_toStartOf="@id/dismiss"
+        app:layout_constraintTop_toBottomOf="@id/remove_text">
 
         <TextView
             android:layout_gravity="bottom"
@@ -158,7 +225,8 @@
         android:minWidth="48dp"
         android:minHeight="48dp"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent">
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/remove_text">
 
         <TextView
             android:layout_gravity="bottom"
diff --git a/packages/SystemUI/res/values/dimens.xml b/packages/SystemUI/res/values/dimens.xml
index b76a4cea10044..6c66d0748f762 100644
--- a/packages/SystemUI/res/values/dimens.xml
+++ b/packages/SystemUI/res/values/dimens.xml
@@ -1276,8 +1276,10 @@
     <dimen name="qs_media_disabled_seekbar_vertical_padding">36dp</dimen>
 
     <!-- Size of Smartspace media recommendations cards in the QSPanel carousel -->
-    <dimen name="qs_aa_media_rec_album_size">80dp</dimen>
-    <dimen name="qs_aa_media_rec_icon_size">20dp</dimen>
+    <dimen name="qs_aa_media_rec_header_icon_padding">10dp</dimen>
+    <dimen name="qs_aa_media_rec_header_icon_size">18dp</dimen>
+    <dimen name="qs_aa_media_rec_album_size">72dp</dimen>
+    <dimen name="qq_aa_media_rec_header_text_size">16sp</dimen>
 
     <!-- Window magnification -->
     <dimen name="magnification_border_drag_size">35dp</dimen>
diff --git a/packages/SystemUI/res/values/strings.xml b/packages/SystemUI/res/values/strings.xml
index 8601bdcafa382..71b14493069b9 100644
--- a/packages/SystemUI/res/values/strings.xml
+++ b/packages/SystemUI/res/values/strings.xml
@@ -2837,6 +2837,9 @@
     <!-- Label for button to go to media control settings screen [CHAR_LIMIT=30] -->
     <string name="controls_media_settings_button">Settings</string>
 
+    <!-- Title for Smartspace recommendation card within media controls [CHAR_LIMIT=50] -->
+    <string name="controls_media_smartspace_rec_title">Play</string>
+
     <!-- Error message indicating that a control timed out while waiting for an update [CHAR_LIMIT=30] -->
     <string name="controls_error_timeout">Inactive, check app</string>
     <!-- Error message indicating that an unspecified error occurred while getting the status, and
diff --git a/packages/SystemUI/res/xml/media_recommendation.xml b/packages/SystemUI/res/xml/media_recommendation.xml
deleted file mode 100644
index a1bd231806a16..0000000000000
--- a/packages/SystemUI/res/xml/media_recommendation.xml
+++ /dev/null
@@ -1,97 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (C) 2020 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
-  -->
-<ConstraintSet
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
-
-    <Constraint
-        android:id="@+id/media_cover1"
-        android:layout_width="@dimen/qs_aa_media_rec_album_size"
-        android:layout_height="@dimen/qs_aa_media_rec_album_size"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/media_cover2"
-        app:layout_constraintHorizontal_weight="1"
-        android:visibility="gone"/>
-
-    <Constraint
-        android:id="@+id/media_logo1"
-        android:layout_width="@dimen/qs_aa_media_rec_icon_size"
-        android:layout_height="@dimen/qs_aa_media_rec_icon_size"
-        app:layout_constraintEnd_toEndOf="@+id/media_cover1"
-        app:layout_constraintBottom_toBottomOf="@+id/media_cover1"
-        android:visibility="gone" />
-
-    <Constraint
-        android:id="@+id/media_cover2"
-        android:layout_width="@dimen/qs_aa_media_rec_album_size"
-        android:layout_height="@dimen/qs_aa_media_rec_album_size"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/media_cover1"
-        app:layout_constraintEnd_toStartOf="@id/media_cover3"
-        app:layout_constraintHorizontal_weight="1"
-        android:visibility="gone"/>
-
-    <Constraint
-        android:id="@+id/media_logo2"
-        android:layout_width="@dimen/qs_aa_media_rec_icon_size"
-        android:layout_height="@dimen/qs_aa_media_rec_icon_size"
-        app:layout_constraintEnd_toEndOf="@+id/media_cover2"
-        app:layout_constraintBottom_toBottomOf="@+id/media_cover2"
-        android:visibility="gone" />
-
-    <Constraint
-        android:id="@+id/media_cover3"
-        android:layout_width="@dimen/qs_aa_media_rec_album_size"
-        android:layout_height="@dimen/qs_aa_media_rec_album_size"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/media_cover2"
-        app:layout_constraintEnd_toStartOf="@id/media_cover4"
-        app:layout_constraintHorizontal_weight="1"
-        android:visibility="gone"/>
-
-    <Constraint
-        android:id="@+id/media_logo3"
-        android:layout_width="@dimen/qs_aa_media_rec_icon_size"
-        android:layout_height="@dimen/qs_aa_media_rec_icon_size"
-        app:layout_constraintEnd_toEndOf="@+id/media_cover3"
-        app:layout_constraintBottom_toBottomOf="@+id/media_cover3"
-        android:visibility="gone" />
-
-    <Constraint
-        android:id="@+id/media_cover4"
-        android:layout_width="@dimen/qs_aa_media_rec_album_size"
-        android:layout_height="@dimen/qs_aa_media_rec_album_size"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/media_cover3"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintHorizontal_weight="1"
-        android:visibility="gone"/>
-
-    <Constraint
-        android:id="@+id/media_logo4"
-        android:layout_width="@dimen/qs_aa_media_rec_icon_size"
-        android:layout_height="@dimen/qs_aa_media_rec_icon_size"
-        app:layout_constraintEnd_toEndOf="@+id/media_cover4"
-        app:layout_constraintBottom_toBottomOf="@+id/media_cover4"
-        android:visibility="gone" />
-
-</ConstraintSet>
diff --git a/packages/SystemUI/res/xml/media_recommendation_collapsed.xml b/packages/SystemUI/res/xml/media_recommendation_collapsed.xml
new file mode 100644
index 0000000000000..afd800b106c3d
--- /dev/null
+++ b/packages/SystemUI/res/xml/media_recommendation_collapsed.xml
@@ -0,0 +1,172 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2020 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
+  -->
+<ConstraintSet
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <Constraint
+        android:id="@+id/recommendation_card_icon"
+        android:layout_width="@dimen/qs_aa_media_rec_header_icon_size"
+        android:layout_height="@dimen/qs_aa_media_rec_header_icon_size"
+        android:layout_marginTop="@dimen/qs_aa_media_rec_header_icon_padding"
+        android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_padding"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
+        app:layout_constraintHorizontal_bias="0" />
+
+    <Constraint
+        android:id="@+id/recommendation_card_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_padding"
+        app:layout_constraintTop_toBottomOf="@id/recommendation_card_icon"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
+        app:layout_constraintHorizontal_bias="0" />
+
+    <Constraint
+        android:id="@+id/media_cover1"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
+        app:layout_constraintEnd_toStartOf="@id/media_cover2"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo1"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover1"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover2"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/media_cover1"
+        app:layout_constraintEnd_toStartOf="@id/media_cover3"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo2"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover2"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover2"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover3"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/media_cover2"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintHorizontal_bias="1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo3"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover3"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover3"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover4"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="0dp"
+        app:layout_constraintTop_toBottomOf="@+id/media_cover1"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
+        app:layout_constraintEnd_toStartOf="@id/media_cover5"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintHorizontal_bias="1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo4"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="0dp"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover4"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover4"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover5"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="0dp"
+        app:layout_constraintTop_toBottomOf="@+id/media_cover2"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@+id/media_cover4"
+        app:layout_constraintEnd_toStartOf="@+id/media_cover6"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintHorizontal_bias="1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo5"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="0dp"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover5"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover5"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover6"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="0dp"
+        app:layout_constraintTop_toBottomOf="@id/media_cover3"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/media_cover5"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintHorizontal_bias="1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo6"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="0dp"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover6"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover6"
+        android:visibility="gone" />
+
+</ConstraintSet>
diff --git a/packages/SystemUI/res/xml/media_recommendation_expanded.xml b/packages/SystemUI/res/xml/media_recommendation_expanded.xml
new file mode 100644
index 0000000000000..04a4877f8660a
--- /dev/null
+++ b/packages/SystemUI/res/xml/media_recommendation_expanded.xml
@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2020 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
+  -->
+<ConstraintSet
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <Constraint
+        android:id="@+id/recommendation_card_icon"
+        android:layout_width="@dimen/qs_aa_media_rec_header_icon_size"
+        android:layout_height="@dimen/qs_aa_media_rec_header_icon_size"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_padding"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
+        app:layout_constraintHorizontal_bias="0" />
+
+    <Constraint
+        android:id="@+id/recommendation_card_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_padding"
+        app:layout_constraintTop_toBottomOf="@id/recommendation_card_icon"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
+        app:layout_constraintHorizontal_bias="0" />
+
+    <Constraint
+        android:id="@+id/media_cover1"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/media_cover4"
+        app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
+        app:layout_constraintEnd_toStartOf="@id/media_cover2"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo1"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover1"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover2"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/media_cover5"
+        app:layout_constraintStart_toEndOf="@id/media_cover1"
+        app:layout_constraintEnd_toStartOf="@id/media_cover3"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo2"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover2"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover2"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover3"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/media_cover6"
+        app:layout_constraintStart_toEndOf="@id/media_cover2"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintHorizontal_bias="1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo3"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover3"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover3"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover4"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        android:layout_marginBottom="@dimen/qs_media_padding"
+        app:layout_constraintTop_toBottomOf="@+id/media_cover1"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
+        app:layout_constraintEnd_toStartOf="@id/media_cover5"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintHorizontal_bias="1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo4"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover4"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover4"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover5"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        android:layout_marginBottom="@dimen/qs_media_padding"
+        app:layout_constraintTop_toBottomOf="@+id/media_cover2"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@+id/media_cover4"
+        app:layout_constraintEnd_toStartOf="@+id/media_cover6"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintHorizontal_bias="1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo5"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover5"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover5"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_cover6"
+        android:layout_width="@dimen/qs_aa_media_rec_album_size"
+        android:layout_height="@dimen/qs_aa_media_rec_album_size"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        android:layout_marginBottom="@dimen/qs_media_padding"
+        app:layout_constraintTop_toBottomOf="@id/media_cover3"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/media_cover5"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintHorizontal_bias="1"
+        android:visibility="gone" />
+
+    <Constraint
+        android:id="@+id/media_logo6"
+        android:layout_width="@dimen/qs_media_icon_size"
+        android:layout_height="@dimen/qs_media_icon_size"
+        android:translationY="@dimen/qs_media_icon_offset"
+        android:translationX="@dimen/qs_media_icon_offset"
+        app:layout_constraintEnd_toEndOf="@+id/media_cover6"
+        app:layout_constraintBottom_toBottomOf="@+id/media_cover6"
+        android:visibility="gone" />
+
+</ConstraintSet>
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaCarouselController.kt b/packages/SystemUI/src/com/android/systemui/media/MediaCarouselController.kt
index d87142f195dc0..8d9a4be30ab62 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaCarouselController.kt
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaCarouselController.kt
@@ -317,7 +317,7 @@ class MediaCarouselController @Inject constructor(
         val lp = LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
             ViewGroup.LayoutParams.WRAP_CONTENT)
         newRecs.recommendationViewHolder?.recommendations?.setLayoutParams(lp)
-        newRecs.bindRecommendation(data, bgColor)
+        newRecs.bindRecommendation(data, fgColor, bgColor)
         MediaPlayerData.addMediaPlayer(key, newRecs)
         updatePlayerToState(newRecs, noAnimation = true)
         reorderAllPlayers()
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
index 96ae2cd377402..c713b229670de 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
@@ -25,6 +25,7 @@ import android.content.Context;
 import android.content.Intent;
 import android.content.pm.PackageManager;
 import android.content.res.ColorStateList;
+import android.graphics.PorterDuff;
 import android.graphics.Rect;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.Icon;
@@ -67,9 +68,9 @@ import dagger.Lazy;
 public class MediaControlPanel {
     private static final String TAG = "MediaControlPanel";
     private static final float DISABLED_ALPHA = 0.38f;
-    private static final String EXTRAS_MEDIA_SOURCE_LOGO = "media_source_logo";
     private static final String EXTRAS_MEDIA_SOURCE_PACKAGE_NAME = "package_name";
-    private static final int MEDIA_RECOMMENDATION_MAX_NUM = 4;
+    private static final int MEDIA_RECOMMENDATION_ITEMS_PER_ROW = 3;
+    private static final int MEDIA_RECOMMENDATION_MAX_NUM = 6;
 
     private static final Intent SETTINGS_INTENT = new Intent(ACTION_MEDIA_CONTROLS_SETTINGS);
 
@@ -456,11 +457,17 @@ public class MediaControlPanel {
     }
 
     /** Bind this recommendation view based on the data given. */
-    public void bindRecommendation(@NonNull SmartspaceTarget target, @NonNull int backgroundColor) {
+    public void bindRecommendation(
+            @NonNull SmartspaceTarget target,
+            @NonNull int primaryColor,
+            @NonNull int backgroundColor) {
         if (mRecommendationViewHolder == null) {
             return;
         }
 
+        mRecommendationViewHolder.getCardIcon().setColorFilter(primaryColor);
+        mRecommendationViewHolder.getCardText().setTextColor(primaryColor);
+
         mRecommendationViewHolder.getRecommendations()
                 .setBackgroundTintList(ColorStateList.valueOf(backgroundColor));
         mBackgroundColor = backgroundColor;
@@ -506,6 +513,8 @@ public class MediaControlPanel {
             // Set up media source app's logo.
             ImageView mediaSourceLogoImageView = mediaLogoItems.get(i);
             mediaSourceLogoImageView.setImageDrawable(icon);
+            // TODO(b/186699032): Tint the app logo using the accent color.
+            mediaSourceLogoImageView.setColorFilter(backgroundColor, PorterDuff.Mode.XOR);
 
             // Set up media item cover.
             ImageView mediaCoverImageView = mediaCoverItems.get(i);
@@ -516,14 +525,17 @@ public class MediaControlPanel {
                     mediaCoverImageView,
                     recommendation,
                     target.getSmartspaceTargetId(),
-                    view -> mMediaDataManagerLazy
-                            .get()
-                            .dismissSmartspaceRecommendation(0L /* delay */));
+                    null);
 
+            if (i < MEDIA_RECOMMENDATION_ITEMS_PER_ROW) {
+                setVisibleAndAlpha(collapsedSet, mediaCoverItemsResIds.get(i), true);
+                setVisibleAndAlpha(collapsedSet, mediaLogoItemsResIds.get(i), true);
+            } else {
+                setVisibleAndAlpha(collapsedSet, mediaCoverItemsResIds.get(i), false);
+                setVisibleAndAlpha(collapsedSet, mediaLogoItemsResIds.get(i), false);
+            }
             setVisibleAndAlpha(expandedSet, mediaCoverItemsResIds.get(i), true);
             setVisibleAndAlpha(expandedSet, mediaLogoItemsResIds.get(i), true);
-            setVisibleAndAlpha(collapsedSet, mediaCoverItemsResIds.get(i), true);
-            setVisibleAndAlpha(collapsedSet, mediaLogoItemsResIds.get(i), true);
         }
 
         // Set up long press to show guts setting panel.
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaViewController.kt b/packages/SystemUI/src/com/android/systemui/media/MediaViewController.kt
index f78556f184922..50d6e12ecbc88 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaViewController.kt
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaViewController.kt
@@ -466,8 +466,8 @@ class MediaViewController @Inject constructor(
             collapsedLayout.load(context, R.xml.media_collapsed)
             expandedLayout.load(context, R.xml.media_expanded)
         } else {
-            collapsedLayout.load(context, R.xml.media_recommendation)
-            expandedLayout.load(context, R.xml.media_recommendation)
+            collapsedLayout.load(context, R.xml.media_recommendation_collapsed)
+            expandedLayout.load(context, R.xml.media_recommendation_expanded)
         }
         refreshState()
     }
diff --git a/packages/SystemUI/src/com/android/systemui/media/RecommendationViewHolder.kt b/packages/SystemUI/src/com/android/systemui/media/RecommendationViewHolder.kt
index 02150c4a85628..3d0e6533b33b9 100644
--- a/packages/SystemUI/src/com/android/systemui/media/RecommendationViewHolder.kt
+++ b/packages/SystemUI/src/com/android/systemui/media/RecommendationViewHolder.kt
@@ -20,6 +20,7 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
+import android.widget.TextView
 import androidx.annotation.IntegerRes
 import com.android.systemui.R
 import com.android.systemui.util.animation.TransitionLayout
@@ -30,26 +31,36 @@ class RecommendationViewHolder private constructor(itemView: View) {
     val recommendations = itemView as TransitionLayout
 
     // Recommendation screen
+    val cardIcon = itemView.requireViewById<ImageView>(R.id.recommendation_card_icon)
+    val cardText = itemView.requireViewById<TextView>(R.id.recommendation_card_text)
     val mediaCoverItems = listOf<ImageView>(
         itemView.requireViewById(R.id.media_cover1),
         itemView.requireViewById(R.id.media_cover2),
         itemView.requireViewById(R.id.media_cover3),
-        itemView.requireViewById(R.id.media_cover4))
+        itemView.requireViewById(R.id.media_cover4),
+        itemView.requireViewById(R.id.media_cover5),
+        itemView.requireViewById(R.id.media_cover6))
     val mediaLogoItems = listOf<ImageView>(
         itemView.requireViewById(R.id.media_logo1),
         itemView.requireViewById(R.id.media_logo2),
         itemView.requireViewById(R.id.media_logo3),
-        itemView.requireViewById(R.id.media_logo4))
+        itemView.requireViewById(R.id.media_logo4),
+        itemView.requireViewById(R.id.media_logo5),
+        itemView.requireViewById(R.id.media_logo6))
     val mediaCoverItemsResIds = listOf<@IntegerRes Int>(
         R.id.media_cover1,
         R.id.media_cover2,
         R.id.media_cover3,
-        R.id.media_cover4)
+        R.id.media_cover4,
+        R.id.media_cover5,
+        R.id.media_cover6)
     val mediaLogoItemsResIds = listOf<@IntegerRes Int>(
         R.id.media_logo1,
         R.id.media_logo2,
         R.id.media_logo3,
-        R.id.media_logo4)
+        R.id.media_logo4,
+        R.id.media_logo5,
+        R.id.media_logo6)
 
     // Settings/Guts screen
     val cancel = itemView.requireViewById<View>(R.id.cancel)
@@ -91,14 +102,20 @@ class RecommendationViewHolder private constructor(itemView: View) {
 
         // Res Ids for the control components on the recommendation view.
         val controlsIds = setOf(
+            R.id.recommendation_card_icon,
+            R.id.recommendation_card_text,
             R.id.media_cover1,
             R.id.media_cover2,
             R.id.media_cover3,
             R.id.media_cover4,
+            R.id.media_cover5,
+            R.id.media_cover6,
             R.id.media_logo1,
             R.id.media_logo2,
             R.id.media_logo3,
-            R.id.media_logo4
+            R.id.media_logo4,
+            R.id.media_logo5,
+            R.id.media_logo6
         )
 
         // Res Ids for the components on the guts panel.