Revise layout/style of VoicemailPlaybackLayout.

- Delete now-unused old icons.
+ Add new material icons for voicemail playback.
+ Rearrange buttons, padding/spacing.
+ Change ripple feedback when pressing button.
+ Use different text fields for total duration and state labels.

Bug: 22070564
Change-Id: Ibc9b9908154ac0a846f828bb9707a61ab15f8ba5

68 files changed, 147 insertions, 111 deletions

diff --git a/res/drawable-hdpi/ic_pause_24dp.png b/res/drawable-hdpi/ic_pause_24dp.png
new file mode 100644
index 000000000..4d2ea05c4
--- /dev/null
+++ b/res/drawable-hdpi/ic_pause_24dp.png
diff --git a/res/drawable-hdpi/ic_play_active_holo_dark.png b/res/drawable-hdpi/ic_play_active_holo_dark.png
deleted file mode 100644
index 179b5a185..000000000
--- a/res/drawable-hdpi/ic_play_active_holo_dark.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_play_holo_dark.png b/res/drawable-hdpi/ic_play_holo_dark.png
deleted file mode 100644
index d5fd23597..000000000
--- a/res/drawable-hdpi/ic_play_holo_dark.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_play_holo_light.png b/res/drawable-hdpi/ic_play_holo_light.png
deleted file mode 100644
index 684df0074..000000000
--- a/res/drawable-hdpi/ic_play_holo_light.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_vm_minus_dis.png b/res/drawable-hdpi/ic_vm_minus_dis.png
deleted file mode 100644
index 5ff08b2af..000000000
--- a/res/drawable-hdpi/ic_vm_minus_dis.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_vm_minus_dk.png b/res/drawable-hdpi/ic_vm_minus_dk.png
deleted file mode 100644
index a2073afec..000000000
--- a/res/drawable-hdpi/ic_vm_minus_dk.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_vm_pause_dis.png b/res/drawable-hdpi/ic_vm_pause_dis.png
deleted file mode 100644
index 905451518..000000000
--- a/res/drawable-hdpi/ic_vm_pause_dis.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_vm_pause_dk.png b/res/drawable-hdpi/ic_vm_pause_dk.png
deleted file mode 100644
index beab6fd81..000000000
--- a/res/drawable-hdpi/ic_vm_pause_dk.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_vm_play_dis.png b/res/drawable-hdpi/ic_vm_play_dis.png
deleted file mode 100644
index 5ba484728..000000000
--- a/res/drawable-hdpi/ic_vm_play_dis.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_vm_play_dk.png b/res/drawable-hdpi/ic_vm_play_dk.png
deleted file mode 100644
index 920174c37..000000000
--- a/res/drawable-hdpi/ic_vm_play_dk.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_vm_plus_dis.png b/res/drawable-hdpi/ic_vm_plus_dis.png
deleted file mode 100644
index d39c45e9d..000000000
--- a/res/drawable-hdpi/ic_vm_plus_dis.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_vm_plus_dk.png b/res/drawable-hdpi/ic_vm_plus_dk.png
deleted file mode 100644
index 7f2656f7e..000000000
--- a/res/drawable-hdpi/ic_vm_plus_dk.png
+++ /dev/null
diff --git a/res/drawable-hdpi/ic_volume_down_24dp.png b/res/drawable-hdpi/ic_volume_down_24dp.png
new file mode 100644
index 000000000..e22e92c85
--- /dev/null
+++ b/res/drawable-hdpi/ic_volume_down_24dp.png
diff --git a/res/drawable-hdpi/ic_volume_up_24dp.png b/res/drawable-hdpi/ic_volume_up_24dp.png
new file mode 100644
index 000000000..57d787163
--- /dev/null
+++ b/res/drawable-hdpi/ic_volume_up_24dp.png
diff --git a/res/drawable-mdpi/ic_pause_24dp.png b/res/drawable-mdpi/ic_pause_24dp.png
new file mode 100644
index 000000000..2272d478c
--- /dev/null
+++ b/res/drawable-mdpi/ic_pause_24dp.png
diff --git a/res/drawable-mdpi/ic_play_active_holo_dark.png b/res/drawable-mdpi/ic_play_active_holo_dark.png
deleted file mode 100644
index 042d8c158..000000000
--- a/res/drawable-mdpi/ic_play_active_holo_dark.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_play_holo_dark.png b/res/drawable-mdpi/ic_play_holo_dark.png
deleted file mode 100644
index a31671d93..000000000
--- a/res/drawable-mdpi/ic_play_holo_dark.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_play_holo_light.png b/res/drawable-mdpi/ic_play_holo_light.png
deleted file mode 100644
index f36edf93b..000000000
--- a/res/drawable-mdpi/ic_play_holo_light.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_vm_minus_dis.png b/res/drawable-mdpi/ic_vm_minus_dis.png
deleted file mode 100644
index b7928a136..000000000
--- a/res/drawable-mdpi/ic_vm_minus_dis.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_vm_minus_dk.png b/res/drawable-mdpi/ic_vm_minus_dk.png
deleted file mode 100644
index 250f6e2ab..000000000
--- a/res/drawable-mdpi/ic_vm_minus_dk.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_vm_pause_dis.png b/res/drawable-mdpi/ic_vm_pause_dis.png
deleted file mode 100644
index 4c4d0e237..000000000
--- a/res/drawable-mdpi/ic_vm_pause_dis.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_vm_pause_dk.png b/res/drawable-mdpi/ic_vm_pause_dk.png
deleted file mode 100644
index f7aeaaf61..000000000
--- a/res/drawable-mdpi/ic_vm_pause_dk.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_vm_play_dis.png b/res/drawable-mdpi/ic_vm_play_dis.png
deleted file mode 100644
index 74e547051..000000000
--- a/res/drawable-mdpi/ic_vm_play_dis.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_vm_play_dk.png b/res/drawable-mdpi/ic_vm_play_dk.png
deleted file mode 100644
index 7606af920..000000000
--- a/res/drawable-mdpi/ic_vm_play_dk.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_vm_plus_dis.png b/res/drawable-mdpi/ic_vm_plus_dis.png
deleted file mode 100644
index 3f853097e..000000000
--- a/res/drawable-mdpi/ic_vm_plus_dis.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_vm_plus_dk.png b/res/drawable-mdpi/ic_vm_plus_dk.png
deleted file mode 100644
index 74622f014..000000000
--- a/res/drawable-mdpi/ic_vm_plus_dk.png
+++ /dev/null
diff --git a/res/drawable-mdpi/ic_volume_down_24dp.png b/res/drawable-mdpi/ic_volume_down_24dp.png
new file mode 100644
index 000000000..10992ed70
--- /dev/null
+++ b/res/drawable-mdpi/ic_volume_down_24dp.png
diff --git a/res/drawable-mdpi/ic_volume_up_24dp.png b/res/drawable-mdpi/ic_volume_up_24dp.png
new file mode 100644
index 000000000..7cfd4c7b8
--- /dev/null
+++ b/res/drawable-mdpi/ic_volume_up_24dp.png
diff --git a/res/drawable-xhdpi/ic_pause_24dp.png b/res/drawable-xhdpi/ic_pause_24dp.png
new file mode 100644
index 000000000..f49aed757
--- /dev/null
+++ b/res/drawable-xhdpi/ic_pause_24dp.png
diff --git a/res/drawable-xhdpi/ic_play_active_holo_dark.png b/res/drawable-xhdpi/ic_play_active_holo_dark.png
deleted file mode 100644
index 20d058378..000000000
--- a/res/drawable-xhdpi/ic_play_active_holo_dark.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_play_holo_dark.png b/res/drawable-xhdpi/ic_play_holo_dark.png
deleted file mode 100644
index afa6bb0e6..000000000
--- a/res/drawable-xhdpi/ic_play_holo_dark.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_play_holo_light.png b/res/drawable-xhdpi/ic_play_holo_light.png
deleted file mode 100644
index f79757664..000000000
--- a/res/drawable-xhdpi/ic_play_holo_light.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_vm_minus_dis.png b/res/drawable-xhdpi/ic_vm_minus_dis.png
deleted file mode 100644
index acee602b1..000000000
--- a/res/drawable-xhdpi/ic_vm_minus_dis.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_vm_minus_dk.png b/res/drawable-xhdpi/ic_vm_minus_dk.png
deleted file mode 100644
index 450041bc5..000000000
--- a/res/drawable-xhdpi/ic_vm_minus_dk.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_vm_pause_dis.png b/res/drawable-xhdpi/ic_vm_pause_dis.png
deleted file mode 100644
index 41cffcfd3..000000000
--- a/res/drawable-xhdpi/ic_vm_pause_dis.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_vm_pause_dk.png b/res/drawable-xhdpi/ic_vm_pause_dk.png
deleted file mode 100644
index a4e1dbb2c..000000000
--- a/res/drawable-xhdpi/ic_vm_pause_dk.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_vm_play_dis.png b/res/drawable-xhdpi/ic_vm_play_dis.png
deleted file mode 100644
index 31d3348e2..000000000
--- a/res/drawable-xhdpi/ic_vm_play_dis.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_vm_play_dk.png b/res/drawable-xhdpi/ic_vm_play_dk.png
deleted file mode 100644
index 07f0c1907..000000000
--- a/res/drawable-xhdpi/ic_vm_play_dk.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_vm_plus_dis.png b/res/drawable-xhdpi/ic_vm_plus_dis.png
deleted file mode 100644
index 176006170..000000000
--- a/res/drawable-xhdpi/ic_vm_plus_dis.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_vm_plus_dk.png b/res/drawable-xhdpi/ic_vm_plus_dk.png
deleted file mode 100644
index 2f5e0051c..000000000
--- a/res/drawable-xhdpi/ic_vm_plus_dk.png
+++ /dev/null
diff --git a/res/drawable-xhdpi/ic_volume_down_24dp.png b/res/drawable-xhdpi/ic_volume_down_24dp.png
new file mode 100644
index 000000000..2621bc15d
--- /dev/null
+++ b/res/drawable-xhdpi/ic_volume_down_24dp.png
diff --git a/res/drawable-xhdpi/ic_volume_up_24dp.png b/res/drawable-xhdpi/ic_volume_up_24dp.png
new file mode 100644
index 000000000..2ed00343b
--- /dev/null
+++ b/res/drawable-xhdpi/ic_volume_up_24dp.png
diff --git a/res/drawable-xxhdpi/ic_pause_24dp.png b/res/drawable-xxhdpi/ic_pause_24dp.png
new file mode 100644
index 000000000..7192ad487
--- /dev/null
+++ b/res/drawable-xxhdpi/ic_pause_24dp.png
diff --git a/res/drawable-xxhdpi/ic_play_active_holo_dark.png b/res/drawable-xxhdpi/ic_play_active_holo_dark.png
deleted file mode 100644
index fc3424368..000000000
--- a/res/drawable-xxhdpi/ic_play_active_holo_dark.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_play_holo_dark.png b/res/drawable-xxhdpi/ic_play_holo_dark.png
deleted file mode 100644
index 303702745..000000000
--- a/res/drawable-xxhdpi/ic_play_holo_dark.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_play_holo_light.png b/res/drawable-xxhdpi/ic_play_holo_light.png
deleted file mode 100644
index b7b425ca8..000000000
--- a/res/drawable-xxhdpi/ic_play_holo_light.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_vm_minus_dis.png b/res/drawable-xxhdpi/ic_vm_minus_dis.png
deleted file mode 100644
index 578d409ed..000000000
--- a/res/drawable-xxhdpi/ic_vm_minus_dis.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_vm_minus_dk.png b/res/drawable-xxhdpi/ic_vm_minus_dk.png
deleted file mode 100644
index 80bc75a34..000000000
--- a/res/drawable-xxhdpi/ic_vm_minus_dk.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_vm_pause_dis.png b/res/drawable-xxhdpi/ic_vm_pause_dis.png
deleted file mode 100644
index 44adfdea1..000000000
--- a/res/drawable-xxhdpi/ic_vm_pause_dis.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_vm_pause_dk.png b/res/drawable-xxhdpi/ic_vm_pause_dk.png
deleted file mode 100644
index 47fb13635..000000000
--- a/res/drawable-xxhdpi/ic_vm_pause_dk.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_vm_play_dis.png b/res/drawable-xxhdpi/ic_vm_play_dis.png
deleted file mode 100644
index 9ad3d68e8..000000000
--- a/res/drawable-xxhdpi/ic_vm_play_dis.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_vm_play_dk.png b/res/drawable-xxhdpi/ic_vm_play_dk.png
deleted file mode 100644
index c47b7e0b0..000000000
--- a/res/drawable-xxhdpi/ic_vm_play_dk.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_vm_plus_dis.png b/res/drawable-xxhdpi/ic_vm_plus_dis.png
deleted file mode 100644
index aad67ca8c..000000000
--- a/res/drawable-xxhdpi/ic_vm_plus_dis.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_vm_plus_dk.png b/res/drawable-xxhdpi/ic_vm_plus_dk.png
deleted file mode 100644
index b23dfabca..000000000
--- a/res/drawable-xxhdpi/ic_vm_plus_dk.png
+++ /dev/null
diff --git a/res/drawable-xxhdpi/ic_volume_down_24dp.png b/res/drawable-xxhdpi/ic_volume_down_24dp.png
new file mode 100644
index 000000000..5eb8b671f
--- /dev/null
+++ b/res/drawable-xxhdpi/ic_volume_down_24dp.png
diff --git a/res/drawable-xxhdpi/ic_volume_up_24dp.png b/res/drawable-xxhdpi/ic_volume_up_24dp.png
new file mode 100644
index 000000000..2e751a40f
--- /dev/null
+++ b/res/drawable-xxhdpi/ic_volume_up_24dp.png
diff --git a/res/drawable-xxxhdpi/ic_pause_24dp.png b/res/drawable-xxxhdpi/ic_pause_24dp.png
new file mode 100644
index 000000000..660ac6585
--- /dev/null
+++ b/res/drawable-xxxhdpi/ic_pause_24dp.png
diff --git a/res/drawable-xxxhdpi/ic_volume_down_24dp.png b/res/drawable-xxxhdpi/ic_volume_down_24dp.png
new file mode 100644
index 000000000..4ab55abbd
--- /dev/null
+++ b/res/drawable-xxxhdpi/ic_volume_down_24dp.png
diff --git a/res/drawable-xxxhdpi/ic_volume_up_24dp.png b/res/drawable-xxxhdpi/ic_volume_up_24dp.png
new file mode 100644
index 000000000..82972b4e5
--- /dev/null
+++ b/res/drawable-xxxhdpi/ic_volume_up_24dp.png
diff --git a/res/drawable/ic_hold_pause.xml b/res/drawable/ic_hold_pause.xml
deleted file mode 100644
index ec9412045..000000000
--- a/res/drawable/ic_hold_pause.xml
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2011 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.
--->
-
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_enabled="false"
-            android:drawable="@drawable/ic_vm_pause_dis" />
-    <item android:drawable="@drawable/ic_vm_pause_dk" />
-</selector>
diff --git a/res/drawable/ic_minus.xml b/res/drawable/ic_pause.xml
index 2bd0699ec..7015a6647 100644
--- a/res/drawable/ic_minus.xml
+++ b/res/drawable/ic_pause.xml
@@ -15,6 +15,17 @@
 -->
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_enabled="false" android:drawable="@drawable/ic_vm_minus_dis" />
-    <item android:drawable="@drawable/ic_vm_minus_dk" />
+
+    <item android:state_enabled="false">
+        <bitmap
+            android:src="@drawable/ic_pause_24dp"
+            android:tint="@color/voicemail_icon_disabled_tint" />
+    </item>
+
+    <item>
+        <bitmap
+            android:src="@drawable/ic_pause_24dp"
+            android:tint="@color/voicemail_playpause_icon_tint" />
+    </item>
+
 </selector>
diff --git a/res/drawable/ic_play.xml b/res/drawable/ic_play.xml
deleted file mode 100644
index 6a09c899a..000000000
--- a/res/drawable/ic_play.xml
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2011 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.
--->
-
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_enabled="false"
-        android:drawable="@drawable/ic_vm_play_dis" />
-    <item android:drawable="@drawable/ic_vm_play_dk" />
-</selector>
diff --git a/res/drawable/ic_plus.xml b/res/drawable/ic_play_arrow.xml
index c60667430..1a9ee978f 100644
--- a/res/drawable/ic_plus.xml
+++ b/res/drawable/ic_play_arrow.xml
@@ -14,7 +14,19 @@
      limitations under the License.
 -->
 
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_enabled="false" android:drawable="@drawable/ic_vm_plus_dis" />
-    <item android:drawable="@drawable/ic_vm_plus_dk" />
+<selector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:autoMirrored="true">
+
+    <item android:state_enabled="false">
+        <bitmap
+            android:src="@drawable/ic_play_arrow_24dp"
+            android:tint="@color/voicemail_icon_disabled_tint" />
+    </item>
+
+    <item>
+        <bitmap
+            android:src="@drawable/ic_play_arrow_24dp"
+            android:tint="@color/voicemail_playpause_icon_tint" />
+    </item>
+
 </selector>
diff --git a/res/drawable/oval_ripple.xml b/res/drawable/oval_ripple.xml
new file mode 100644
index 000000000..0022d2671
--- /dev/null
+++ b/res/drawable/oval_ripple.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Copyright (C) 2014 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
+  -->
+
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+        android:color="?android:attr/colorControlHighlight" >
+    <item>
+        <shape android:shape="oval">
+            <solid android:color="#fff" />
+        </shape>
+    </item>
+</ripple>
diff --git a/res/layout/voicemail_playback_layout.xml b/res/layout/voicemail_playback_layout.xml
index 97bb5f8a3..56865fcd6 100644
--- a/res/layout/voicemail_playback_layout.xml
+++ b/res/layout/voicemail_playback_layout.xml
@@ -18,74 +18,94 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_marginStart="64dp"
+    android:layout_marginEnd="24dp"
     android:orientation="vertical"
     android:background="@color/background_dialer_call_log_list_item">
 
-    <RelativeLayout
-        android:id="@+id/seek_container"
+    <TextView
+        android:id="@+id/playback_state_text"
+        android:layout_height="wrap_content"
         android:layout_width="match_parent"
-        android:layout_height="80dp"
-        android:layout_marginTop="@dimen/call_detail_button_spacing">
+        android:gravity="center"
+        android:textSize="14sp" />
 
-        <SeekBar
-            android:id="@+id/playback_seek"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:progressDrawable="@drawable/seekbar_drawable"
-            android:thumb="@drawable/ic_voicemail_seek_handle"
-            android:thumbOffset="8dp"
-            android:progress="0"
-            android:paddingStart="8dp"
-            android:paddingEnd="8dp"
-            android:paddingTop="30dp"
-            android:paddingBottom="20dp"
-            android:layout_marginEnd="64dp"
-            android:layout_marginStart="64dp"
-            android:max="0"
-            android:layout_centerVertical="true"
-            android:contentDescription="@string/description_playback_seek" />
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        android:gravity="top">
 
         <TextView
             android:id="@+id/playback_position_text"
             android:layout_height="wrap_content"
             android:layout_width="wrap_content"
             android:textSize="14sp"
-            android:layout_alignParentTop="true"
-            android:layout_centerHorizontal="true"
-            android:layout_marginTop="10dp" />
+            android:paddingTop="@dimen/voicemail_playback_top_padding" />
 
-    </RelativeLayout>
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:orientation="vertical"
+            android:layout_marginTop="4dp">
 
-    <LinearLayout android:id="@+id/buttons_linear_layout"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="horizontal">
+            <SeekBar
+                android:id="@+id/playback_seek"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:paddingBottom="8dp"
+                android:paddingTop="@dimen/voicemail_playback_top_padding"
+                android:progressDrawable="@drawable/seekbar_drawable"
+                android:thumb="@drawable/ic_voicemail_seek_handle"
+                android:progress="0"
+                android:max="0"
+                android:contentDescription="@string/description_playback_seek" />
 
-        <ImageButton android:id="@+id/playback_start_stop"
-            android:layout_width="match_parent"
-            android:layout_height="58dp"
-            android:layout_marginEnd="@dimen/call_detail_button_spacing"
-            android:layout_weight="1"
-            android:background="?android:attr/selectableItemBackground"
-            android:src="@drawable/ic_hold_pause"
-            android:contentDescription="@string/voicemail_play_start_pause" />
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                android:gravity="center"
+                android:padding="8dp">
 
-        <ImageButton android:id="@+id/playback_speakerphone"
-            android:layout_width="match_parent"
-            android:layout_height="58dp"
-            android:layout_weight="1"
-            android:background="?android:attr/selectableItemBackground"
-            android:src="@drawable/ic_speakerphone_on"
-            android:contentDescription="@string/description_playback_speakerphone" />
+                <ImageButton android:id="@+id/playback_speakerphone"
+                    style="@style/VoicemailPlaybackLayoutButtonStyle"
+                    android:src="@drawable/ic_speakerphone_on"
+                    android:tint="@color/voicemail_icon_tint"
+                    android:contentDescription="@string/description_playback_speakerphone" />
 
-        <ImageButton android:id="@+id/delete_voicemail"
-            android:layout_width="match_parent"
-            android:layout_height="58dp"
-            android:layout_weight="1"
-            android:background="?android:attr/selectableItemBackground"
-            android:src="@drawable/ic_delete_24dp"
-            android:tint="@color/voicemail_playback_icon_tint"
-            android:contentDescription="@string/recentCalls_trashVoicemail" />
+                <Space
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:layout_weight="1" />
+
+                <ImageButton android:id="@+id/playback_start_stop"
+                    style="@style/VoicemailPlaybackLayoutButtonStyle"
+                    android:src="@drawable/ic_play_arrow"
+                    android:contentDescription="@string/voicemail_play_start_pause" />
+
+                <Space
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:layout_weight="1" />
+
+                <ImageButton android:id="@+id/delete_voicemail"
+                    style="@style/VoicemailPlaybackLayoutButtonStyle"
+                    android:src="@drawable/ic_delete_24dp"
+                    android:tint="@color/voicemail_icon_tint"
+                    android:contentDescription="@string/recentCalls_trashVoicemail" />
+
+            </LinearLayout>
+
+        </LinearLayout>
+
+    <TextView
+        android:id="@+id/total_duration_text"
+        android:layout_height="wrap_content"
+        android:layout_width="wrap_content"
+        android:textSize="14sp"
+        android:paddingTop="@dimen/voicemail_playback_top_padding" />
 
     </LinearLayout>
 
diff --git a/res/values/colors.xml b/res/values/colors.xml
index c3b0fb5bc..8ce3c17ba 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -30,9 +30,11 @@
     <color name="setting_background_color">#ffffff</color>
     <color name="setting_button_color">#eee</color>
 
+    <!-- 70% black -->
+    <color name="call_log_icon_tint">#b3000000</color>
+    <color name="call_log_list_item_primary_action_icon_tint">@color/call_log_icon_tint</color>
     <!-- Color of the text describing an unconsumed missed call. -->
     <color name="call_log_missed_call_highlight_color">@color/dialer_red_highlight_color</color>
-
     <!-- Color of the text describing an unconsumed voicemail. -->
     <color name="call_log_voicemail_highlight_color">#33b5e5</color>
 
@@ -41,19 +43,13 @@
     <color name="visual_voicemail_promo_card_divider">#7d57c1</color>
     <color name="promo_card_text">#ffffff</color>
 
-    <!-- Tint of the recent card phone icon; 30% black -->
-    <color name="call_log_list_item_primary_action_icon_tint">#4d000000</color>
-
-    <color name="voicemail_playback_icon_tint">#8e8e8e</color>
-
-    <!--
-         Colour of voicemail progress bar to the right of position indicator.
-         Same as the background color of the dialer
-    -->
+    <color name="voicemail_icon_tint">@color/call_log_icon_tint</color>
+    <color name="voicemail_icon_disabled_tint">#80000000</color>
+    <color name="voicemail_playpause_icon_tint">@color/dialer_theme_color</color>
+    <!-- Colour of voicemail progress bar to the right of position indicator. -->
     <color name="voicemail_playback_seek_bar_yet_to_play">#cecece</color>
-
     <!-- Colour of voicemail progress bar to the left of position indicator. -->
-    <color name="voicemail_playback_seek_bar_already_played">#39c9ff</color>
+    <color name="voicemail_playback_seek_bar_already_played">@color/dialer_theme_color</color>
 
     <!-- Standard color for selected items. -->
     <color name="item_selected">#660099cc</color>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 206b44740..776cd1150 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -145,4 +145,6 @@
     <dimen name="promo_card_action_end_padding">4dp</dimen>
     <dimen name="promo_card_action_between_padding">11dp</dimen>
     <dimen name="promo_card_line_spacing">4dp</dimen>
+
+    <dimen name="voicemail_playback_top_padding">12dp</dimen>
 </resources>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 7d5d42f8f..987ef4808 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -232,4 +232,15 @@
         <item name="android:singleLine">true</item>
         <item name="android:textAllCaps">true</item>
     </style>
+
+    <style name="VoicemailPlaybackLayoutTextStyle">
+        <item name="android:textSize">14sp</item>
+    </style>
+
+    <style name="VoicemailPlaybackLayoutButtonStyle">
+        <item name="android:layout_width">56dp</item>
+        <item name="android:layout_height">56dp</item>
+        <item name="android:background">@drawable/oval_ripple</item>
+        <item name="android:padding">8dp</item>
+    </style>
 </resources>