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
diff --git a/res/drawable-hdpi/ic_pause_24dp.png b/res/drawable-hdpi/ic_pause_24dp.png
new file mode 100644
index 0000000..4d2ea05
--- /dev/null
+++ b/res/drawable-hdpi/ic_pause_24dp.png
Binary files differ
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 179b5a1..0000000
--- a/res/drawable-hdpi/ic_play_active_holo_dark.png
+++ /dev/null
Binary files differ
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 d5fd235..0000000
--- a/res/drawable-hdpi/ic_play_holo_dark.png
+++ /dev/null
Binary files differ
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 684df00..0000000
--- a/res/drawable-hdpi/ic_play_holo_light.png
+++ /dev/null
Binary files differ
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 5ff08b2..0000000
--- a/res/drawable-hdpi/ic_vm_minus_dis.png
+++ /dev/null
Binary files differ
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 a2073af..0000000
--- a/res/drawable-hdpi/ic_vm_minus_dk.png
+++ /dev/null
Binary files differ
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 9054515..0000000
--- a/res/drawable-hdpi/ic_vm_pause_dis.png
+++ /dev/null
Binary files differ
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 beab6fd..0000000
--- a/res/drawable-hdpi/ic_vm_pause_dk.png
+++ /dev/null
Binary files differ
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 5ba4847..0000000
--- a/res/drawable-hdpi/ic_vm_play_dis.png
+++ /dev/null
Binary files differ
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 920174c..0000000
--- a/res/drawable-hdpi/ic_vm_play_dk.png
+++ /dev/null
Binary files differ
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 d39c45e..0000000
--- a/res/drawable-hdpi/ic_vm_plus_dis.png
+++ /dev/null
Binary files differ
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 7f2656f..0000000
--- a/res/drawable-hdpi/ic_vm_plus_dk.png
+++ /dev/null
Binary files differ
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 0000000..e22e92c
--- /dev/null
+++ b/res/drawable-hdpi/ic_volume_down_24dp.png
Binary files differ
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 0000000..57d7871
--- /dev/null
+++ b/res/drawable-hdpi/ic_volume_up_24dp.png
Binary files differ
diff --git a/res/drawable-mdpi/ic_pause_24dp.png b/res/drawable-mdpi/ic_pause_24dp.png
new file mode 100644
index 0000000..2272d47
--- /dev/null
+++ b/res/drawable-mdpi/ic_pause_24dp.png
Binary files differ
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 042d8c1..0000000
--- a/res/drawable-mdpi/ic_play_active_holo_dark.png
+++ /dev/null
Binary files differ
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 a31671d..0000000
--- a/res/drawable-mdpi/ic_play_holo_dark.png
+++ /dev/null
Binary files differ
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 f36edf9..0000000
--- a/res/drawable-mdpi/ic_play_holo_light.png
+++ /dev/null
Binary files differ
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 b7928a1..0000000
--- a/res/drawable-mdpi/ic_vm_minus_dis.png
+++ /dev/null
Binary files differ
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 250f6e2..0000000
--- a/res/drawable-mdpi/ic_vm_minus_dk.png
+++ /dev/null
Binary files differ
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 4c4d0e2..0000000
--- a/res/drawable-mdpi/ic_vm_pause_dis.png
+++ /dev/null
Binary files differ
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 f7aeaaf..0000000
--- a/res/drawable-mdpi/ic_vm_pause_dk.png
+++ /dev/null
Binary files differ
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 74e5470..0000000
--- a/res/drawable-mdpi/ic_vm_play_dis.png
+++ /dev/null
Binary files differ
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 7606af9..0000000
--- a/res/drawable-mdpi/ic_vm_play_dk.png
+++ /dev/null
Binary files differ
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 3f85309..0000000
--- a/res/drawable-mdpi/ic_vm_plus_dis.png
+++ /dev/null
Binary files differ
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 74622f0..0000000
--- a/res/drawable-mdpi/ic_vm_plus_dk.png
+++ /dev/null
Binary files differ
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 0000000..10992ed
--- /dev/null
+++ b/res/drawable-mdpi/ic_volume_down_24dp.png
Binary files differ
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 0000000..7cfd4c7
--- /dev/null
+++ b/res/drawable-mdpi/ic_volume_up_24dp.png
Binary files differ
diff --git a/res/drawable-xhdpi/ic_pause_24dp.png b/res/drawable-xhdpi/ic_pause_24dp.png
new file mode 100644
index 0000000..f49aed7
--- /dev/null
+++ b/res/drawable-xhdpi/ic_pause_24dp.png
Binary files differ
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 20d0583..0000000
--- a/res/drawable-xhdpi/ic_play_active_holo_dark.png
+++ /dev/null
Binary files differ
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 afa6bb0..0000000
--- a/res/drawable-xhdpi/ic_play_holo_dark.png
+++ /dev/null
Binary files differ
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 f797576..0000000
--- a/res/drawable-xhdpi/ic_play_holo_light.png
+++ /dev/null
Binary files differ
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 acee602..0000000
--- a/res/drawable-xhdpi/ic_vm_minus_dis.png
+++ /dev/null
Binary files differ
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 450041b..0000000
--- a/res/drawable-xhdpi/ic_vm_minus_dk.png
+++ /dev/null
Binary files differ
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 41cffcf..0000000
--- a/res/drawable-xhdpi/ic_vm_pause_dis.png
+++ /dev/null
Binary files differ
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 a4e1dbb..0000000
--- a/res/drawable-xhdpi/ic_vm_pause_dk.png
+++ /dev/null
Binary files differ
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 31d3348..0000000
--- a/res/drawable-xhdpi/ic_vm_play_dis.png
+++ /dev/null
Binary files differ
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 07f0c19..0000000
--- a/res/drawable-xhdpi/ic_vm_play_dk.png
+++ /dev/null
Binary files differ
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 1760061..0000000
--- a/res/drawable-xhdpi/ic_vm_plus_dis.png
+++ /dev/null
Binary files differ
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 2f5e005..0000000
--- a/res/drawable-xhdpi/ic_vm_plus_dk.png
+++ /dev/null
Binary files differ
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 0000000..2621bc1
--- /dev/null
+++ b/res/drawable-xhdpi/ic_volume_down_24dp.png
Binary files differ
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 0000000..2ed0034
--- /dev/null
+++ b/res/drawable-xhdpi/ic_volume_up_24dp.png
Binary files differ
diff --git a/res/drawable-xxhdpi/ic_pause_24dp.png b/res/drawable-xxhdpi/ic_pause_24dp.png
new file mode 100644
index 0000000..7192ad4
--- /dev/null
+++ b/res/drawable-xxhdpi/ic_pause_24dp.png
Binary files differ
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 fc34243..0000000
--- a/res/drawable-xxhdpi/ic_play_active_holo_dark.png
+++ /dev/null
Binary files differ
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 3037027..0000000
--- a/res/drawable-xxhdpi/ic_play_holo_dark.png
+++ /dev/null
Binary files differ
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 b7b425c..0000000
--- a/res/drawable-xxhdpi/ic_play_holo_light.png
+++ /dev/null
Binary files differ
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 578d409..0000000
--- a/res/drawable-xxhdpi/ic_vm_minus_dis.png
+++ /dev/null
Binary files differ
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 80bc75a..0000000
--- a/res/drawable-xxhdpi/ic_vm_minus_dk.png
+++ /dev/null
Binary files differ
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 44adfde..0000000
--- a/res/drawable-xxhdpi/ic_vm_pause_dis.png
+++ /dev/null
Binary files differ
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 47fb136..0000000
--- a/res/drawable-xxhdpi/ic_vm_pause_dk.png
+++ /dev/null
Binary files differ
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 9ad3d68..0000000
--- a/res/drawable-xxhdpi/ic_vm_play_dis.png
+++ /dev/null
Binary files differ
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 c47b7e0..0000000
--- a/res/drawable-xxhdpi/ic_vm_play_dk.png
+++ /dev/null
Binary files differ
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 aad67ca..0000000
--- a/res/drawable-xxhdpi/ic_vm_plus_dis.png
+++ /dev/null
Binary files differ
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 b23dfab..0000000
--- a/res/drawable-xxhdpi/ic_vm_plus_dk.png
+++ /dev/null
Binary files differ
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 0000000..5eb8b67
--- /dev/null
+++ b/res/drawable-xxhdpi/ic_volume_down_24dp.png
Binary files differ
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 0000000..2e751a4
--- /dev/null
+++ b/res/drawable-xxhdpi/ic_volume_up_24dp.png
Binary files differ
diff --git a/res/drawable-xxxhdpi/ic_pause_24dp.png b/res/drawable-xxxhdpi/ic_pause_24dp.png
new file mode 100644
index 0000000..660ac65
--- /dev/null
+++ b/res/drawable-xxxhdpi/ic_pause_24dp.png
Binary files differ
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 0000000..4ab55ab
--- /dev/null
+++ b/res/drawable-xxxhdpi/ic_volume_down_24dp.png
Binary files differ
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 0000000..82972b4
--- /dev/null
+++ b/res/drawable-xxxhdpi/ic_volume_up_24dp.png
Binary files differ
diff --git a/res/drawable/ic_hold_pause.xml b/res/drawable/ic_hold_pause.xml
deleted file mode 100644
index ec94120..0000000
--- 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_minus.xml
deleted file mode 100644
index 2bd0699..0000000
--- a/res/drawable/ic_minus.xml
+++ /dev/null
@@ -1,20 +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_minus_dis" />
-    <item android:drawable="@drawable/ic_vm_minus_dk" />
-</selector>
diff --git a/res/drawable/ic_plus.xml b/res/drawable/ic_pause.xml
similarity index 68%
rename from res/drawable/ic_plus.xml
rename to res/drawable/ic_pause.xml
index c606674..7015a66 100644
--- a/res/drawable/ic_plus.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_plus_dis" />
-    <item android:drawable="@drawable/ic_vm_plus_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 6a09c89..0000000
--- 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
similarity index 65%
copy from res/drawable/ic_plus.xml
copy to res/drawable/ic_play_arrow.xml
index c606674..1a9ee97 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 0000000..0022d26
--- /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 97bb5f8..56865fc 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"
+            <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" />
+
+            <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"
+                    style="@style/VoicemailPlaybackLayoutButtonStyle"
+                    android:src="@drawable/ic_speakerphone_on"
+                    android:tint="@color/voicemail_icon_tint"
+                    android:contentDescription="@string/description_playback_speakerphone" />
+
+                <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:orientation="horizontal">
-
-        <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" />
-
-        <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/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" />
+        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 c3b0fb5..8ce3c17 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 206b447..776cd11 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 7d5d42f..987ef48 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>
diff --git a/src/com/android/dialer/voicemail/VoicemailPlaybackLayout.java b/src/com/android/dialer/voicemail/VoicemailPlaybackLayout.java
index ca487db..2d65504 100644
--- a/src/com/android/dialer/voicemail/VoicemailPlaybackLayout.java
+++ b/src/com/android/dialer/voicemail/VoicemailPlaybackLayout.java
@@ -70,13 +70,13 @@
         /** Update rate for the slider, 30fps. */
         private static final int SLIDER_UPDATE_PERIOD_MILLIS = 1000 / 30;
 
-        private int mDuration;
+        private int mDurationMs;
         private final ScheduledExecutorService mExecutorService;
         private final Object mLock = new Object();
         @GuardedBy("mLock") private ScheduledFuture<?> mScheduledFuture;
 
-        public PositionUpdater(int duration, ScheduledExecutorService executorService) {
-            mDuration = duration;
+        public PositionUpdater(int durationMs, ScheduledExecutorService executorService) {
+            mDurationMs = durationMs;
             mExecutorService = executorService;
         }
 
@@ -85,15 +85,15 @@
             post(new Runnable() {
                 @Override
                 public void run() {
-                    int currentPosition = 0;
+                    int currentPositionMs = 0;
                     synchronized (mLock) {
                         if (mScheduledFuture == null || mPresenter == null) {
                             // This task has been canceled. Just stop now.
                             return;
                         }
-                        currentPosition = mPresenter.getMediaPlayerPosition();
+                        currentPositionMs = mPresenter.getMediaPlayerPosition();
                     }
-                    setClipPosition(currentPosition, mDuration);
+                    setClipPosition(currentPositionMs, mDurationMs);
                 }
             });
         }
@@ -193,7 +193,9 @@
     private ImageButton mStartStopButton;
     private ImageButton mPlaybackSpeakerphone;
     private ImageButton mDeleteButton;
-    private TextView mPlaybackPosition;
+    private TextView mStateText;
+    private TextView mPositionText;
+    private TextView mTotalDurationText;
 
     private PositionUpdater mPositionUpdater;
 
@@ -224,7 +226,9 @@
         mStartStopButton = (ImageButton) findViewById(R.id.playback_start_stop);
         mPlaybackSpeakerphone = (ImageButton) findViewById(R.id.playback_speakerphone);
         mDeleteButton = (ImageButton) findViewById(R.id.delete_voicemail);
-        mPlaybackPosition = (TextView) findViewById(R.id.playback_position_text);
+        mStateText = (TextView) findViewById(R.id.playback_state_text);
+        mPositionText = (TextView) findViewById(R.id.playback_position_text);
+        mTotalDurationText = (TextView) findViewById(R.id.total_duration_text);
 
         mPlaybackSeek.setOnSeekBarChangeListener(mSeekBarChangeListener);
         mStartStopButton.setOnClickListener(mStartStopButtonListener);
@@ -236,7 +240,7 @@
     public void onPlaybackStarted(int duration, ScheduledExecutorService executorService) {
         mIsPlaying = true;
 
-        mStartStopButton.setImageResource(R.drawable.ic_hold_pause);
+        mStartStopButton.setImageResource(R.drawable.ic_pause);
 
         if (mPresenter != null) {
             onSpeakerphoneOn(mPresenter.isSpeakerphoneOn());
@@ -250,7 +254,7 @@
     public void onPlaybackStopped() {
         mIsPlaying = false;
 
-        mStartStopButton.setImageResource(R.drawable.ic_play);
+        mStartStopButton.setImageResource(R.drawable.ic_play_arrow);
 
         if (mPositionUpdater != null) {
             mPositionUpdater.stopUpdating();
@@ -265,7 +269,7 @@
         }
 
         disableUiElements();
-        mPlaybackPosition.setText(getString(R.string.voicemail_playback_error));
+        mPositionText.setText(getString(R.string.voicemail_playback_error));
     }
 
 
@@ -275,12 +279,12 @@
         }
 
         if (on) {
-            mPlaybackSpeakerphone.setImageResource(R.drawable.ic_speakerphone_on);
+            mPlaybackSpeakerphone.setImageResource(R.drawable.ic_volume_up_24dp);
             // Speaker is now on, tapping button will turn it off.
             mPlaybackSpeakerphone.setContentDescription(
                     mContext.getString(R.string.voicemail_speaker_off));
         } else {
-            mPlaybackSpeakerphone.setImageResource(R.drawable.ic_speakerphone_off);
+            mPlaybackSpeakerphone.setImageResource(R.drawable.ic_volume_down_24dp);
             // Speaker is now off, tapping button will turn it on.
             mPlaybackSpeakerphone.setContentDescription(
                     mContext.getString(R.string.voicemail_speaker_on));
@@ -288,33 +292,36 @@
     }
 
     @Override
-    public void setClipPosition(int clipPositionInMillis, int clipLengthInMillis) {
-        int seekBarPosition = Math.max(0, clipPositionInMillis);
-        int seekBarMax = Math.max(seekBarPosition, clipLengthInMillis);
+    public void setClipPosition(int positionMs, int durationMs) {
+        int seekBarPositionMs = Math.max(0, positionMs);
+        int seekBarMax = Math.max(seekBarPositionMs, durationMs);
         if (mPlaybackSeek.getMax() != seekBarMax) {
             mPlaybackSeek.setMax(seekBarMax);
         }
 
-        mPlaybackSeek.setProgress(seekBarPosition);
-        mPlaybackPosition.setText(formatAsMinutesAndSeconds(seekBarMax - seekBarPosition));
+        mPlaybackSeek.setProgress(seekBarPositionMs);
+
+        mPositionText.setText(formatAsMinutesAndSeconds(seekBarPositionMs));
+        mTotalDurationText.setText(formatAsMinutesAndSeconds(durationMs));
+        mStateText.setText(null);
     }
 
     @Override
     public void setIsBuffering() {
         disableUiElements();
-        mPlaybackPosition.setText(getString(R.string.voicemail_buffering));
+        mStateText.setText(getString(R.string.voicemail_buffering));
     }
 
     @Override
     public void setIsFetchingContent() {
         disableUiElements();
-        mPlaybackPosition.setText(getString(R.string.voicemail_fetching_content));
+        mStateText.setText(getString(R.string.voicemail_fetching_content));
     }
 
     @Override
     public void setFetchContentTimeout() {
         disableUiElements();
-        mPlaybackPosition.setText(getString(R.string.voicemail_fetching_timout));
+        mStateText.setText(getString(R.string.voicemail_fetching_timout));
     }
 
     @Override
@@ -328,6 +335,9 @@
         mPlaybackSpeakerphone.setEnabled(false);
         mPlaybackSeek.setProgress(0);
         mPlaybackSeek.setEnabled(false);
+
+        mPositionText.setText(formatAsMinutesAndSeconds(0));
+        mTotalDurationText.setText(formatAsMinutesAndSeconds(0));
     }
 
     @Override