Changing media to MotionLayout

Bug: 154137987
Change-Id: Ice66b2bd79a837832cf1ea9bc3920690ac263a5a
diff --git a/packages/SystemUI/res/drawable/qs_media_background.xml b/packages/SystemUI/res/drawable/qs_media_background.xml
index e79c9a4..80db3be 100644
--- a/packages/SystemUI/res/drawable/qs_media_background.xml
+++ b/packages/SystemUI/res/drawable/qs_media_background.xml
@@ -19,4 +19,4 @@
     systemui:rippleMinSize="30dp"
     systemui:rippleMaxSize="135dp"
     systemui:highlight="15"
-    systemui:cornerRadius="@dimen/qs_media_corner_radius" />
\ No newline at end of file
+    systemui:cornerRadius="?android:attr/dialogCornerRadius" />
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/qs_media_panel.xml b/packages/SystemUI/res/layout/qs_media_panel.xml
index d633ff4..2b30096 100644
--- a/packages/SystemUI/res/layout/qs_media_panel.xml
+++ b/packages/SystemUI/res/layout/qs_media_panel.xml
@@ -16,236 +16,155 @@
   -->
 
 <!-- Layout for media controls inside QSPanel carousel -->
-<LinearLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/qs_media_controls"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical"
-    android:gravity="center_horizontal|fill_vertical"
-    android:paddingTop="@dimen/qs_media_panel_outer_padding"
-    android:paddingBottom="@dimen/qs_media_panel_outer_padding"
+    android:layout_height="wrap_content"
     android:background="@drawable/qs_media_background"
-    >
+    android:gravity="center_horizontal|fill_vertical"
+    android:paddingBottom="@dimen/qs_media_panel_outer_padding"
+    app:layoutDescription="@xml/media_scene">
+
+    <FrameLayout
+        android:id="@+id/notification_media_progress_time"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:forceHasOverlappingRendering="false">
+        <!-- width is set to "match_parent" to avoid extra layout calls -->
+        <TextView
+            android:id="@+id/media_elapsed_time"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_alignParentLeft="true"
+            android:fontFamily="@*android:string/config_bodyFontFamily"
+            android:gravity="left"
+            android:textSize="14sp" />
+
+        <TextView
+            android:id="@+id/media_total_time"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_alignParentRight="true"
+            android:fontFamily="@*android:string/config_bodyFontFamily"
+            android:gravity="right"
+            android:textSize="14sp" />
+    </FrameLayout>
+
+    <ImageButton
+        android:id="@+id/action0"
+        style="@style/MediaPlayer.Button"
+        android:layout_width="48dp"
+        android:layout_height="48dp" />
+
+    <ImageButton
+        android:id="@+id/action1"
+        style="@style/MediaPlayer.Button"
+        android:layout_width="48dp"
+        android:layout_height="48dp" />
+
+    <ImageButton
+        android:id="@+id/action2"
+        style="@style/MediaPlayer.Button"
+        android:layout_width="52dp"
+        android:layout_height="52dp" />
+
+    <ImageButton
+        android:id="@+id/action3"
+        style="@style/MediaPlayer.Button"
+        android:layout_width="48dp"
+        android:layout_height="48dp" />
+
+    <ImageButton
+        android:id="@+id/action4"
+        style="@style/MediaPlayer.Button"
+        android:layout_width="48dp"
+        android:layout_height="48dp" />
+
+    <!-- Album Art -->
+    <ImageView
+        android:id="@+id/album_art"
+        android:layout_width="@dimen/qs_media_album_size"
+        android:layout_height="@dimen/qs_media_album_size" />
+
+    <!-- Seamless Output Switcher -->
+    <LinearLayout
+        android:id="@+id/media_seamless"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:background="@*android:drawable/media_seamless_background"
+        android:orientation="horizontal"
+        android:forceHasOverlappingRendering="false"
+        android:paddingLeft="12dp"
+        android:paddingTop="6dp"
+        android:paddingRight="12dp"
+        android:paddingBottom="6dp">
+
+        <ImageView
+            android:id="@+id/media_seamless_image"
+            android:layout_width="@dimen/qs_seamless_icon_size"
+            android:layout_height="@dimen/qs_seamless_icon_size"
+            android:layout_marginRight="8dp"
+            android:src="@*android:drawable/ic_media_seamless" />
+
+        <TextView
+            android:id="@+id/media_seamless_text"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:fontFamily="@*android:string/config_bodyFontFamily"
+            android:singleLine="true"
+            android:text="@*android:string/ext_media_seamless_action"
+            android:textSize="14sp" />
+    </LinearLayout>
+
+    <!-- Seek Bar -->
+    <SeekBar
+        android:id="@+id/media_progress_bar"
+        style="@android:style/Widget.ProgressBar.Horizontal"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:clickable="true"
+        android:maxHeight="3dp"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:splitTrack="false" />
+
+    <!-- App name -->
+    <TextView
+        android:id="@+id/app_name"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:singleLine="true"
+        android:textSize="14sp" />
+
+    <!-- Song name -->
+    <TextView
+        android:id="@+id/header_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:fontFamily="@*android:string/config_headlineFontFamilyMedium"
+        android:singleLine="true"
+        android:textSize="18sp" />
+
+    <!-- Artist name -->
+    <TextView
+        android:id="@+id/header_artist"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:fontFamily="@*android:string/config_bodyFontFamily"
+        android:singleLine="true"
+        android:textSize="14sp" />
+
+    <com.android.internal.widget.CachingIconView
+        android:id="@+id/icon"
+        android:layout_width="16dp"
+        android:layout_height="16dp" />
 
     <!-- Buttons to remove this view when no longer needed -->
     <include
         layout="@layout/qs_media_panel_options"
-        android:visibility="gone"/>
-
-    <LinearLayout
-        android:id="@+id/media_guts"
-        android:orientation="vertical"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent">
-        <!-- Header section -->
-        <LinearLayout
-            android:orientation="horizontal"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="@dimen/qs_media_panel_outer_padding"
-            android:paddingStart="@dimen/qs_media_panel_outer_padding"
-            android:paddingEnd="16dp"
-        >
-
-            <ImageView
-                android:id="@+id/album_art"
-                android:layout_width="@dimen/qs_media_album_size"
-                android:layout_height="@dimen/qs_media_album_size"
-                android:layout_marginRight="16dp"
-                android:layout_weight="0"
-            />
-
-            <LinearLayout
-                android:orientation="vertical"
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:layout_weight="1"
-            >
-                <LinearLayout
-                    android:orientation="horizontal"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:gravity="center"
-                >
-                    <com.android.internal.widget.CachingIconView
-                        android:id="@+id/icon"
-                        android:layout_width="16dp"
-                        android:layout_height="16dp"
-                        android:layout_marginEnd="5dp"
-                    />
-                    <TextView
-                        android:id="@+id/app_name"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:textSize="14sp"
-                        android:singleLine="true"
-                    />
-                </LinearLayout>
-
-                <!-- Song name -->
-                <TextView
-                    android:id="@+id/header_title"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:singleLine="true"
-                    android:fontFamily="@*android:string/config_headlineFontFamilyMedium"
-                    android:textSize="18sp"
-                    android:paddingBottom="6dp"
-                    android:gravity="center"/>
-
-                <!-- Artist name -->
-                <TextView
-                    android:id="@+id/header_artist"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:fontFamily="@*android:string/config_bodyFontFamily"
-                    android:textSize="14sp"
-                    android:singleLine="true"
-                />
-            </LinearLayout>
-
-            <!-- Output chip -->
-            <LinearLayout
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:orientation="horizontal"
-                android:visibility="gone"
-                android:paddingTop="6dp"
-                android:paddingBottom="6dp"
-                android:paddingLeft="12dp"
-                android:paddingRight="12dp"
-                android:gravity="center"
-                android:id="@+id/media_seamless"
-                android:background="@*android:drawable/media_seamless_background"
-                android:layout_weight="1"
-                android:forceHasOverlappingRendering="false"
-            >
-                <ImageView
-                    android:layout_width="@dimen/qs_seamless_icon_size"
-                    android:layout_height="@dimen/qs_seamless_icon_size"
-                    android:src="@*android:drawable/ic_media_seamless"
-                    android:layout_marginRight="8dp"
-                    android:id="@+id/media_seamless_image"
-                />
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:fontFamily="@*android:string/config_bodyFontFamily"
-                    android:text="@*android:string/ext_media_seamless_action"
-                    android:textSize="14sp"
-                    android:id="@+id/media_seamless_text"
-                    android:singleLine="true"
-                />
-            </LinearLayout>
-        </LinearLayout>
-
-        <!-- Seek Bar -->
-        <SeekBar
-            android:id="@+id/media_progress_bar"
-            style="@android:style/Widget.ProgressBar.Horizontal"
-            android:clickable="true"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:maxHeight="3dp"
-            android:paddingTop="24dp"
-            android:paddingBottom="24dp"
-            android:layout_marginBottom="-24dp"
-            android:layout_marginTop="-24dp"
-            android:splitTrack="false"
-        />
-
-        <FrameLayout
-            android:id="@+id/notification_media_progress_time"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:paddingStart="@dimen/qs_media_panel_outer_padding"
-            android:paddingEnd="@dimen/qs_media_panel_outer_padding"
-            android:layout_marginBottom="10dp"
-            android:layout_gravity="center"
-            >
-            <!-- width is set to "match_parent" to avoid extra layout calls -->
-            <TextView
-                android:id="@+id/media_elapsed_time"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_alignParentLeft="true"
-                android:fontFamily="@*android:string/config_bodyFontFamily"
-                android:textSize="14sp"
-                android:gravity="left"
-            />
-            <TextView
-                android:id="@+id/media_total_time"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:fontFamily="@*android:string/config_bodyFontFamily"
-                android:layout_alignParentRight="true"
-                android:textSize="14sp"
-                android:gravity="right"
-            />
-        </FrameLayout>
-
-        <!-- Controls -->
-        <LinearLayout
-            android:id="@+id/media_actions"
-            android:orientation="horizontal"
-            android:layoutDirection="ltr"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:paddingStart="@dimen/qs_media_panel_outer_padding"
-            android:paddingEnd="@dimen/qs_media_panel_outer_padding"
-            android:gravity="center"
-            >
-            <ImageButton
-                style="@style/MediaPlayer.Button"
-                android:layout_width="48dp"
-                android:layout_height="48dp"
-                android:layout_marginStart="8dp"
-                android:layout_marginEnd="8dp"
-                android:gravity="center"
-                android:visibility="gone"
-                android:id="@+id/action0"
-            />
-            <ImageButton
-                style="@style/MediaPlayer.Button"
-                android:layout_width="48dp"
-                android:layout_height="48dp"
-                android:layout_marginStart="8dp"
-                android:layout_marginEnd="8dp"
-                android:gravity="center"
-                android:visibility="gone"
-                android:id="@+id/action1"
-            />
-            <ImageButton
-                style="@style/MediaPlayer.Button"
-                android:layout_width="52dp"
-                android:layout_height="52dp"
-                android:layout_marginStart="8dp"
-                android:layout_marginEnd="8dp"
-                android:gravity="center"
-                android:visibility="gone"
-                android:id="@+id/action2"
-            />
-            <ImageButton
-                style="@style/MediaPlayer.Button"
-                android:layout_width="48dp"
-                android:layout_height="48dp"
-                android:layout_marginStart="8dp"
-                android:layout_marginEnd="8dp"
-                android:gravity="center"
-                android:visibility="gone"
-                android:id="@+id/action3"
-            />
-            <ImageButton
-                style="@style/MediaPlayer.Button"
-                android:layout_width="48dp"
-                android:layout_height="48dp"
-                android:layout_marginStart="8dp"
-                android:layout_marginEnd="8dp"
-                android:gravity="center"
-                android:visibility="gone"
-                android:id="@+id/action4"
-            />
-        </LinearLayout>
-    </LinearLayout>
-</LinearLayout>
+        android:visibility="gone"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+</androidx.constraintlayout.motion.widget.MotionLayout>
diff --git a/packages/SystemUI/res/values/dimens.xml b/packages/SystemUI/res/values/dimens.xml
index 2cbb498..cce4195 100644
--- a/packages/SystemUI/res/values/dimens.xml
+++ b/packages/SystemUI/res/values/dimens.xml
@@ -1232,7 +1232,7 @@
     <dimen name="qs_media_padding">8dp</dimen>
     <dimen name="qs_media_panel_outer_padding">16dp</dimen>
     <dimen name="qs_media_corner_radius">10dp</dimen>
-    <dimen name="qs_media_album_size">72dp</dimen>
+    <dimen name="qs_media_album_size">52dp</dimen>
     <dimen name="qs_seamless_icon_size">20dp</dimen>
     <dimen name="qqs_media_spacing">8dp</dimen>
 
diff --git a/packages/SystemUI/res/xml/media_scene.xml b/packages/SystemUI/res/xml/media_scene.xml
new file mode 100644
index 0000000..c625fbc
--- /dev/null
+++ b/packages/SystemUI/res/xml/media_scene.xml
@@ -0,0 +1,312 @@
+<?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
+  -->
+<MotionScene
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <Transition
+        app:constraintSetStart="@id/collapsed"
+        app:constraintSetEnd="@id/expanded"
+        app:duration="1000" />
+
+    <ConstraintSet android:id="@+id/expanded">
+        <Constraint
+            android:id="@+id/icon"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="18dp"
+            android:layout_marginTop="22dp"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            />
+
+        <Constraint
+            android:id="@+id/app_name"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="10dp"
+            android:layout_marginStart="10dp"
+            android:layout_marginTop="20dp"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toEndOf="@id/icon"
+            app:layout_constraintEnd_toStartOf="@id/media_seamless"
+            app:layout_constraintHorizontal_bias="0"
+            />
+
+        <Constraint
+            android:id="@+id/media_seamless"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_min="60dp"
+            android:layout_marginTop="@dimen/qs_media_panel_outer_padding"
+            android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"
+            />
+
+        <Constraint
+            android:id="@+id/album_art"
+            android:layout_width="@dimen/qs_media_album_size"
+            android:layout_height="@dimen/qs_media_album_size"
+            android:layout_marginTop="16dp"
+            android:layout_marginStart="@dimen/qs_media_panel_outer_padding"
+            app:layout_constraintTop_toBottomOf="@id/icon"
+            app:layout_constraintStart_toStartOf="parent"
+            />
+
+        <!-- Song name -->
+        <Constraint
+            android:id="@+id/header_title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"
+            android:layout_marginTop="3dp"
+            android:layout_marginStart="16dp"
+            app:layout_constraintTop_toTopOf="@id/album_art"
+            app:layout_constraintStart_toEndOf="@id/album_art"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"/>
+
+        <!-- Artist name -->
+        <Constraint
+            android:id="@+id/header_artist"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"
+            android:layout_marginTop="3dp"
+            app:layout_constraintTop_toBottomOf="@id/header_title"
+            app:layout_constraintStart_toStartOf="@id/header_title"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"/>
+
+        <!-- Seek Bar -->
+        <Constraint
+            android:id="@+id/media_progress_bar"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            app:layout_constraintTop_toBottomOf="@id/album_art"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            />
+
+        <Constraint
+            android:id="@+id/notification_media_progress_time"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="35dp"
+            android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"
+            android:layout_marginStart="@dimen/qs_media_panel_outer_padding"
+            app:layout_constraintTop_toBottomOf="@id/album_art"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            />
+
+        <Constraint
+            android:id="@+id/action0"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:layout_marginTop="5dp"
+            android:layout_marginStart="@dimen/qs_media_panel_outer_padding"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toLeftOf="@id/action1"
+            app:layout_constraintTop_toBottomOf="@id/notification_media_progress_time" >
+        </Constraint>
+
+        <Constraint
+            android:id="@+id/action1"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            app:layout_constraintLeft_toRightOf="@id/action0"
+            app:layout_constraintRight_toLeftOf="@id/action2"
+            app:layout_constraintTop_toTopOf="@id/action0" >
+        </Constraint>
+
+        <Constraint
+            android:id="@+id/action2"
+            android:layout_width="52dp"
+            android:layout_height="52dp"
+            app:layout_constraintLeft_toRightOf="@id/action1"
+            app:layout_constraintRight_toLeftOf="@id/action3"
+            app:layout_constraintTop_toTopOf="@id/action0" >
+        </Constraint>
+
+        <Constraint
+            android:id="@+id/action3"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            app:layout_constraintLeft_toRightOf="@id/action2"
+            app:layout_constraintRight_toLeftOf="@id/action4"
+            app:layout_constraintTop_toTopOf="@id/action0" >
+        </Constraint>
+
+        <Constraint
+            android:id="@+id/action4"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"
+            app:layout_constraintLeft_toRightOf="@id/action3"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="@id/action0" >
+        </Constraint>
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/collapsed">
+        <Constraint
+            android:id="@+id/icon"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            android:layout_marginStart="18dp"
+            android:layout_marginTop="22dp"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            />
+
+        <Constraint
+            android:id="@+id/app_name"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="10dp"
+            android:layout_marginStart="10dp"
+            android:layout_marginTop="20dp"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toEndOf="@id/icon"
+            app:layout_constraintEnd_toStartOf="@id/media_seamless"
+            app:layout_constraintHorizontal_bias="0"
+            />
+
+        <Constraint
+            android:id="@+id/media_seamless"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_min="60dp"
+            android:layout_marginTop="@dimen/qs_media_panel_outer_padding"
+            android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"
+            />
+
+        <Constraint
+            android:id="@+id/album_art"
+            android:layout_width="@dimen/qs_media_album_size"
+            android:layout_height="@dimen/qs_media_album_size"
+            android:layout_marginTop="16dp"
+            android:layout_marginStart="@dimen/qs_media_panel_outer_padding"
+            app:layout_constraintTop_toBottomOf="@id/icon"
+            app:layout_constraintStart_toStartOf="parent"
+            />
+
+        <!-- Song name -->
+        <Constraint
+            android:id="@+id/header_title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="3dp"
+            android:layout_marginStart="16dp"
+            app:layout_constraintTop_toTopOf="@id/album_art"
+            app:layout_constraintStart_toEndOf="@id/album_art"
+            app:layout_constraintEnd_toStartOf="@id/action0"
+            app:layout_constraintHorizontal_bias="0"/>
+
+        <!-- Artist name -->
+        <Constraint
+            android:id="@+id/header_artist"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="3dp"
+            app:layout_constraintTop_toBottomOf="@id/header_title"
+            app:layout_constraintStart_toStartOf="@id/header_title"
+            app:layout_constraintEnd_toStartOf="@id/action0"
+            app:layout_constraintHorizontal_bias="0"/>
+
+        <!-- Seek Bar -->
+        <Constraint
+            android:id="@+id/media_progress_bar"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            app:layout_constraintTop_toBottomOf="@id/album_art"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            android:visibility="gone"
+            />
+
+        <Constraint
+            android:id="@+id/notification_media_progress_time"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="35dp"
+            android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"
+            android:layout_marginStart="@dimen/qs_media_panel_outer_padding"
+            app:layout_constraintTop_toBottomOf="@id/album_art"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            android:visibility="gone"
+            />
+
+        <Constraint
+            android:id="@+id/action0"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:layout_marginTop="5dp"
+            android:layout_marginStart="4dp"
+            android:visibility="gone"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintLeft_toRightOf="@id/header_title"
+            app:layout_constraintRight_toLeftOf="@id/action1"
+            app:layout_constraintTop_toTopOf="@id/album_art">
+        </Constraint>
+
+        <Constraint
+            android:id="@+id/action1"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintLeft_toRightOf="@id/action0"
+            app:layout_constraintRight_toLeftOf="@id/action2"
+            app:layout_constraintTop_toTopOf="@id/action0" >
+        </Constraint>
+
+        <Constraint
+            android:id="@+id/action2"
+            android:layout_width="52dp"
+            android:layout_height="52dp"
+            app:layout_constraintLeft_toRightOf="@id/action1"
+            app:layout_constraintRight_toLeftOf="@id/action3"
+            app:layout_constraintTop_toTopOf="@id/action0" >
+        </Constraint>
+
+        <Constraint
+            android:id="@+id/action3"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            app:layout_constraintLeft_toRightOf="@id/action2"
+            app:layout_constraintRight_toLeftOf="@id/action4"
+            app:layout_constraintTop_toTopOf="@id/action0" >
+        </Constraint>
+
+        <Constraint
+            android:id="@+id/action4"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:layout_marginRight="@dimen/qs_media_panel_outer_padding"
+            android:visibility="gone"
+            app:layout_constraintLeft_toRightOf="@id/action3"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="@id/action0" >
+        </Constraint>
+    </ConstraintSet>
+</MotionScene>
diff --git a/packages/SystemUI/src/com/android/systemui/media/IlluminationDrawable.kt b/packages/SystemUI/src/com/android/systemui/media/IlluminationDrawable.kt
index 9374727..7432165 100644
--- a/packages/SystemUI/src/com/android/systemui/media/IlluminationDrawable.kt
+++ b/packages/SystemUI/src/com/android/systemui/media/IlluminationDrawable.kt
@@ -6,6 +6,7 @@
 import android.animation.ValueAnimator
 import android.content.res.ColorStateList
 import android.content.res.Resources
+import android.content.res.TypedArray
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.ColorFilter
@@ -49,6 +50,7 @@
 @Keep
 class IlluminationDrawable : Drawable() {
 
+    private var themeAttrs: IntArray? = null
     private var cornerRadius = 0f
     private var highlightColor = Color.TRANSPARENT
     private val rippleData = RippleData(0f, 0f, 0f, 0f, 0f, 0f, 0f)
@@ -139,13 +141,41 @@
         theme: Resources.Theme?
     ) {
         val a = obtainAttributes(r, theme, attrs, R.styleable.IlluminationDrawable)
-        cornerRadius = a.getDimension(R.styleable.IlluminationDrawable_cornerRadius, cornerRadius)
-        rippleData.minSize = a.getDimension(R.styleable.IlluminationDrawable_rippleMinSize, 0f)
-        rippleData.maxSize = a.getDimension(R.styleable.IlluminationDrawable_rippleMaxSize, 0f)
-        rippleData.highlight = a.getInteger(R.styleable.IlluminationDrawable_highlight, 0) / 100f
+        themeAttrs = a.extractThemeAttrs()
+        updateStateFromTypedArray(a)
         a.recycle()
     }
 
+    private fun updateStateFromTypedArray(a: TypedArray) {
+        if (a.hasValue(R.styleable.IlluminationDrawable_cornerRadius)) {
+            cornerRadius = a.getDimension(R.styleable.IlluminationDrawable_cornerRadius,
+                    cornerRadius)
+        }
+        if (a.hasValue(R.styleable.IlluminationDrawable_rippleMinSize)) {
+            rippleData.minSize = a.getDimension(R.styleable.IlluminationDrawable_rippleMinSize, 0f)
+        }
+        if (a.hasValue(R.styleable.IlluminationDrawable_rippleMaxSize)) {
+            rippleData.maxSize = a.getDimension(R.styleable.IlluminationDrawable_rippleMaxSize, 0f)
+        }
+        if (a.hasValue(R.styleable.IlluminationDrawable_highlight)) {
+            rippleData.highlight = a.getInteger(R.styleable.IlluminationDrawable_highlight, 0) /
+                    100f
+        }
+    }
+
+    override fun canApplyTheme(): Boolean {
+        return themeAttrs != null && themeAttrs!!.size > 0 || super.canApplyTheme()
+    }
+
+    override fun applyTheme(t: Resources.Theme) {
+        super.applyTheme(t)
+        themeAttrs?.let {
+            val a = t.resolveAttributes(it, R.styleable.IlluminationDrawable)
+            updateStateFromTypedArray(a)
+            a.recycle()
+        }
+    }
+
     override fun setColorFilter(p0: ColorFilter?) {
         throw UnsupportedOperationException("Color filters are not supported")
     }
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
index 557132b..9adfe7d 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
@@ -53,6 +53,7 @@
 import android.widget.TextView;
 
 import androidx.annotation.Nullable;
+import androidx.constraintlayout.motion.widget.MotionLayout;
 import androidx.core.graphics.drawable.RoundedBitmapDrawable;
 import androidx.core.graphics.drawable.RoundedBitmapDrawableFactory;
 
@@ -70,7 +71,7 @@
 import java.util.concurrent.Executor;
 
 /**
- * Base media control panel for System UI
+ * A view controller used for Media Playback.
  */
 public class MediaControlPanel {
     private static final String TAG = "MediaControlPanel";
@@ -80,7 +81,7 @@
     private final ActivityStarter mActivityStarter;
 
     private Context mContext;
-    protected LinearLayout mMediaNotifView;
+    protected MotionLayout mMediaNotifView;
     private View mSeamless;
     private MediaSession.Token mToken;
     private MediaController mController;
@@ -187,7 +188,7 @@
             ActivityStarter activityStarter) {
         mContext = context;
         LayoutInflater inflater = LayoutInflater.from(mContext);
-        mMediaNotifView = (LinearLayout) inflater.inflate(layoutId, parent, false);
+        mMediaNotifView = (MotionLayout) inflater.inflate(layoutId, parent, false);
         // TODO(b/150854549): removeOnAttachStateChangeListener when this doesn't inflate views
         // mStateListener shouldn't need to be unregistered since this object shares the same
         // lifecycle with the inflated view. It would be better, however, if this controller used an
diff --git a/packages/SystemUI/src/com/android/systemui/qs/QSMediaPlayer.java b/packages/SystemUI/src/com/android/systemui/qs/QSMediaPlayer.java
index 174441b..0571c68 100644
--- a/packages/SystemUI/src/com/android/systemui/qs/QSMediaPlayer.java
+++ b/packages/SystemUI/src/com/android/systemui/qs/QSMediaPlayer.java
@@ -37,7 +37,9 @@
 import android.widget.SeekBar;
 import android.widget.TextView;
 
+import androidx.constraintlayout.widget.ConstraintSet;
 import com.android.settingslib.media.LocalMediaManager;
+import com.android.internal.widget.MediaNotificationView;
 import com.android.systemui.R;
 import com.android.systemui.media.IlluminationDrawable;
 import com.android.systemui.media.MediaControlPanel;
@@ -169,7 +171,7 @@
 
         super.setMediaSession(token, icon, largeIcon, iconColor, bgColor, contentIntent, appName,
                 key);
-
+        ConstraintSet constraintSet = mMediaNotifView.getConstraintSet(R.id.expanded);
         // Media controls
         if (actionsContainer != null) {
             LinearLayout parentActionsLayout = (LinearLayout) actionsContainer;
@@ -179,7 +181,7 @@
                 ImageButton thatBtn = parentActionsLayout.findViewById(NOTIF_ACTION_IDS[i]);
                 if (thatBtn == null || thatBtn.getDrawable() == null
                         || thatBtn.getVisibility() != View.VISIBLE) {
-                    thisBtn.setVisibility(View.GONE);
+                    constraintSet.setVisibility(QS_ACTION_IDS[i], ConstraintSet.GONE);
                     continue;
                 }
 
@@ -190,7 +192,7 @@
 
                 Drawable thatIcon = thatBtn.getDrawable();
                 thisBtn.setImageDrawable(thatIcon.mutate());
-                thisBtn.setVisibility(View.VISIBLE);
+                constraintSet.setVisibility(QS_ACTION_IDS[i], ConstraintSet.VISIBLE);
                 thisBtn.setOnClickListener(v -> {
                     Log.d(TAG, "clicking on other button");
                     thatBtn.performClick();
@@ -199,8 +201,7 @@
 
             // Hide any unused buttons
             for (; i < QS_ACTION_IDS.length; i++) {
-                ImageButton thisBtn = mMediaNotifView.findViewById(QS_ACTION_IDS[i]);
-                thisBtn.setVisibility(View.GONE);
+                constraintSet.setVisibility(QS_ACTION_IDS[i], ConstraintSet.GONE);
             }
         }
 
@@ -214,41 +215,19 @@
 
     private void initLongPressMenu(int iconColor) {
         // Set up long press menu
-        View guts = mMediaNotifView.findViewById(R.id.media_guts);
-        View options = mMediaNotifView.findViewById(R.id.qs_media_controls_options);
-        options.setMinimumHeight(guts.getHeight());
-
-        View clearView = options.findViewById(R.id.remove);
-        clearView.setOnClickListener(b -> {
-            removePlayer();
-        });
-        ImageView removeIcon = options.findViewById(R.id.remove_icon);
-        removeIcon.setImageTintList(ColorStateList.valueOf(iconColor));
-        TextView removeText = options.findViewById(R.id.remove_text);
-        removeText.setTextColor(iconColor);
-
-        TextView cancelView = options.findViewById(R.id.cancel);
-        cancelView.setTextColor(iconColor);
-        cancelView.setOnClickListener(b -> {
-            options.setVisibility(View.GONE);
-            guts.setVisibility(View.VISIBLE);
-        });
-        // ... but don't enable it yet, and make sure is reset when the session is updated
-        mMediaNotifView.setOnLongClickListener(null);
-        options.setVisibility(View.GONE);
-        guts.setVisibility(View.VISIBLE);
+        // TODO: b/156036025 bring back media guts
     }
 
     @Override
     protected void resetButtons() {
         super.resetButtons();
         mSeekBarViewModel.clearController();
-        View guts = mMediaNotifView.findViewById(R.id.media_guts);
+//        View guts = mMediaNotifView.findViewById(R.id.media_guts);
         View options = mMediaNotifView.findViewById(R.id.qs_media_controls_options);
 
         mMediaNotifView.setOnLongClickListener(v -> {
             // Replace player view with close/cancel view
-            guts.setVisibility(View.GONE);
+            // TODO: b/156036025 make this work
             options.setVisibility(View.VISIBLE);
             return true; // consumed click
         });
diff --git a/packages/SystemUI/src/com/android/systemui/qs/QuickQSMediaPlayer.java b/packages/SystemUI/src/com/android/systemui/qs/QuickQSMediaPlayer.java
index 5cb75e6..7b53eed 100644
--- a/packages/SystemUI/src/com/android/systemui/qs/QuickQSMediaPlayer.java
+++ b/packages/SystemUI/src/com/android/systemui/qs/QuickQSMediaPlayer.java
@@ -54,7 +54,7 @@
      */
     public QuickQSMediaPlayer(Context context, ViewGroup parent, Executor foregroundExecutor,
             Executor backgroundExecutor, ActivityStarter activityStarter) {
-        super(context, parent, null, R.layout.qqs_media_panel, QQS_ACTION_IDS,
+        super(context, parent, null, R.layout.qs_media_panel, QQS_ACTION_IDS,
                 foregroundExecutor, backgroundExecutor, activityStarter);
     }