Initial implementation of new media template design using shared elements

from car-media-common library.

Bug: 76101106
Test: They will be added in b/77243935
Change-Id: I3d82871bb83e1451d88bddc4f5f91583d2ad8a9e

5 files changed, 151 insertions, 1 deletions

diff --git a/res/layout/fragment_playback.xml b/res/layout/fragment_playback.xml
new file mode 100644
index 0000000..09ce12d
--- /dev/null
+++ b/res/layout/fragment_playback.xml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/playback_container"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <com.android.car.media.CrossfadeImageView
+        android:id="@+id/album_background"
+        android:background="@color/car_dark_blue_grey_800"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scaleType="centerCrop" />
+
+    <View
+        android:id="@+id/playback_scrim"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="@color/car_dark_blue_grey_900"
+        android:alpha="@dimen/playback_initial_scrim_alpha"/>
+
+    <View
+        android:id="@+id/playback_scrim_bottom"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1"
+        android:background="@drawable/car_playback_bottom_scrim"
+        app:layout_constraintTop_toTopOf="@+id/playback_controls"
+        app:layout_constraintBottom_toBottomOf="@+id/playback_controls"/>
+
+    <View
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:background="@android:color/black"
+        app:layout_constraintTop_toBottomOf="@+id/playback_controls"
+        app:layout_constraintBottom_toBottomOf="parent"/>
+
+    <FrameLayout
+        android:id="@+id/metadata_container"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/car_app_bar_height"
+        android:fitsSystemWindows="true"
+        android:layout_marginLeft="@dimen/car_margin"
+        android:layout_marginRight="@dimen/car_margin"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <include layout="@layout/view_metadata"/>
+
+    </FrameLayout>
+
+    <com.android.car.media.common.PlaybackControls
+        android:id="@+id/playback_controls"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingTop="@dimen/playback_controls_margin"
+        android:paddingBottom="@dimen/playback_controls_margin"
+        android:layout_marginLeft="@dimen/car_margin"
+        android:layout_marginRight="@dimen/car_margin"
+        app:columns="5"
+        app:layout_constraintTop_toBottomOf="@+id/metadata_container"/>
+
+    <androidx.car.widget.PagedListView
+        android:id="@+id/browse_list"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1"
+        app:showPagedListViewDivider="true"
+        app:listDividerColor="@color/car_list_divider_inverse"
+        app:layout_behavior="@string/appbar_scrolling_view_behavior"
+        app:dividerStartMargin="@dimen/car_keyline_1"
+        app:dividerEndMargin="@dimen/car_keyline_1"
+        app:layout_constraintTop_toBottomOf="@+id/playback_controls"
+        app:layout_constraintBottom_toBottomOf="parent"/>
+
+</android.support.constraint.ConstraintLayout>
diff --git a/res/layout/view_metadata.xml b/res/layout/view_metadata.xml
new file mode 100644
index 0000000..17bb7aa
--- /dev/null
+++ b/res/layout/view_metadata.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/metadata"
+    android:orientation="horizontal"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="@dimen/car_keyline_2"
+    android:layout_marginBottom="@dimen/car_keyline_2"
+    android:gravity="center"
+    android:layout_centerVertical="true">
+
+    <ImageView
+        android:id="@+id/album_art"
+        android:contentDescription="@string/album_art"
+        android:layout_marginStart="@dimen/car_keyline_1"
+        android:layout_marginEnd="@dimen/car_keyline_1"
+        android:layout_width="200dp"
+        android:layout_height="190dp"
+        android:scaleType="centerCrop"
+        android:transitionName="@string/album_art"/>
+
+    <LinearLayout
+        android:orientation="vertical"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginEnd="@dimen/car_keyline_1"
+        android:layout_weight="1"
+        android:focusable="false">
+
+        <TextView
+            android:id="@+id/title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.Car.Body1.Light"
+            android:gravity="start"
+            android:maxLines="@integer/playback_title_text_max_lines"
+            android:ellipsize="end"
+            android:textAlignment="center"
+            android:includeFontPadding="false"/>
+        <TextView
+            android:id="@+id/subtitle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/playback_secondary_text_margin_top"
+            android:textAppearance="@style/TextAppearance.Car.Body2.Light"
+            android:gravity="start"
+            android:maxLines="@integer/playback_subtitle_text_max_lines"
+            android:ellipsize="end"
+            android:textAlignment="center"/>
+        <SeekBar
+            android:id="@+id/seek_bar"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/playback_seekbar_height"
+            android:layout_marginTop="@dimen/playback_seekbar_margin_top"
+            android:visibility="invisible"
+            android:paddingStart="0dp"
+            android:paddingEnd="0dp"
+            android:progressDrawable="@drawable/seekbar_background"
+            android:background="@color/car_grey_900"
+            android:thumb="@null"/>
+
+    </LinearLayout>
+</LinearLayout>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index c1d9bd2..c437ace 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -32,4 +32,6 @@
     <dimen name="controls_margin">46dp</dimen>
     <dimen name="controls_spacing_inner">16dp</dimen>
     <dimen name="controls_spacing_outer">81dp</dimen>
+
+    <dimen name="playback_controls_margin">48dp</dimen>
 </resources>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index dd0ef69..11254ae 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -25,4 +25,10 @@
         <item name="android:textSize">@dimen/car_body2_size</item>
         <item name="android:textColor">@color/no_content_text_color</item>
     </style>
+
+    <style name="ListItemTransparent" parent="Theme.Car.Light.List">
+        <item name="listItemBackgroundColor">@android:color/transparent</item>
+        <item name="listItemTitleTextAppearance">@style/TextAppearance.Car.Body1.Light</item>
+        <item name="listItemBodyTextAppearance">@style/TextAppearance.Car.Body2.Light</item>
+    </style>
 </resources>
diff --git a/res/values/themes.xml b/res/values/themes.xml
index af7f9c9..ae78985 100644
--- a/res/values/themes.xml
+++ b/res/values/themes.xml
@@ -15,7 +15,8 @@ limitations under the License.
 -->
 <resources>
     <!-- The theme for the main MediaActivity. -->
-    <style name="MediaActivityTheme" parent="Theme.Car.Light.NoActionBar.Drawer" >
+    <style name="MediaActivityTheme" parent="Theme.Car.Dark.NoActionBar.Drawer" >
         <item name="android:colorPrimary">@android:color/transparent</item>
+        <item name="listItemStyle">@style/ListItemTransparent</item>
     </style>
 </resources>