diff --git a/packages/SystemUI/res/layout/media_smartspace_recommendations.xml b/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
index 1c4c89fb254af..85354266f2288 100644
--- a/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
+++ b/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
@@ -37,7 +37,14 @@
         android:orientation="vertical"
         app:layout_constraintGuide_percent="0.25" />
 
-    <ImageView
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/media_horizontal_center_guideline"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.5" />
+
+    <com.android.internal.widget.CachingIconView
         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"
diff --git a/packages/SystemUI/res/values/dimens.xml b/packages/SystemUI/res/values/dimens.xml
index 13c285f12393b..edd8486379a20 100644
--- a/packages/SystemUI/res/values/dimens.xml
+++ b/packages/SystemUI/res/values/dimens.xml
@@ -1279,9 +1279,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_header_icon_padding">10dp</dimen>
+    <dimen name="qs_aa_media_rec_header_icon_start_margin">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="qs_aa_media_rec_album_vertical_margin">8dp</dimen>
     <dimen name="qq_aa_media_rec_header_text_size">16sp</dimen>
 
     <!-- Window magnification -->
diff --git a/packages/SystemUI/res/xml/media_recommendation_collapsed.xml b/packages/SystemUI/res/xml/media_recommendation_collapsed.xml
index afd800b106c3d..31a924cf48927 100644
--- a/packages/SystemUI/res/xml/media_recommendation_collapsed.xml
+++ b/packages/SystemUI/res/xml/media_recommendation_collapsed.xml
@@ -22,8 +22,8 @@
         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"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_start_margin"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
@@ -33,7 +33,7 @@
         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"
+        android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_start_margin"
         app:layout_constraintTop_toBottomOf="@id/recommendation_card_icon"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
@@ -45,9 +45,12 @@
         android:layout_height="@dimen/qs_aa_media_rec_album_size"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
+        android:layout_marginTop="@dimen/qs_media_padding"
+        android:layout_marginBottom="@dimen/qs_media_padding"
         app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
         app:layout_constraintEnd_toStartOf="@id/media_cover2"
         app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintVertical_chainStyle="spread"
         android:visibility="gone" />
 
     <Constraint
@@ -64,6 +67,8 @@
         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"
+        android:layout_marginBottom="@dimen/qs_media_padding"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@id/media_cover1"
@@ -85,6 +90,8 @@
         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"
+        android:layout_marginBottom="@dimen/qs_media_padding"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@id/media_cover2"
@@ -112,7 +119,6 @@
         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
@@ -134,7 +140,6 @@
         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
diff --git a/packages/SystemUI/res/xml/media_recommendation_expanded.xml b/packages/SystemUI/res/xml/media_recommendation_expanded.xml
index 04a4877f8660a..1411030a74313 100644
--- a/packages/SystemUI/res/xml/media_recommendation_expanded.xml
+++ b/packages/SystemUI/res/xml/media_recommendation_expanded.xml
@@ -23,7 +23,7 @@
         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"
+        android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_start_margin"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
@@ -33,7 +33,7 @@
         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"
+        android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_start_margin"
         app:layout_constraintTop_toBottomOf="@id/recommendation_card_icon"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
@@ -44,11 +44,14 @@
         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_aa_media_rec_album_vertical_margin"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/media_cover4"
+        app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
         app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
         app:layout_constraintEnd_toStartOf="@id/media_cover2"
         app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintVertical_chainStyle="spread"
+        app:layout_constraintVertical_bias="0"
         android:visibility="gone" />
 
     <Constraint
@@ -66,11 +69,14 @@
         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_aa_media_rec_album_vertical_margin"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/media_cover5"
+        app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
         app:layout_constraintStart_toEndOf="@id/media_cover1"
         app:layout_constraintEnd_toStartOf="@id/media_cover3"
         app:layout_constraintHorizontal_chainStyle="spread"
+        app:layout_constraintVertical_chainStyle="spread"
+        app:layout_constraintVertical_bias="0"
         android:visibility="gone" />
 
     <Constraint
@@ -88,12 +94,15 @@
         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_aa_media_rec_album_vertical_margin"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/media_cover6"
+        app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
         app:layout_constraintStart_toEndOf="@id/media_cover2"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_chainStyle="spread"
         app:layout_constraintHorizontal_bias="1"
+        app:layout_constraintVertical_chainStyle="spread"
+        app:layout_constraintVertical_bias="0"
         android:visibility="gone" />
 
     <Constraint
@@ -110,14 +119,15 @@
         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_marginTop="@dimen/qs_aa_media_rec_album_vertical_margin"
         android:layout_marginBottom="@dimen/qs_media_padding"
-        app:layout_constraintTop_toBottomOf="@+id/media_cover1"
+        app:layout_constraintTop_toBottomOf="@+id/media_horizontal_center_guideline"
         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"
+        app:layout_constraintVertical_chainStyle="spread"
+        app:layout_constraintVertical_bias="1"
         android:visibility="gone" />
 
     <Constraint
@@ -134,14 +144,15 @@
         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_marginTop="@dimen/qs_aa_media_rec_album_vertical_margin"
         android:layout_marginBottom="@dimen/qs_media_padding"
-        app:layout_constraintTop_toBottomOf="@+id/media_cover2"
+        app:layout_constraintTop_toBottomOf="@+id/media_horizontal_center_guideline"
         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"
+        app:layout_constraintVertical_chainStyle="spread"
+        app:layout_constraintVertical_bias="1"
         android:visibility="gone" />
 
     <Constraint
@@ -158,14 +169,16 @@
         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_marginTop="@dimen/qs_aa_media_rec_album_vertical_margin"
         android:layout_marginBottom="@dimen/qs_media_padding"
-        app:layout_constraintTop_toBottomOf="@id/media_cover3"
+        app:layout_constraintTop_toBottomOf="@id/media_horizontal_center_guideline"
         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"
+        app:layout_constraintVertical_chainStyle="spread"
+        app:layout_constraintVertical_bias="1"
         android:visibility="gone" />
 
     <Constraint
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
index c713b229670de..085b2a66f4bc9 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
@@ -486,8 +486,10 @@ public class MediaControlPanel {
         ConstraintSet collapsedSet = mMediaViewController.getCollapsedLayout();
         int mediaRecommendationNum = Math.min(mediaRecommendationList.size(),
                 MEDIA_RECOMMENDATION_MAX_NUM);
-        for (int i = 0; i < mediaRecommendationNum; i++) {
-            SmartspaceAction recommendation = mediaRecommendationList.get(i);
+        for (int itemIndex = 0, uiComponentIndex = 0;
+                itemIndex < mediaRecommendationNum && uiComponentIndex < mediaRecommendationNum;
+                itemIndex++) {
+            SmartspaceAction recommendation = mediaRecommendationList.get(itemIndex);
             if (recommendation.getIcon() == null) {
                 Log.w(TAG, "No media cover is provided. Skipping this item...");
                 continue;
@@ -511,13 +513,13 @@ public class MediaControlPanel {
             }
 
             // Set up media source app's logo.
-            ImageView mediaSourceLogoImageView = mediaLogoItems.get(i);
+            ImageView mediaSourceLogoImageView = mediaLogoItems.get(uiComponentIndex);
             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);
+            ImageView mediaCoverImageView = mediaCoverItems.get(uiComponentIndex);
             mediaCoverImageView.setImageIcon(recommendation.getIcon());
 
             // Set up the click listener if applicable.
@@ -527,15 +529,23 @@ public class MediaControlPanel {
                     target.getSmartspaceTargetId(),
                     null);
 
-            if (i < MEDIA_RECOMMENDATION_ITEMS_PER_ROW) {
-                setVisibleAndAlpha(collapsedSet, mediaCoverItemsResIds.get(i), true);
-                setVisibleAndAlpha(collapsedSet, mediaLogoItemsResIds.get(i), true);
+            if (uiComponentIndex < MEDIA_RECOMMENDATION_ITEMS_PER_ROW) {
+                setVisibleAndAlpha(collapsedSet,
+                        mediaCoverItemsResIds.get(uiComponentIndex), true);
+                setVisibleAndAlpha(collapsedSet,
+                        mediaLogoItemsResIds.get(uiComponentIndex), true);
             } else {
-                setVisibleAndAlpha(collapsedSet, mediaCoverItemsResIds.get(i), false);
-                setVisibleAndAlpha(collapsedSet, mediaLogoItemsResIds.get(i), false);
+                setVisibleAndAlpha(collapsedSet,
+                        mediaCoverItemsResIds.get(uiComponentIndex), false);
+                setVisibleAndAlpha(collapsedSet,
+                        mediaLogoItemsResIds.get(uiComponentIndex), false);
             }
-            setVisibleAndAlpha(expandedSet, mediaCoverItemsResIds.get(i), true);
-            setVisibleAndAlpha(expandedSet, mediaLogoItemsResIds.get(i), true);
+            setVisibleAndAlpha(expandedSet,
+                    mediaCoverItemsResIds.get(uiComponentIndex), true);
+            setVisibleAndAlpha(expandedSet,
+                    mediaLogoItemsResIds.get(uiComponentIndex), true);
+
+            uiComponentIndex++;
         }
 
         // Set up long press to show guts setting panel.