DO NOT MERGE Implement on going call fragment.

Bug: 77980012.
Test: build and load the app.

Change-Id: Id70390e7469a4f18acf6836f45747e4ec39e6127

22 files changed, 426 insertions, 248 deletions

diff --git a/Android.mk b/Android.mk
index 9bd27bca..c656d927 100644
--- a/Android.mk
+++ b/Android.mk
@@ -37,6 +37,7 @@ LOCAL_STATIC_ANDROID_LIBRARIES += \
     car-stream-ui-lib \
     android-arch-lifecycle-extensions \
     android-support-constraint-layout \
+    android-support-v7-cardview \
 
 LOCAL_STATIC_JAVA_LIBRARIES := \
     android-support-constraint-layout-solver
diff --git a/res/drawable/button_active_state_ring.xml b/res/drawable/button_active_state_ring.xml
new file mode 100644
index 00000000..8f717177
--- /dev/null
+++ b/res/drawable/button_active_state_ring.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2018 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.
+-->
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="ring"
+    android:thickness="4dp"
+    android:innerRadius="34dp"
+    android:useLevel="false">
+</shape>
\ No newline at end of file
diff --git a/res/drawable/ic_bluetooth.xml b/res/drawable/ic_bluetooth.xml
index f1f5dcc3..01fc1159 100644
--- a/res/drawable/ic_bluetooth.xml
+++ b/res/drawable/ic_bluetooth.xml
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-        android:width="24dp"
-        android:height="24dp"
+        android:width="44dp"
+        android:height="44dp"
         android:viewportWidth="24.0"
         android:viewportHeight="24.0">
     <path
diff --git a/res/drawable/ic_call_end.xml b/res/drawable/ic_call_end.xml
index 140482a2..7c7e73ff 100644
--- a/res/drawable/ic_call_end.xml
+++ b/res/drawable/ic_call_end.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="56dp"
-    android:height="56dp"
+    android:width="44dp"
+    android:height="44dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
 
diff --git a/res/drawable/ic_call_state_switch.xml b/res/drawable/ic_call_state_switch.xml
new file mode 100644
index 00000000..b7142dde
--- /dev/null
+++ b/res/drawable/ic_call_state_switch.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2018 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_activated="true"
+        android:drawable="@drawable/ic_play" />
+    <item
+        android:state_activated="false"
+        android:drawable="@drawable/ic_pause" />
+</selector>
diff --git a/res/drawable/ic_dialpad_activated.xml b/res/drawable/ic_dialpad_activated.xml
index 364ece76..0d2a5221 100644
--- a/res/drawable/ic_dialpad_activated.xml
+++ b/res/drawable/ic_dialpad_activated.xml
@@ -1,62 +1,22 @@
 <?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="72dp"
-    android:height="72dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+<!-- Copyright (C) 2018 The Android Open Source Project
 
-    <path
-        android:strokeWidth="1"
-        android:pathData="M 0 24 L 24 24 L 24 0 L 0 0 Z" />
-    <path
-        android:fillColor="#212121"
-        android:strokeWidth="1"
-        android:pathData="M12,0 C5.37257143,0 0,5.37257143 0,12 C0,18.6274286 5.37257143,24 12,24
-C18.6274286,24 24,18.6274286 24,12 C24,5.37257143 18.6274286,0 12,0
-M12,1.28571429 C17.9078571,1.28571429 22.7142857,6.09214286 22.7142857,12
-C22.7142857,17.9078571 17.9078571,22.7142857 12,22.7142857
-C6.09214286,22.7142857 1.28571429,17.9078571 1.28571429,12
-C1.28571429,6.09214286 6.09214286,1.28571429 12,1.28571429" />
-    <path
-        android:fillColor="#212121"
-        android:strokeWidth="1"
-        android:pathData="M12,16 C11.3688571,16 10.8571429,16.5117143 10.8571429,17.1428571
-C10.8571429,17.774 11.3688571,18.2857143 12,18.2857143 C12.6311429,18.2857143
-13.1428571,17.774 13.1428571,17.1428571 C13.1428571,16.5117143 12.6311429,16
-12,16 M15.4285714,12.5714286 C14.7974286,12.5714286 14.2857143,13.0831429
-14.2857143,13.7142857 C14.2857143,14.3454286 14.7974286,14.8571429
-15.4285714,14.8571429 C16.0597143,14.8571429 16.5714286,14.3454286
-16.5714286,13.7142857 C16.5714286,13.0831429 16.0597143,12.5714286
-15.4285714,12.5714286 M12,12.5714286 C11.3688571,12.5714286
-10.8571429,13.0831429 10.8571429,13.7142857 C10.8571429,14.3454286
-11.3688571,14.8571429 12,14.8571429 C12.6311429,14.8571429 13.1428571,14.3454286
-13.1428571,13.7142857 C13.1428571,13.0831429 12.6311429,12.5714286 12,12.5714286
-M8.57142857,12.5714286 C7.94028571,12.5714286 7.42857143,13.0831429
-7.42857143,13.7142857 C7.42857143,14.3454286 7.94028571,14.8571429
-8.57142857,14.8571429 C9.20257143,14.8571429 9.71428571,14.3454286
-9.71428571,13.7142857 C9.71428571,13.0831429 9.20257143,12.5714286
-8.57142857,12.5714286 M15.4285714,9.14285714 C14.7974286,9.14285714
-14.2857143,9.65457143 14.2857143,10.2857143 C14.2857143,10.9168571
-14.7974286,11.4285714 15.4285714,11.4285714 C16.0597143,11.4285714
-16.5714286,10.9168571 16.5714286,10.2857143 C16.5714286,9.65457143
-16.0597143,9.14285714 15.4285714,9.14285714 M12,9.14285714
-C11.3688571,9.14285714 10.8571429,9.65457143 10.8571429,10.2857143
-C10.8571429,10.9168571 11.3688571,11.4285714 12,11.4285714
-C12.6311429,11.4285714 13.1428571,10.9168571 13.1428571,10.2857143
-C13.1428571,9.65457143 12.6311429,9.14285714 12,9.14285714
-M8.57142857,9.14285714 C7.94028571,9.14285714 7.42857143,9.65457143
-7.42857143,10.2857143 C7.42857143,10.9168571 7.94028571,11.4285714
-8.57142857,11.4285714 C9.20257143,11.4285714 9.71428571,10.9168571
-9.71428571,10.2857143 C9.71428571,9.65457143 9.20257143,9.14285714
-8.57142857,9.14285714 M15.4285714,5.71428571 C14.7974286,5.71428571
-14.2857143,6.226 14.2857143,6.85714286 C14.2857143,7.48828571 14.7974286,8
-15.4285714,8 C16.0597143,8 16.5714286,7.48828571 16.5714286,6.85714286
-C16.5714286,6.226 16.0597143,5.71428571 15.4285714,5.71428571 M12,5.71428571
-C11.3688571,5.71428571 10.8571429,6.226 10.8571429,6.85714286
-C10.8571429,7.48828571 11.3688571,8 12,8 C12.6311429,8 13.1428571,7.48828571
-13.1428571,6.85714286 C13.1428571,6.226 12.6311429,5.71428571 12,5.71428571
-M8.57142857,5.71428571 C7.94028571,5.71428571 7.42857143,6.226
-7.42857143,6.85714286 C7.42857143,7.48828571 7.94028571,8 8.57142857,8
-C9.20257143,8 9.71428571,7.48828571 9.71428571,6.85714286 C9.71428571,6.226
-9.20257143,5.71428571 8.57142857,5.71428571" />
-</vector>
\ No newline at end of file
+     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.
+-->
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item
+        android:drawable="@drawable/button_active_state_ring"/>
+    <item
+        android:drawable="@drawable/ic_dialpad_normal"/>
+</layer-list>
\ No newline at end of file
diff --git a/res/drawable/ic_dialpad_normal.xml b/res/drawable/ic_dialpad_normal.xml
index 8e628ce2..be92de7f 100644
--- a/res/drawable/ic_dialpad_normal.xml
+++ b/res/drawable/ic_dialpad_normal.xml
@@ -1,53 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="72dp"
-    android:height="72dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+<!-- Copyright (C) 2018 The Android Open Source Project
 
-    <path
-        android:strokeWidth="1"
-        android:pathData="M 0 0 L 24 0 L 24 24 L 0 24 Z" />
-    <path
-        android:fillColor="#212121"
-        android:strokeWidth="1"
-        android:pathData="M12,16 C11.3688571,16 10.8571429,16.5117143 10.8571429,17.1428571
-C10.8571429,17.774 11.3688571,18.2857143 12,18.2857143 C12.6311429,18.2857143
-13.1428571,17.774 13.1428571,17.1428571 C13.1428571,16.5117143 12.6311429,16
-12,16 M15.4285714,12.5714286 C14.7974286,12.5714286 14.2857143,13.0831429
-14.2857143,13.7142857 C14.2857143,14.3454286 14.7974286,14.8571429
-15.4285714,14.8571429 C16.0597143,14.8571429 16.5714286,14.3454286
-16.5714286,13.7142857 C16.5714286,13.0831429 16.0597143,12.5714286
-15.4285714,12.5714286 M12,12.5714286 C11.3688571,12.5714286
-10.8571429,13.0831429 10.8571429,13.7142857 C10.8571429,14.3454286
-11.3688571,14.8571429 12,14.8571429 C12.6311429,14.8571429 13.1428571,14.3454286
-13.1428571,13.7142857 C13.1428571,13.0831429 12.6311429,12.5714286 12,12.5714286
-M8.57142857,12.5714286 C7.94028571,12.5714286 7.42857143,13.0831429
-7.42857143,13.7142857 C7.42857143,14.3454286 7.94028571,14.8571429
-8.57142857,14.8571429 C9.20257143,14.8571429 9.71428571,14.3454286
-9.71428571,13.7142857 C9.71428571,13.0831429 9.20257143,12.5714286
-8.57142857,12.5714286 M15.4285714,9.14285714 C14.7974286,9.14285714
-14.2857143,9.65457143 14.2857143,10.2857143 C14.2857143,10.9168571
-14.7974286,11.4285714 15.4285714,11.4285714 C16.0597143,11.4285714
-16.5714286,10.9168571 16.5714286,10.2857143 C16.5714286,9.65457143
-16.0597143,9.14285714 15.4285714,9.14285714 M12,9.14285714
-C11.3688571,9.14285714 10.8571429,9.65457143 10.8571429,10.2857143
-C10.8571429,10.9168571 11.3688571,11.4285714 12,11.4285714
-C12.6311429,11.4285714 13.1428571,10.9168571 13.1428571,10.2857143
-C13.1428571,9.65457143 12.6311429,9.14285714 12,9.14285714
-M8.57142857,9.14285714 C7.94028571,9.14285714 7.42857143,9.65457143
-7.42857143,10.2857143 C7.42857143,10.9168571 7.94028571,11.4285714
-8.57142857,11.4285714 C9.20257143,11.4285714 9.71428571,10.9168571
-9.71428571,10.2857143 C9.71428571,9.65457143 9.20257143,9.14285714
-8.57142857,9.14285714 M15.4285714,5.71428571 C14.7974286,5.71428571
-14.2857143,6.226 14.2857143,6.85714286 C14.2857143,7.48828571 14.7974286,8
-15.4285714,8 C16.0597143,8 16.5714286,7.48828571 16.5714286,6.85714286
-C16.5714286,6.226 16.0597143,5.71428571 15.4285714,5.71428571 M12,5.71428571
-C11.3688571,5.71428571 10.8571429,6.226 10.8571429,6.85714286
-C10.8571429,7.48828571 11.3688571,8 12,8 C12.6311429,8 13.1428571,7.48828571
-13.1428571,6.85714286 C13.1428571,6.226 12.6311429,5.71428571 12,5.71428571
-M8.57142857,5.71428571 C7.94028571,5.71428571 7.42857143,6.226
-7.42857143,6.85714286 C7.42857143,7.48828571 7.94028571,8 8.57142857,8
-C9.20257143,8 9.71428571,7.48828571 9.71428571,6.85714286 C9.71428571,6.226
-9.20257143,5.71428571 8.57142857,5.71428571" />
-</vector>
\ No newline at end of file
+     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.
+-->
+<vector android:height="44dp" android:viewportHeight="48.0"
+        android:viewportWidth="48.0" android:width="44dp"
+        xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#000000"
+          android:pathData="M24,38c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM12,2C9.79,2 8,3.79 8,6s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM12,14c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM12,26c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM36,10c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zM24,26c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM36,26c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM36,14c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM24,14c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM24,2c-2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4z"/>
+</vector>
diff --git a/res/drawable/ic_mute_call_activated.xml b/res/drawable/ic_mute_call_activated.xml
index 738854d9..5d0a6b8e 100644
--- a/res/drawable/ic_mute_call_activated.xml
+++ b/res/drawable/ic_mute_call_activated.xml
@@ -1,50 +1,22 @@
 <?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="72dp"
-    android:height="72dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+<!-- Copyright (C) 2018 The Android Open Source Project
 
-    <path
-        android:strokeWidth="1"
-        android:pathData="M 0 24 L 24 24 L 24 -1.13686838e-13 L 0 -1.13686838e-13 Z" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M14,7.57142857 C14,6.466 13.1058571,5.57142857 12.0022857,5.57142857
-C10.899,5.57142857 10.0038571,6.466 10.0038571,7.57142857 L10.0038571,7.73857143
-L14,11.7251429 C14.0038571,11.6742857 14,7.57142857 14,7.57142857" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M10.0039286,9.53624286 L6.72921429,6.25838571 L5.86507143,7.1021
-L10.0039286,11.2238143 L10.0039286,11.5713857 C10.0039286,12.6756714
-10.8989286,13.5713857 12.0023571,13.5713857 C12.1112143,13.5713857
-12.2172143,13.5603857 12.3213571,13.5435286 L17.1650714,18.3919571
-L18.0079286,17.5482429 L13.4299286,12.9656714 L13.4299286,12.9656714
-L10.0039286,9.53624286 Z" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M16.7016571,11.7142857 L15.5582286,11.7142857 C15.5582286,12.1917143
-15.4619429,12.6338571 15.2916571,13.0315714 L16.1336571,13.8744286
-C16.4940857,13.2327143 16.7016571,12.4977143 16.7016571,11.7142857" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M11.9969857,15.1317857 C10.1408429,15.1317857 8.4347,13.7325 8.4347,11.7142143
-L7.29227143,11.7142143 C7.29227143,14.0117857 9.08298571,15.8945
-11.2884143,16.2205 L11.2884143,18.4285 L12.7155571,18.4285 L12.7155571,16.2205
-C13.7292714,16.0705 14.6529857,15.5907857 15.3558429,14.8933571
-L14.5601286,14.0969286 C13.8944143,14.7493571 12.9665571,15.1317857
-11.9969857,15.1317857" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M12,0 C5.37257143,0 0,5.37257143 0,12 C0,18.6274286 5.37257143,24 12,24
-C18.6274286,24 24,18.6274286 24,12 C24,5.37257143 18.6274286,0 12,0
-M12,1.28571429 C17.9078571,1.28571429 22.7142857,6.09214286 22.7142857,12
-C22.7142857,17.9078571 17.9078571,22.7142857 12,22.7142857
-C6.09214286,22.7142857 1.28571429,17.9078571 1.28571429,12
-C1.28571429,6.09214286 6.09214286,1.28571429 12,1.28571429" />
-</vector>
\ No newline at end of file
+     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.
+-->
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item
+        android:drawable="@drawable/button_active_state_ring"/>
+    <item
+        android:drawable="@drawable/ic_mute_call_normal"/>
+</layer-list>
\ No newline at end of file
diff --git a/res/drawable/ic_mute_call_normal.xml b/res/drawable/ic_mute_call_normal.xml
index 3aeebc29..78163878 100644
--- a/res/drawable/ic_mute_call_normal.xml
+++ b/res/drawable/ic_mute_call_normal.xml
@@ -1,41 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="72dp"
-    android:height="72dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+<!-- Copyright (C) 2018 The Android Open Source Project
 
-    <path
-        android:strokeWidth="1"
-        android:pathData="M 0 24 L 24 24 L 24 -1.13686838e-13 L 0 -1.13686838e-13 Z" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M14,7.57142857 C14,6.466 13.1058571,5.57142857 12.0022857,5.57142857
-C10.899,5.57142857 10.0038571,6.466 10.0038571,7.57142857 L10.0038571,7.73857143
-L14,11.7251429 C14.0038571,11.6742857 14,7.57142857 14,7.57142857" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M10.0039286,9.53624286 L6.72921429,6.25838571 L5.86507143,7.1021
-L10.0039286,11.2238143 L10.0039286,11.5713857 C10.0039286,12.6756714
-10.8989286,13.5713857 12.0023571,13.5713857 C12.1112143,13.5713857
-12.2172143,13.5603857 12.3213571,13.5435286 L17.1650714,18.3919571
-L18.0079286,17.5482429 L13.4299286,12.9656714 L13.4299286,12.9656714
-L10.0039286,9.53624286 Z" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M16.7016571,11.7142857 L15.5582286,11.7142857 C15.5582286,12.1917143
-15.4619429,12.6338571 15.2916571,13.0315714 L16.1336571,13.8744286
-C16.4940857,13.2327143 16.7016571,12.4977143 16.7016571,11.7142857" />
-    <path
-        android:fillColor="#000000"
-        android:strokeWidth="1"
-        android:pathData="M11.9969857,15.1317857 C10.1408429,15.1317857 8.4347,13.7325 8.4347,11.7142143
-L7.29227143,11.7142143 C7.29227143,14.0117857 9.08298571,15.8945
-11.2884143,16.2205 L11.2884143,18.4285 L12.7155571,18.4285 L12.7155571,16.2205
-C13.7292714,16.0705 14.6529857,15.5907857 15.3558429,14.8933571
-L14.5601286,14.0969286 C13.8944143,14.7493571 12.9665571,15.1317857
-11.9969857,15.1317857" />
-</vector>
\ No newline at end of file
+     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.
+-->
+<vector android:height="44dp" android:viewportHeight="48.0"
+        android:viewportWidth="48.0" android:width="44dp"
+        xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#000000"
+          android:pathData="M38,22h-3.4c0,1.49 -0.31,2.87 -0.87,4.1l2.46,2.46C37.33,26.61 38,24.38 38,22zM29.97,22.33c0,-0.11 0.03,-0.22 0.03,-0.33L30,10c0,-3.32 -2.69,-6 -6,-6s-6,2.68 -6,6v0.37l11.97,11.96zM8.55,6L6,8.55l12.02,12.02v1.44c0,3.31 2.67,6 5.98,6 0.45,0 0.88,-0.06 1.3,-0.15l3.32,3.32c-1.43,0.66 -3,1.03 -4.62,1.03 -5.52,0 -10.6,-4.2 -10.6,-10.2L10,22.01c0,6.83 5.44,12.47 12,13.44L22,42h4v-6.56c1.81,-0.27 3.53,-0.9 5.08,-1.81L39.45,42 42,39.46 8.55,6z"/>
+</vector>
diff --git a/res/drawable/ic_pause.xml b/res/drawable/ic_pause.xml
index 8cdf142d..515720e1 100644
--- a/res/drawable/ic_pause.xml
+++ b/res/drawable/ic_pause.xml
@@ -13,12 +13,9 @@ 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.
 -->
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-        android:width="24dp"
-        android:height="24dp"
-        android:viewportWidth="24.0"
-        android:viewportHeight="24.0">
-    <path
-        android:fillColor="#FF000000"
-        android:pathData="M6,19h4L10,5L6,5v14zM14,5v14h4L18,5h-4z"/>
+<vector android:height="44dp" android:viewportHeight="48.0"
+        android:viewportWidth="48.0" android:width="44dp"
+        xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#000000"
+          android:pathData="M12,38h8L20,10h-8v28zM28,10v28h8L36,10h-8z"/>
 </vector>
diff --git a/res/drawable/ic_play.xml b/res/drawable/ic_play.xml
new file mode 100644
index 00000000..d0c77c1e
--- /dev/null
+++ b/res/drawable/ic_play.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2018 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.
+-->
+<vector android:height="44dp" android:viewportHeight="48.0"
+    android:viewportWidth="48.0" android:width="44dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#000000" android:pathData="M16,10v28l22,-14z"/>
+</vector>
diff --git a/res/layout/in_call_fragment.xml b/res/layout/in_call_fragment.xml
new file mode 100644
index 00000000..d425bdbc
--- /dev/null
+++ b/res/layout/in_call_fragment.xml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2018 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.
+-->
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/car_grey_200"
+    android:orientation="vertical">
+
+    <FrameLayout
+        android:id="@+id/dialer_container"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:visibility="gone"
+        android:layout_weight="1"/>
+
+    <FrameLayout
+        android:id="@+id/user_profile_container"
+        android:layout_width="match_parent"
+        android:gravity="center"
+        android:layout_height="0dp"
+        android:layout_weight="1">
+        <include layout="@layout/user_profile_large"/>
+    </FrameLayout>
+
+    <android.support.v7.widget.CardView
+        android:id="@+id/controller_bar_container"
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/car_action_bar_height"
+        android:background="@android:color/white"
+        android:layout_marginStart="@dimen/car_margin"
+        android:layout_marginEnd="@dimen/car_margin"
+        android:layout_marginBottom="@dimen/car_padding_1"
+        app:cardCornerRadius="@dimen/car_radius_3"
+        app:cardElevation="@dimen/car_action_bar_elevation"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/res/layout/on_going_call_controller_bar_fragment.xml b/res/layout/on_going_call_controller_bar_fragment.xml
index e3a42278..4728af34 100644
--- a/res/layout/on_going_call_controller_bar_fragment.xml
+++ b/res/layout/on_going_call_controller_bar_fragment.xml
@@ -17,18 +17,17 @@ limitations under the License.
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/rail"
     android:layout_width="match_parent"
-    android:layout_height="@dimen/in_call_card_height"
-    android:elevation = "@dimen/in_call_card_elevation"
-    android:background="@drawable/in_call_card_background">
+    android:layout_height="@dimen/car_action_bar_height"
+    android:background="@android:color/white"
+    android:elevation = "@dimen/in_call_card_elevation">
     <ImageView
         android:id="@+id/mute_button"
         android:layout_width="@dimen/in_call_button_size"
         android:layout_height="@dimen/in_call_button_size"
-        android:scaleType="centerCrop"
+        android:scaleType="center"
         android:src="@drawable/ic_mute"
-        android:tint="@android:color/white"
+        android:tint="@android:color/black"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toStartOf="@+id/toggle_dialpad_button"
@@ -39,9 +38,9 @@ limitations under the License.
         android:id="@+id/toggle_dialpad_button"
         android:layout_width="@dimen/in_call_button_size"
         android:layout_height="@dimen/in_call_button_size"
-        android:scaleType="centerCrop"
+        android:scaleType="center"
         android:src="@drawable/ic_dialpad"
-        android:tint="@android:color/white"
+        android:tint="@android:color/black"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@+id/mute_button"
         app:layout_constraintEnd_toStartOf="@+id/end_call_button"
@@ -52,7 +51,7 @@ limitations under the License.
         android:id="@+id/end_call_button"
         android:layout_width="@dimen/in_call_button_size"
         android:layout_height="@dimen/in_call_button_size"
-        android:scaleType="centerCrop"
+        android:scaleType="center"
         android:src="@drawable/ic_call_end"
         android:tint="@android:color/holo_red_dark"
         app:layout_constraintBottom_toBottomOf="parent"
@@ -65,9 +64,9 @@ limitations under the License.
         android:id="@+id/voice_channel_button"
         android:layout_width="@dimen/in_call_button_size"
         android:layout_height="@dimen/in_call_button_size"
-        android:scaleType="centerCrop"
+        android:scaleType="center"
         android:src="@drawable/ic_bluetooth"
-        android:tint="@android:color/white"
+        android:tint="@android:color/black"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@+id/end_call_button"
         app:layout_constraintEnd_toStartOf="@+id/pause_button"
@@ -78,9 +77,9 @@ limitations under the License.
         android:id="@+id/pause_button"
         android:layout_width="@dimen/in_call_button_size"
         android:layout_height="@dimen/in_call_button_size"
-        android:scaleType="centerCrop"
-        android:src="@drawable/ic_pause"
-        android:tint="@android:color/white"
+        android:scaleType="center"
+        android:src="@drawable/ic_call_state_switch"
+        android:tint="@android:color/black"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@+id/voice_channel_button"
         app:layout_constraintEnd_toEndOf="parent"
diff --git a/res/layout/user_profile_large.xml b/res/layout/user_profile_large.xml
new file mode 100644
index 00000000..9474144e
--- /dev/null
+++ b/res/layout/user_profile_large.xml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2018 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.
+-->
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:gravity="center"
+    android:orientation="vertical">
+
+    <ImageView
+        android:id="@+id/avatar"
+        android:layout_width="@dimen/call_log_icon_size"
+        android:layout_height="@dimen/call_log_icon_size"
+        android:layout_gravity="center"
+        android:layout_marginStart="@dimen/car_keyline_1"
+        android:scaleType="fitCenter" />
+
+    <TextView
+        android:id="@+id/title"
+        style="@style/TextAppearance.Car.Headline2"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingBottom="@dimen/car_padding_3"
+        android:focusable="true"
+        android:maxLines="1"
+        android:gravity="center"/>
+
+    <TextView
+        android:id="@+id/body"
+        style="@style/TextAppearance.Car.Body1"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingTop="@dimen/car_padding_3"
+        android:gravity="center"
+        android:maxLines="1"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/res/values-h420dp/dimens.xml b/res/values-h420dp/dimens.xml
index d2d06781..79b84622 100644
--- a/res/values-h420dp/dimens.xml
+++ b/res/values-h420dp/dimens.xml
@@ -16,7 +16,6 @@
 <resources>
     <dimen name="call_log_item_height">152dp</dimen>
     <dimen name="in_call_controls_container_height">192dp</dimen>
-    <dimen name="in_call_button_size">188dp</dimen>
     <dimen name="in_call_info_margin_top">72dp</dimen>
     <dimen name="in_call_card_dialpad_vertical_spacing">16dp</dimen>
     <dimen name="small_contact_photo_margin_end">72dp</dimen>
diff --git a/res/values-w1024dp/dimens.xml b/res/values-w1024dp/dimens.xml
index af95a8a2..5fac468a 100644
--- a/res/values-w1024dp/dimens.xml
+++ b/res/values-w1024dp/dimens.xml
@@ -28,7 +28,6 @@
     <dimen name="in_call_card_margin_right">304dp</dimen>
     <dimen name="in_call_content_card_margin_start">@dimen/car_keyline_1</dimen>
     <dimen name="in_call_text_max_width">460dp</dimen>
-    <dimen name="in_call_button_size">160dp</dimen>
     <dimen name="in_call_button_spacing">48dp</dimen>
     <dimen name="in_call_card_dialpad_width">468dp</dimen>
     <dimen name="in_call_card_dialpad_horizontal_spacing">56dp</dimen>
diff --git a/res/values-w748dp/dimens.xml b/res/values-w748dp/dimens.xml
index 045bff5b..9c2c2a83 100644
--- a/res/values-w748dp/dimens.xml
+++ b/res/values-w748dp/dimens.xml
@@ -16,7 +16,4 @@
 <resources>
     <!-- The max width of content in apps for adaptive responsive -->
     <dimen name="apps_max_content_width">748dp</dimen>
-
-    <!-- Touch Keyboard -->
-    <dimen name="in_call_button_size">116dp</dimen>
 </resources>
\ No newline at end of file
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index c008741b..e5c64480 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -93,6 +93,6 @@
     <dimen name="call_fab_elevation">8dp</dimen>
     <dimen name="bksp_button_width">@dimen/car_touch_target_size</dimen>
 
-    <dimen name="in_call_button_size">160dp</dimen>
+    <dimen name="in_call_button_size">@dimen/car_touch_target_size</dimen>
 
 </resources>
diff --git a/res/values/themes.xml b/res/values/themes.xml
index 3ad32681..bb2d9acb 100644
--- a/res/values/themes.xml
+++ b/res/values/themes.xml
@@ -19,6 +19,7 @@ limitations under the License.
         <item name="android:statusBarColor">@color/phone_status_bar_theme</item>
         <item name="android:colorPrimary">@android:color/transparent</item>
         <item name="android:colorPrimaryDark">@color/phone_status_bar_theme</item>
+        <item name="android:textColorPrimary">@android:color/black</item>
         <item name="drawerClosedHeaderColor">@color/car_title2</item>
     </style>
 
diff --git a/src/com/android/car/dialer/OngoingCallFragment.java b/src/com/android/car/dialer/OngoingCallFragment.java
index b5a59e2d..2f702448 100644
--- a/src/com/android/car/dialer/OngoingCallFragment.java
+++ b/src/com/android/car/dialer/OngoingCallFragment.java
@@ -53,6 +53,7 @@ import java.util.Objects;
 /**
  * A fragment that displays information about an on-going call with options to hang up.
  */
+@Deprecated
 public class OngoingCallFragment extends Fragment implements CallListener {
     private static final String TAG = "OngoingCall";
     private static final SparseArray<Character> mDialpadButtonMap = new SparseArray<>();
diff --git a/src/com/android/car/dialer/ui/InCallFragment.java b/src/com/android/car/dialer/ui/InCallFragment.java
new file mode 100644
index 00000000..16854691
--- /dev/null
+++ b/src/com/android/car/dialer/ui/InCallFragment.java
@@ -0,0 +1,114 @@
+/*
+ * Copyright (C) 2018 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.
+ */
+package com.android.car.dialer.ui;
+
+import android.content.res.Resources;
+import android.os.Bundle;
+import android.support.annotation.NonNull;
+import android.support.annotation.Nullable;
+import android.support.v4.app.Fragment;
+import android.telecom.Call;
+import android.text.format.DateUtils;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import com.android.car.apps.common.CircleBitmapDrawable;
+import com.android.car.dialer.BitmapWorkerTask;
+import com.android.car.dialer.R;
+import com.android.car.dialer.DialerFragment;
+import com.android.car.dialer.telecom.TelecomUtils;
+import com.android.car.dialer.telecom.UiCall;
+import com.android.car.dialer.telecom.UiCallManager;
+
+/**
+ * A fragment that displays information about an on-going call with options to hang up.
+ */
+public class InCallFragment extends Fragment implements
+        OnGoingCallControllerBarFragment.OnGoingCallControllerBarCallback {
+
+    private Fragment mDialerFragment;
+    private View mUserProfileContainerView;
+    private View mDialerFragmentContainer;
+
+    public static InCallFragment newInstance() {
+        return new InCallFragment();
+    }
+
+    @Override
+    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
+            @Nullable Bundle savedInstanceState) {
+        View fragmentView = inflater.inflate(R.layout.in_call_fragment, container, false);
+        mUserProfileContainerView = fragmentView.findViewById(R.id.user_profile_container);
+        mDialerFragmentContainer = fragmentView.findViewById(R.id.dialer_container);
+        mDialerFragment = new DialerFragment();
+
+        Fragment onGoingCallControllerBarFragment = OnGoingCallControllerBarFragment.newInstance();
+
+        getChildFragmentManager().beginTransaction()
+                .replace(R.id.controller_bar_container, onGoingCallControllerBarFragment)
+                .commit();
+        bindUserProfileView(fragmentView.findViewById(R.id.user_profile_container));
+        return fragmentView;
+    }
+
+    @Override
+    public void onOpenDialpad() {
+        mDialerFragment = new DialerFragment();
+        getChildFragmentManager().beginTransaction()
+                .replace(R.id.dialer_container, mDialerFragment)
+                .commit();
+        mDialerFragmentContainer.setVisibility(View.VISIBLE);
+        mUserProfileContainerView.setVisibility(View.GONE);
+    }
+
+    @Override
+    public void onCloseDialpad() {
+        getFragmentManager().beginTransaction()
+                .remove(mDialerFragment)
+                .commit();
+        mDialerFragmentContainer.setVisibility(View.GONE);
+        mUserProfileContainerView.setVisibility(View.VISIBLE);
+    }
+
+    private void bindUserProfileView(View container) {
+        UiCall primaryCall = UiCallManager.get().getPrimaryCall();
+        if (primaryCall == null) {
+            return;
+        }
+        String number = primaryCall.getNumber();
+        ImageView avatar = container.findViewById(R.id.avatar);
+        BitmapWorkerTask.BitmapRunnable runnable = new BitmapWorkerTask.BitmapRunnable() {
+            @Override
+            public void run() {
+                if (mBitmap != null) {
+                    Resources r = getResources();
+                    avatar.setImageDrawable(new CircleBitmapDrawable(r, mBitmap));
+                    avatar.setImageBitmap(mBitmap);
+                    avatar.clearColorFilter();
+                } else {
+                    avatar.setImageResource(R.drawable.logo_avatar);
+                    avatar.setImageResource(R.drawable.ic_avatar_bg);
+                }
+            }
+        };
+        BitmapWorkerTask.loadBitmap(getContext().getContentResolver(), avatar, number, runnable);
+        TextView nameView = container.findViewById(R.id.title);
+        nameView.setText(TelecomUtils.getDisplayName(getContext(), primaryCall));
+    }
+}
diff --git a/src/com/android/car/dialer/ui/OnGoingCallControllerBarFragment.java b/src/com/android/car/dialer/ui/OnGoingCallControllerBarFragment.java
index f34b936f..fc85b581 100644
--- a/src/com/android/car/dialer/ui/OnGoingCallControllerBarFragment.java
+++ b/src/com/android/car/dialer/ui/OnGoingCallControllerBarFragment.java
@@ -24,6 +24,8 @@ import android.view.View;
 import android.view.ViewGroup;
 
 import com.android.car.dialer.R;
+import com.android.car.dialer.telecom.UiCall;
+import com.android.car.dialer.telecom.UiCallManager;
 
 /**
  * A Fragment of the bar which controls on going call. Its host or parent Fragment is expected to
@@ -39,21 +41,9 @@ public class OnGoingCallControllerBarFragment extends Fragment {
      * Callback for control bar buttons.
      */
     public interface OnGoingCallControllerBarCallback {
-        void onEndCall();
-
         void onOpenDialpad();
 
         void onCloseDialpad();
-
-        void onMuteMic();
-
-        void onUnmuteMic();
-
-        void onPauseCall();
-
-        void onResumeCall();
-
-        void onVoiceOutputChannelChanged(int channel);
     }
 
     private OnGoingCallControllerBarCallback mOnGoingCallControllerBarCallback;
@@ -81,9 +71,11 @@ public class OnGoingCallControllerBarFragment extends Fragment {
                 return;
             }
             if (v.isActivated()) {
-                mOnGoingCallControllerBarCallback.onMuteMic();
+                v.setActivated(false);
+                onMuteMic();
             } else {
-                mOnGoingCallControllerBarCallback.onUnmuteMic();
+                v.setActivated(true);
+                onUnmuteMic();
             }
         });
 
@@ -92,8 +84,10 @@ public class OnGoingCallControllerBarFragment extends Fragment {
                 return;
             }
             if (v.isActivated()) {
+                v.setActivated(false);
                 mOnGoingCallControllerBarCallback.onCloseDialpad();
             } else {
+                v.setActivated(true);
                 mOnGoingCallControllerBarCallback.onOpenDialpad();
             }
         });
@@ -102,7 +96,7 @@ public class OnGoingCallControllerBarFragment extends Fragment {
             if (mOnGoingCallControllerBarCallback == null) {
                 return;
             }
-            mOnGoingCallControllerBarCallback.onEndCall();
+            onEndCall();
         });
 
         fragmentView.findViewById(R.id.voice_channel_button).setOnClickListener((v) -> {
@@ -113,11 +107,43 @@ public class OnGoingCallControllerBarFragment extends Fragment {
                 return;
             }
             if (v.isActivated()) {
-                mOnGoingCallControllerBarCallback.onPauseCall();
+                v.setActivated(false);
+                onHoldCall();
             } else {
-                mOnGoingCallControllerBarCallback.onResumeCall();
+                v.setActivated(true);
+                onUnholdCall();
             }
         });
         return fragmentView;
     }
-}
+
+    private void onMuteMic() {
+        UiCallManager.get().setMuted(true);
+    }
+
+    private void onUnmuteMic() {
+        UiCallManager.get().setMuted(false);
+    }
+
+    private void onHoldCall() {
+        UiCallManager uiCallManager = UiCallManager.get();
+        UiCall primaryCall = UiCallManager.get().getPrimaryCall();
+        uiCallManager.holdCall(primaryCall);
+    }
+
+    private void onUnholdCall() {
+        UiCallManager uiCallManager = UiCallManager.get();
+        UiCall primaryCall = UiCallManager.get().getPrimaryCall();
+        uiCallManager.unholdCall(primaryCall);
+    }
+
+    private void onVoiceOutputChannelChanged(int channel) {
+        // TODO: implement this function.
+    }
+
+    private void onEndCall() {
+        UiCallManager uiCallManager = UiCallManager.get();
+        UiCall primaryCall = UiCallManager.get().getPrimaryCall();
+        uiCallManager.disconnectCall(primaryCall);
+    }
+}
\ No newline at end of file