New appearance and look and feel for dialpad.

Bug: 13189041
Change-Id: I91028c8fdee31c1f76610573a4396eb979c30170

15 files changed, 378 insertions, 360 deletions

diff --git a/res/drawable-hdpi/ic_dial_action_delete.png b/res/drawable-hdpi/ic_dial_action_delete.png
index 0bf8563cc..ebf692a4f 100644
--- a/res/drawable-hdpi/ic_dial_action_delete.png
+++ b/res/drawable-hdpi/ic_dial_action_delete.png
diff --git a/res/drawable-mdpi/ic_dial_action_delete.png b/res/drawable-mdpi/ic_dial_action_delete.png
index 98341e984..e1394c5d6 100644
--- a/res/drawable-mdpi/ic_dial_action_delete.png
+++ b/res/drawable-mdpi/ic_dial_action_delete.png
diff --git a/res/drawable-xhdpi/ic_dial_action_delete.png b/res/drawable-xhdpi/ic_dial_action_delete.png
index 989e8b1ab..6788669a7 100644
--- a/res/drawable-xhdpi/ic_dial_action_delete.png
+++ b/res/drawable-xhdpi/ic_dial_action_delete.png
diff --git a/res/drawable-xxhdpi/ic_dial_action_delete.png b/res/drawable-xxhdpi/ic_dial_action_delete.png
index a7ff1b1ee..ca91a7283 100644
--- a/res/drawable-xxhdpi/ic_dial_action_delete.png
+++ b/res/drawable-xxhdpi/ic_dial_action_delete.png
diff --git a/res/drawable/dialpad_key_colors.xml b/res/drawable/dialpad_key_colors.xml
new file mode 100644
index 000000000..27b4d4fc5
--- /dev/null
+++ b/res/drawable/dialpad_key_colors.xml
@@ -0,0 +1,22 @@
+<?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.
+-->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item
+        android:state_pressed="true"
+        android:drawable="@color/background_dialpad_pressed" />
+    <item android:drawable="@color/background_dialpad" />
+</selector>
diff --git a/res/layout/dialpad.xml b/res/layout/dialpad.xml
index 4fc3e8382..c3db42094 100644
--- a/res/layout/dialpad.xml
+++ b/res/layout/dialpad.xml
@@ -19,42 +19,26 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/dialpad"
     android:layout_width="match_parent"
-    android:layout_height="0px"
-    android:layout_weight="@integer/dialpad_layout_weight_dialpad"
-    android:layout_gravity="center_horizontal"
-    android:layout_marginTop="@dimen/dialpad_vertical_margin"
-    android:paddingStart="5dip"
-    android:paddingEnd="5dip"
-    android:paddingBottom="10dip"
-    android:stretchColumns="0,1,2"
+    android:layout_height="wrap_content"
+    android:paddingLeft="5dp"
+    android:paddingRight="5dp"
+    android:background="@android:color/transparent"
+    android:stretchColumns="*"
     android:layoutDirection="ltr" >
 
-    <TableRow
-        android:layout_height="0px"
-        android:layout_weight="1">
+    <TableRow>
         <com.android.dialer.dialpad.DialpadKeyButton
-            xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/one"
-            style="@style/DialtactsDialpadButtonStyle"
-            android:clickable="true"
-            android:focusable="true" >
+            style="@style/DialpadKeyButtonStyle">
             <LinearLayout
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center" >
+                style="@style/DialpadKeyInternalLayoutStyle">
                 <TextView
                     android:id="@+id/dialpad_key_number"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:textColor="@color/dialpad_primary_text_color"
-                    android:textSize="@dimen/dialpad_key_numbers_size"
-                    android:fontFamily="sans-serif-light"/>
+                    style="@style/DialpadKeyNumberStyle"/>
                 <ImageView
                     android:id="@+id/dialpad_key_voicemail"
-                    android:layout_width="@dimen/dialpad_key_letters_width"
-                    android:layout_height="wrap_content"
+                    style="@style/DialpadKeyLettersStyle"
                     android:src="@drawable/ic_dial_action_vm"
-                    android:paddingLeft="11dp"
                     android:scaleType="fitStart"
                     android:baselineAlignBottom="true" />
             </LinearLayout>
@@ -63,57 +47,45 @@
         <include layout="@layout/dialpad_key" android:id="@+id/three"/>
     </TableRow>
 
-    <TableRow
-        android:layout_height="0px"
-        android:layout_weight="1">
+    <TableRow>
         <include layout="@layout/dialpad_key" android:id="@+id/four"/>
         <include layout="@layout/dialpad_key" android:id="@+id/five"/>
         <include layout="@layout/dialpad_key" android:id="@+id/six"/>
     </TableRow>
 
-    <TableRow
-        android:layout_height="0px"
-        android:layout_weight="1">
+    <TableRow>
         <include layout="@layout/dialpad_key" android:id="@+id/seven"/>
         <include layout="@layout/dialpad_key" android:id="@+id/eight"/>
         <include layout="@layout/dialpad_key" android:id="@+id/nine"/>
     </TableRow>
 
-    <TableRow
-        android:layout_height="0px"
-        android:layout_weight="1">
+    <TableRow>
         <com.android.dialer.dialpad.DialpadKeyButton
-            xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/star"
-            style="@style/DialtactsDialpadButtonStyle"
-            android:clickable="true"
-            android:focusable="true" >
-            <TextView
-                android:id="@id/dialpad_key_number"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:textColor="@color/dialpad_secondary_text_color"
-                android:textSize="@dimen/dialpad_key_special_characters_size"
-                android:fontFamily="sans-serif-light"
-                android:paddingRight="@dimen/dialpad_key_letters_width"
-                android:layout_gravity="center" />
+            style="@style/DialpadKeyButtonStyle">
+            <LinearLayout
+                style="@style/DialpadKeyInternalLayoutStyle">
+                <TextView
+                    android:id="@id/dialpad_key_number"
+                    style="@style/DialpadKeyStarPoundStyle" />
+                <View
+                    android:layout_height="match_parent"
+                    android:layout_width="@dimen/dialpad_key_letters_width" />
+            </LinearLayout>
         </com.android.dialer.dialpad.DialpadKeyButton>
         <include layout="@layout/dialpad_key" android:id="@+id/zero"/>
         <com.android.dialer.dialpad.DialpadKeyButton
-            xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/pound"
-            style="@style/DialtactsDialpadButtonStyle"
-            android:clickable="true"
-            android:focusable="true" >
-            <TextView
-                android:id="@id/dialpad_key_number"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:textColor="@color/dialpad_secondary_text_color"
-                android:textSize="@dimen/dialpad_key_special_characters_size"
-                android:fontFamily="sans-serif-light"
-                android:paddingRight="@dimen/dialpad_key_letters_width"
-                android:layout_gravity="center" />
+            style="@style/DialpadKeyButtonStyle">
+            <LinearLayout
+                style="@style/DialpadKeyInternalLayoutStyle">
+                <TextView
+                    android:id="@id/dialpad_key_number"
+                    style="@style/DialpadKeyStarPoundStyle" />
+                <View
+                    android:layout_height="match_parent"
+                    android:layout_width="@dimen/dialpad_key_letters_width" />
+            </LinearLayout>
         </com.android.dialer.dialpad.DialpadKeyButton>
     </TableRow>
 </TableLayout>
diff --git a/res/layout/dialpad_chooser_list_item.xml b/res/layout/dialpad_chooser_list_item.xml
index 5ba88ca54..9a4903698 100644
--- a/res/layout/dialpad_chooser_list_item.xml
+++ b/res/layout/dialpad_chooser_list_item.xml
@@ -27,7 +27,7 @@
 
     <TextView android:id="@+id/text"
         android:textAppearance="?android:attr/textAppearanceMedium"
-        android:textColor="@color/dialpad_text_color"
+        android:textColor="@color/dialpad_primary_text_color"
         android:layout_gravity="center_vertical"
         android:layout_width="0dip"
         android:layout_weight="1"
diff --git a/res/layout/dialpad_digits.xml b/res/layout/dialpad_digits.xml
new file mode 100644
index 000000000..21638f0c0
--- /dev/null
+++ b/res/layout/dialpad_digits.xml
@@ -0,0 +1,58 @@
+<?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.
+-->
+
+<!-- Text field and possibly soft menu button above the keypad where
+     the digits are displayed. -->
+
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/digits_container"
+    android:layout_width="match_parent"
+    android:layout_height="@dimen/dialpad_digits_height"
+    android:orientation="horizontal">
+
+    <view class="com.android.dialer.dialpad.DigitsEditText"
+        android:id="@+id/digits"
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:paddingLeft="@dimen/dialpad_digits_padding"
+        android:scrollHorizontally="true"
+        android:singleLine="true"
+        android:layout_weight="1"
+        android:gravity="center"
+        android:background="@android:color/transparent"
+        android:maxLines="1"
+        android:textSize="@dimen/dialpad_digits_text_size"
+        android:freezesText="true"
+        android:focusableInTouchMode="true"
+        android:editable="true"
+        android:cursorVisible="false"
+        android:textColor="@color/dialpad_digits_text_color"
+        android:textCursorDrawable="@null"
+        android:fontFamily="sans-serif-light"
+        android:textStyle="normal" />
+
+    <ImageButton
+        android:id="@+id/deleteButton"
+        android:paddingLeft="@dimen/dialpad_digits_padding"
+        android:paddingRight="@dimen/dialpad_digits_padding"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:state_enabled="false"
+        android:background="@drawable/dialpad_key_colors"
+        android:contentDescription="@string/description_delete_button"
+        android:src="@drawable/ic_dial_action_delete" />
+</LinearLayout>
diff --git a/res/layout/dialpad_fragment.xml b/res/layout/dialpad_fragment.xml
index e673cea98..239f72774 100644
--- a/res/layout/dialpad_fragment.xml
+++ b/res/layout/dialpad_fragment.xml
@@ -16,103 +16,51 @@
 <view class="com.android.dialer.dialpad.DialpadFragment$DialpadSlidingLinearLayout"
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    android:layout_height="wrap_content"
     android:orientation="vertical" >
     <!-- spacer view -->
     <View
         android:id="@+id/spacer"
         android:layout_width="match_parent"
         android:layout_height="0dp"
-        android:layout_weight="1" />
+        android:layout_weight="1"
+        android:background="#00000000" />
+
     <view class="com.android.dialer.dialpad.DialpadFragment$HoverIgnoringLinearLayout"
         android:id="@+id/top"
+        android:animateLayoutChanges="true"
+        android:layout_height="wrap_content"
         android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:layout_weight="2"
+        android:layout_gravity="bottom"
         android:orientation="vertical"
-        android:paddingStart="@dimen/dialpad_horizontal_margin"
-        android:paddingEnd="@dimen/dialpad_horizontal_margin"
         android:layoutDirection="ltr"
-        android:background="@color/background_dialpad" >
+        android:background="@color/background_dialpad">
 
+        <Space
+            android:layout_width="match_parent"
+            android:layout_height="2dp"
+            android:background="@color/dialpad_separator_line_color" />
 
-        <!-- Text field and possibly soft menu button above the keypad where
-             the digits are displayed. -->
-        <LinearLayout
-            android:id="@+id/digits_container"
+        <Space
             android:layout_width="match_parent"
-            android:layout_height="0px"
-            android:layout_weight="@integer/dialpad_layout_weight_digits"
-            android:layout_marginTop="@dimen/dialpad_vertical_margin"
-            android:gravity="center" >
+            android:layout_height="10dp" />
 
-            <com.android.dialer.dialpad.DigitsEditText
-                android:id="@+id/digits"
-                android:layout_width="0dip"
-                android:layout_weight="1"
-                android:layout_height="match_parent"
-                android:paddingLeft="10dp"
-                android:gravity="center"
-                android:scrollHorizontally="true"
-                android:singleLine="true"
-                android:textAppearance="@style/DialtactsDigitsTextAppearance"
-                android:textColor="@color/dialpad_text_color"
-                android:textCursorDrawable="@null"
-                android:fontFamily="sans-serif-light"
-                android:nextFocusRight="@+id/overflow_menu"
-                android:background="@android:color/transparent" />
+        <include layout="@layout/dialpad_digits"/>
 
-            <ImageButton
-                android:id="@+id/deleteButton"
-                android:layout_width="56dip"
-                android:layout_height="match_parent"
-                android:layout_gravity="center_vertical"
-                android:gravity="center"
-                android:state_enabled="false"
-                android:background="?android:attr/selectableItemBackground"
-                android:contentDescription="@string/description_delete_button"
-                android:src="@drawable/ic_dial_action_delete" />
-        </LinearLayout>
+        <Space
+            android:layout_width="match_parent"
+            android:layout_height="8dp" />
 
-        <!-- Keypad section -->
         <include layout="@layout/dialpad" />
 
-        <View style="@style/DialpadHorizontalSeparator"/>
+        <Space
+            android:layout_width="match_parent"
+            android:layout_height="8dp" />
 
-        <LinearLayout
-            android:id="@+id/dialButtonContainer"
+        <Space
             android:layout_width="match_parent"
-            android:layout_height="@dimen/fake_action_bar_height"
-            android:layout_gravity="center_horizontal"
-            android:background="@color/dialpad_primary_text_color"
-            android:layoutDirection="locale">
-            <ImageButton
-                android:id="@+id/call_history_on_dialpad_button"
-                android:layout_height="match_parent"
-                android:layout_width="@dimen/fake_menu_button_min_width"
-                android:layout_gravity="bottom|start"
-                android:background="@drawable/btn_call"
-                android:contentDescription="@string/action_menu_call_history_description"
-                android:src="@drawable/ic_menu_history_lt"/>
-            <ImageButton
-                android:id="@+id/dialButton"
-                android:layout_width="0dp"
-                android:layout_weight="1"
-                android:layout_height="match_parent"
-                android:layout_gravity="center"
-                android:state_enabled="false"
-                android:background="@drawable/btn_call"
-                android:contentDescription="@string/description_dial_button"
-                android:src="@drawable/ic_dial_action_call" />
-            <ImageButton
-                android:id="@+id/overflow_menu_on_dialpad"
-                android:layout_height="match_parent"
-                android:layout_width="@dimen/fake_menu_button_min_width"
-                android:layout_gravity="bottom|end"
-                android:background="@drawable/btn_call"
-                android:src="@drawable/ic_menu_overflow_lt"
-                android:contentDescription="@string/action_menu_overflow_description" />
-        </LinearLayout>
+            android:layout_height="2dp"
+            android:background="@color/dialpad_separator_line_color" />
 
         <!-- "Dialpad chooser" UI, shown only when the user brings up the
              Dialer while a call is already in progress.
@@ -120,9 +68,9 @@
              (the textfield/button and the dialpad) are hidden. -->
         <ListView android:id="@+id/dialpadChooser"
             android:layout_width="match_parent"
-            android:layout_height="1dip"
+            android:layout_height="wrap_content"
             android:layout_weight="1"
-        />
+            android:visibility="gone" />
 
     </view>
 </view>
diff --git a/res/layout/dialpad_key.xml b/res/layout/dialpad_key.xml
index c104f8acc..5bf858c43 100644
--- a/res/layout/dialpad_key.xml
+++ b/res/layout/dialpad_key.xml
@@ -17,29 +17,19 @@
 <!-- A layout representing a single key in the dialpad -->
 <com.android.dialer.dialpad.DialpadKeyButton
     xmlns:android="http://schemas.android.com/apk/res/android"
-    style="@style/DialtactsDialpadButtonStyle"
-    android:clickable="true"
-    android:focusable="true" >
-    <LinearLayout
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center">
-      <TextView
-          android:id="@+id/dialpad_key_number"
-          android:layout_width="wrap_content"
-          android:layout_height="wrap_content"
-          android:textColor="@color/dialpad_primary_text_color"
-          android:textSize="@dimen/dialpad_key_numbers_size"
-          android:fontFamily="sans-serif-light"
-          />
-      <TextView
-          android:id="@+id/dialpad_key_letters"
-          android:layout_width="@dimen/dialpad_key_letters_width"
-          android:layout_height="wrap_content"
-          android:textColor="@color/dialpad_secondary_text_color"
-          android:textSize="@dimen/dialpad_key_letters_size"
-          android:paddingLeft="11dp"
-          android:fontFamily="sans-serif-light"
-          />
+    style="@style/DialpadKeyButtonStyle">
+
+    <LinearLayout style="@style/DialpadKeyInternalLayoutStyle">
+
+        <!-- Note in the referenced styles that we assign hard widths to these components
+             because we want them to line up vertically when we arrange them in an MxN grid -->
+
+        <TextView
+            android:id="@+id/dialpad_key_number"
+            style="@style/DialpadKeyNumberStyle" />
+
+        <TextView
+            android:id="@+id/dialpad_key_letters"
+            style="@style/DialpadKeyLettersStyle" />
     </LinearLayout>
 </com.android.dialer.dialpad.DialpadKeyButton>
\ No newline at end of file
diff --git a/res/layout/dialtacts_activity.xml b/res/layout/dialtacts_activity.xml
index 1a1a0b099..21f84bbfa 100644
--- a/res/layout/dialtacts_activity.xml
+++ b/res/layout/dialtacts_activity.xml
@@ -13,159 +13,173 @@
      See the License for the specific language governing permissions and
      limitations under the License.
 -->
-<FrameLayout
+<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:focusable="true"
+    android:orientation="vertical"
     android:focusableInTouchMode="true"
     android:clipChildren="false"
-    android:id="@+id/dialtacts_container"
     >
-    <!-- Overlapping dialpad fragment is inserted here -->
-    <LinearLayout
+
+    <FrameLayout
+        android:id="@+id/dialtacts_container"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:clipChildren="false"
-        android:orientation="vertical" >
-        <FrameLayout
+        android:layout_height="0dp"
+        android:layout_weight="1">
+
+        <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            >
-            <LinearLayout
+            android:layout_height="match_parent"
+            android:clipChildren="false"
+            android:orientation="vertical" >
+
+            <!-- Search entry box and remove view -->
+            <FrameLayout
                 android:layout_width="match_parent"
-                android:layout_height="@dimen/search_box_height"
-                android:id="@+id/search_view_container"
-                android:orientation="horizontal"
-                android:layout_marginTop="@dimen/search_top_margin"
-                android:layout_marginBottom="@dimen/search_bottom_margin"
-                android:layout_marginLeft="@dimen/search_margin_horizontal"
-                android:layout_marginRight="@dimen/search_margin_horizontal"
-                android:paddingLeft="@dimen/search_box_left_padding"
-                android:paddingRight="@dimen/search_box_right_padding"
-                android:background="@drawable/search_bg"
-                android:gravity="center_vertical"
+                android:layout_height="wrap_content"
                 >
-                <EditText
-                    android:id="@+id/search_view"
+                <LinearLayout
                     android:layout_width="match_parent"
-                    android:layout_height="@dimen/search_box_icon_size"
-                    android:layout_weight="1"
-                    android:layout_marginLeft="@dimen/search_box_text_left_margin"
-                    android:textSize="@dimen/search_text_size"
-                    android:fontFamily="@string/search_font_family"
-                    android:textColor="@color/searchbox_text_color"
-                    android:inputType="textFilter"/>
-                <ImageView
-                    android:id="@+id/search_close_button"
-                    android:layout_height="@dimen/search_box_icon_size"
-                    android:layout_width="@dimen/search_box_icon_size"
-                    android:padding="6dp"
-                    android:src="@drawable/ic_close_dk"
-                    android:clickable="true"
-                    android:background="?android:attr/selectableItemBackground"
-                    android:contentDescription="@string/description_clear_search"
-                    android:visibility="gone" />
-                <ImageView
-                    android:id="@+id/voice_search_button"
-                    android:layout_height="@dimen/search_box_icon_size"
-                    android:layout_width="@dimen/search_box_icon_size"
-                    android:padding="@dimen/search_box_icon_padding"
-                    android:src="@drawable/ic_voice_search"
-                    android:clickable="true"
-                    android:contentDescription="@string/description_start_voice_search"
-                    android:background="?android:attr/selectableItemBackground" />
-            </LinearLayout>
-            <com.android.dialer.list.RemoveView
-                android:layout_width="match_parent"
-                android:layout_height="56dp"
-                android:id="@+id/remove_view_container"
-                android:orientation="horizontal"
-                android:gravity="center"
-                android:visibility="gone">
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:id="@+id/remove_view_icon"
-                    android:src="@drawable/ic_remove"
-                    android:contentDescription="@string/remove_contact"
-                />
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:id="@+id/remove_view_text"
-                    android:textSize="@dimen/remove_text_size"
-                    android:textColor="@color/remove_text_color"
-                    android:text="@string/remove_contact"
-                />
-            </com.android.dialer.list.RemoveView>
-        </FrameLayout>
-
-        <!-- Relative Layout is used to contain the main contacts grid and the thin translucent
-             horizontal divider line at the bottom of the contacts grid above the menu bar. -->
-        <RelativeLayout android:layout_width="match_parent"
-                        android:layout_height="0dp"
+                    android:layout_height="@dimen/search_box_height"
+                    android:id="@+id/search_view_container"
+                    android:orientation="horizontal"
+                    android:layout_marginTop="@dimen/search_top_margin"
+                    android:layout_marginBottom="@dimen/search_bottom_margin"
+                    android:layout_marginLeft="@dimen/search_margin_horizontal"
+                    android:layout_marginRight="@dimen/search_margin_horizontal"
+                    android:paddingLeft="@dimen/search_box_left_padding"
+                    android:paddingRight="@dimen/search_box_right_padding"
+                    android:background="@drawable/search_bg"
+                    android:gravity="center_vertical"
+                    >
+                    <EditText
+                        android:id="@+id/search_view"
+                        android:layout_width="match_parent"
+                        android:layout_height="@dimen/search_box_icon_size"
                         android:layout_weight="1"
-                        android:clipChildren="false"
-            >
-            <!-- The main contacts grid -->
-            <FrameLayout
-                android:layout_height="match_parent"
-                android:layout_width="match_parent"
-                android:id="@+id/dialtacts_frame"
+                        android:layout_marginLeft="@dimen/search_box_text_left_margin"
+                        android:textSize="@dimen/search_text_size"
+                        android:fontFamily="@string/search_font_family"
+                        android:textColor="@color/searchbox_text_color"
+                        android:inputType="textFilter"/>
+                    <ImageView
+                        android:id="@+id/search_close_button"
+                        android:layout_height="@dimen/search_box_icon_size"
+                        android:layout_width="@dimen/search_box_icon_size"
+                        android:padding="6dp"
+                        android:src="@drawable/ic_close_dk"
+                        android:clickable="true"
+                        android:background="?android:attr/selectableItemBackground"
+                        android:contentDescription="@string/description_clear_search"
+                        android:visibility="gone" />
+                    <ImageView
+                        android:id="@+id/voice_search_button"
+                        android:layout_height="@dimen/search_box_icon_size"
+                        android:layout_width="@dimen/search_box_icon_size"
+                        android:padding="@dimen/search_box_icon_padding"
+                        android:src="@drawable/ic_voice_search"
+                        android:clickable="true"
+                        android:contentDescription="@string/description_start_voice_search"
+                        android:background="?android:attr/selectableItemBackground" />
+                </LinearLayout>
+                <com.android.dialer.list.RemoveView
+                    android:layout_width="match_parent"
+                    android:layout_height="56dp"
+                    android:id="@+id/remove_view_container"
+                    android:orientation="horizontal"
+                    android:gravity="center"
+                    android:visibility="gone">
+                    <ImageView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:id="@+id/remove_view_icon"
+                        android:src="@drawable/ic_remove"
+                        android:contentDescription="@string/remove_contact"
+                        />
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:id="@+id/remove_view_text"
+                        android:textSize="@dimen/remove_text_size"
+                        android:textColor="@color/remove_text_color"
+                        android:text="@string/remove_contact"
+                        />
+                </com.android.dialer.list.RemoveView>
+            </FrameLayout>
+
+            <!-- Relative Layout is used to contain the main contacts grid and the thin translucent
+                 horizontal divider line at the bottom of the contacts grid above the menu bar. -->
+            <RelativeLayout android:layout_width="match_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
                 android:clipChildren="false"
-                android:layout_alignParentBottom="true"
-                android:layout_alignParentTop="true"
-                android:layout_alignParentLeft="true"
-                android:layout_alignParentRight="true"
                 >
-            </FrameLayout>
-            <!-- Thin translucent horizontal line at the bottom of the contacts grid. Floats above
-                 the contacts grid and has a translucent color. -->
-            <View
-                android:layout_height="2dp"
-                android:layout_width="match_parent"
-                android:background="@color/contacts_grid_bottom_border_color"
-                android:layout_alignParentBottom="true"
-                android:layout_alignParentLeft="true"
-                android:layout_alignParentRight="true"
-                />
-        </RelativeLayout>
+                <!-- The main contacts grid -->
+                <FrameLayout
+                    android:layout_height="match_parent"
+                    android:layout_width="match_parent"
+                    android:id="@+id/dialtacts_frame"
+                    android:clipChildren="false"
+                    android:layout_alignParentBottom="true"
+                    android:layout_alignParentTop="true"
+                    android:layout_alignParentLeft="true"
+                    android:layout_alignParentRight="true"
+                    >
+                </FrameLayout>
+                <!-- Thin translucent horizontal line at the bottom of the contacts grid. Floats
+                     above the contacts grid and has a translucent color. -->
+                <View
+                    android:layout_height="2dp"
+                    android:layout_width="match_parent"
+                    android:background="@color/contacts_grid_bottom_border_color"
+                    android:layout_alignParentBottom="true"
+                    android:layout_alignParentLeft="true"
+                    android:layout_alignParentRight="true"
+                    />
+            </RelativeLayout>
+        </LinearLayout>
+    </FrameLayout>
 
-        <FrameLayout
-            android:layout_height="@dimen/fake_action_bar_height"
-            android:layout_width="match_parent"
-            android:id="@+id/fake_action_bar"
-            android:background="@color/actionbar_background_color">
-            <ImageButton
-                android:id="@+id/call_history_button"
-                android:layout_width="@dimen/fake_menu_button_min_width"
-                android:layout_height="match_parent"
-                android:layout_gravity="bottom|start"
-                android:background="?android:attr/selectableItemBackground"
-                android:contentDescription="@string/action_menu_call_history_description"
-                android:src="@drawable/ic_menu_history_lt"/>
-            <ImageButton
-                android:id="@+id/dialpad_button"
-                android:layout_width="@dimen/fake_menu_button_min_width"
-                android:layout_height="match_parent"
-                android:layout_gravity="bottom|center"
-                android:background="?android:attr/selectableItemBackground"
-                android:contentDescription="@string/action_menu_dialpad_button"
-                android:src="@drawable/ic_menu_dialpad_lt"/>
-            <ImageButton
-                 android:id="@+id/overflow_menu"
-                 android:layout_width="@dimen/fake_menu_button_min_width"
-                 android:layout_height="match_parent"
-                 android:layout_gravity="bottom|end"
-                 android:src="@drawable/ic_menu_overflow_lt"
-                 android:contentDescription="@string/action_menu_overflow_description"
-                 android:background="?android:attr/selectableItemBackground"/>
-        </FrameLayout>
-        <View
-            android:id="@+id/dialtacts_bottom_padding"
-            android:layout_width="match_parent"
-            android:layout_height="?android:attr/actionBarSize"
+    <!-- Fake action bar -->
+    <FrameLayout
+        android:layout_height="@dimen/fake_action_bar_height"
+        android:layout_width="match_parent"
+        android:id="@+id/fake_action_bar"
+        android:background="@color/actionbar_background_color">
+        <ImageButton
+            android:id="@+id/call_history_button"
+            android:layout_width="@dimen/fake_menu_button_min_width"
+            android:layout_height="match_parent"
+            android:layout_gravity="bottom|start"
+            android:background="?android:attr/selectableItemBackground"
+            android:contentDescription="@string/action_menu_call_history_description"
+            android:src="@drawable/ic_menu_history_lt"/>
+        <ImageButton
+            android:id="@+id/dialpad_button"
+            android:layout_width="@dimen/fake_menu_button_min_width"
+            android:layout_height="match_parent"
+            android:layout_gravity="bottom|center"
+            android:background="?android:attr/selectableItemBackground"
+            android:contentDescription="@string/action_menu_dialpad_button"
+            android:src="@drawable/ic_menu_dialpad_lt"/>
+        <ImageButton
+            android:id="@+id/dial_button"
+            android:layout_width="@dimen/fake_menu_button_min_width"
+            android:layout_height="match_parent"
+            android:layout_gravity="bottom|center"
+            android:background="@drawable/btn_call"
+            android:contentDescription="@string/description_dial_button"
+            android:src="@drawable/ic_dial_action_call"
             android:visibility="gone" />
-    </LinearLayout>
-</FrameLayout>
+        <ImageButton
+            android:id="@+id/overflow_menu"
+            android:layout_width="@dimen/fake_menu_button_min_width"
+            android:layout_height="match_parent"
+            android:layout_gravity="bottom|end"
+            android:src="@drawable/ic_menu_overflow_lt"
+            android:contentDescription="@string/action_menu_overflow_description"
+            android:background="?android:attr/selectableItemBackground"/>
+    </FrameLayout>
+</LinearLayout>
diff --git a/res/values/colors.xml b/res/values/colors.xml
index 431f1bdec..5de0e02c0 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -19,7 +19,19 @@
     <!-- Secondary text color in the Phone app -->
     <color name="dialtacts_primary_text_color">#000000</color>
     <color name="dialtacts_secondary_text_color">#888888</color>
-    <color name="dialpad_text_color">#ffffff</color>
+
+    <!-- Background color of dialpad -->
+    <color name="background_dialpad">#ffffff</color>
+    <!-- Pressed color of dialpad buttons -->
+    <color name="background_dialpad_pressed">#ececec</color>
+    <!-- Primary color of dialpad text, including the call button -->
+    <color name="dialpad_primary_text_color">#3B77E7</color>
+    <!-- Secondary color of dialpad text (used for the letters corresponding to each digit -->
+    <color name="dialpad_secondary_text_color">#8b8b8b</color>
+    <!-- Color of dialpad digits -->
+    <color name="dialpad_digits_text_color">#000000</color>
+    <!-- Color for dialpad separator lines -->
+    <color name="dialpad_separator_line_color">#dadada</color>
 
     <!-- Color of the text describing an unconsumed missed call. -->
     <color name="call_log_missed_call_highlight_color">#FF0000</color>
@@ -45,14 +57,6 @@
     <!-- Background color of dialer list items (contacts, call log entries) -->
     <color name="background_dialer_list_items">#eeeeee</color>
 
-    <!-- Background color of new dialpad -->
-    <color name="background_dialpad">#f2020709</color>
-
-    <!-- Primary color of dialpad text, including the call button -->
-    <color name="dialpad_primary_text_color">#33b5e5</color>
-    <!-- Secondary color of dialpad text (used for the letters corresponding to each digit -->
-    <color name="dialpad_secondary_text_color">#aaaaaa</color>
-
     <!-- Background color of action bars -->
     <color name="actionbar_background_color">#3B77E7</color>
 
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 24ee2e037..6e563c1c5 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -16,18 +16,8 @@
 -->
 <resources>
 
-    <!-- Height of edit text in dialpad fragment -->
-    <dimen name="dialpad_horizontal_margin">0dip</dimen>
-    <dimen name="dialpad_vertical_margin">2dip</dimen>
-    <dimen name="dialpad_digits_text_size">35sp</dimen>
-
-    <!-- Just used in landscape mode -->
-    <dimen name="dialpad_digits_height">0px</dimen>
-    <dimen name="dialpad_digits_margin_bottom">0px</dimen>
-    <dimen name="dialpad_center_margin">3dp</dimen>
-    <dimen name="dialpad_button_margin">2dp</dimen>
-    <!-- Match call_button_height to Phone's dimens/in_call_end_button_height -->
-    <dimen name="call_button_height">74dp</dimen>
+    <!--  Search View -->
+    <dimen name="search_text_size">14sp</dimen>
 
     <!--
           Drag to remove view (in dp because it is used in conjunction with a statically
@@ -54,20 +44,25 @@
          the main area of a call log entry and the secondary action button. -->
     <dimen name="call_log_list_item_vertical_divider_width">1dp</dimen>
 
-    <!--
-         Layout weight values for dialpad screen. These layouts will be used in one
-         LinearLayout (dialpad_fragment.xml), configuring dialpad screen's vertical
-         ratio.
-    -->
-    <integer name="dialpad_layout_weight_digits">15</integer>
-    <integer name="dialpad_layout_weight_dialpad">65</integer>
-
     <!-- Text dimensions for dialpad keys -->
-    <dimen name="dialpad_key_numbers_size">40dp</dimen>
-    <dimen name="dialpad_key_letters_size">11dp</dimen>
-    <dimen name="dialpad_key_plus_size">15dp</dimen>
-    <dimen name="dialpad_key_special_characters_size">25dp</dimen>
-    <dimen name="dialpad_key_letters_width">41dp</dimen>
+    <dimen name="dialpad_key_numbers_size">40sp</dimen>
+    <dimen name="dialpad_key_letters_size">13sp</dimen>
+    <dimen name="dialpad_key_star_pound_size">26sp</dimen>
+    <dimen name="dialpad_key_numbers_width">30dp</dimen>
+    <dimen name="dialpad_key_letters_width">50dp</dimen>
+    <dimen name="dialpad_key_height">56dp</dimen>
+    <dimen name="dialpad_key_plus_size">18sp</dimen>
+    <dimen name="dialpad_number_to_letters_padding">11dp</dimen>
+    <dimen name="dialpad_horizontal_padding">5dp</dimen>
+    <dimen name="dialpad_digits_text_size">36sp</dimen>
+    <dimen name="dialpad_digits_height">47dp</dimen>
+    <dimen name="dialpad_digits_padding">16dp</dimen>
+    <dimen name="dialpad_digits_margin_bottom">0px</dimen>
+    <dimen name="dialpad_center_margin">3dp</dimen>
+    <dimen name="dialpad_button_margin">2dp</dimen>
+    <!-- Match call_button_height to Phone's dimens/in_call_end_button_height -->
+    <dimen name="call_button_height">74dp</dimen>
+
     <dimen name="fake_action_bar_height">60dp</dimen>
     <!-- Min with of fake menu buttons, which should be same as ActionBar's one -->
     <dimen name="fake_menu_button_min_width">56dp</dimen>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index 91ceaef37..6cd140c1a 100644
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -725,6 +725,7 @@
 
     <!-- Remove button that shows up when contact is long-pressed. [CHAR LIMIT=NONE] -->
     <string name="remove_contact">Remove</string>
+
     <!-- Header text displayed on the main dialer screen above the list of favorite phone numbers.
          [CHAR LIMIT=21] -->
     <string name="favorites_menu_speed_dial">Speed Dial</string>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 6ecad8c3b..e0fc1db96 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -108,32 +108,46 @@
         <item name="call_log_voicemail_status_action_text_color">#33b5e5</item>
     </style>
 
-    <style name="Theme">
-    </style>
-
-    <style name="DialtactsDigitsTextAppearance">
-        <item name="android:maxLines">1</item>
-        <item name="android:scrollHorizontally">true</item>
-        <item name="android:textSize">@dimen/dialpad_digits_text_size</item>
-        <item name="android:freezesText">true</item>
-        <item name="android:focusableInTouchMode">true</item>
-        <item name="android:editable">true</item>
-        <item name="android:cursorVisible">false</item>
-        <item name="android:layout_weight">0</item>
-    </style>
-
-    <style name="DialtactsDialpadButtonStyle">
-        <item name="android:layout_width">0dip</item>
-        <item name="android:layout_height">match_parent</item>
-        <item name="android:layout_weight">1</item>
-        <item name="android:background">?android:attr/selectableItemBackground</item>
+    <style name="DialpadKeyNumberStyle">
+        <item name="android:textColor">@color/actionbar_background_color</item>
+        <item name="android:textSize">@dimen/dialpad_key_numbers_size</item>
+        <item name="android:fontFamily">sans-serif-light</item>
+        <item name="android:layout_width">@dimen/dialpad_key_numbers_width</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:gravity">center</item>
+    </style>
+
+    <style name="DialpadKeyStarPoundStyle">
+        <item name="android:textColor">@color/dialpad_secondary_text_color</item>
+        <item name="android:textSize">@dimen/dialpad_key_star_pound_size</item>
+        <item name="android:fontFamily">sans-serif-light</item>
+        <item name="android:layout_width">@dimen/dialpad_key_numbers_width</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:gravity">center</item>
+    </style>
+
+    <style name="DialpadKeyLettersStyle">
+        <item name="android:textColor">@color/dialpad_secondary_text_color</item>
+        <item name="android:textSize">@dimen/dialpad_key_letters_size</item>
+        <item name="android:fontFamily">sans-serif-light</item>
+        <item name="android:layout_width">@dimen/dialpad_key_letters_width</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:paddingLeft">@dimen/dialpad_number_to_letters_padding</item>
+    </style>
+
+    <style name="DialpadKeyButtonStyle">
         <item name="android:soundEffectsEnabled">false</item>
+        <item name="android:clickable">true</item>
+        <item name="android:layout_width">fill_parent</item>
+        <item name="android:layout_height">@dimen/dialpad_key_height</item>
+        <item name="android:background">@drawable/dialpad_key_colors</item>
+        <item name="android:focusable">true</item>
     </style>
 
-    <style name="DialpadHorizontalSeparator">
-        <item name="android:layout_width">match_parent</item>
-        <item name="android:layout_height">@dimen/dialpad_vertical_margin</item>
-        <item name="android:background">#66000000</item>
+    <style name="DialpadKeyInternalLayoutStyle">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_gravity">center</item>
     </style>
 
     <style name="DialtactsActionBarStyle" parent="android:Widget.Holo.ActionBar">