Redesigned ContactListItemView

Change-Id: I6ebbf3e534b4a728d3af0de21ec337d65d8fb59f
diff --git a/res/layout/contacts_list_content.xml b/res/layout/contacts_list_content.xml
index b92929b..490499c 100644
--- a/res/layout/contacts_list_content.xml
+++ b/res/layout/contacts_list_content.xml
@@ -14,37 +14,54 @@
      limitations under the License.
 -->
 
-<LinearLayout
+<FrameLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/pinned_header_list_layout"
+    android:layout_marginTop="@dimen/contact_browser_list_top_margin"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical">
-
-    <TextView
-        android:id="@+id/account_filter_header"
+    android:layout_height="match_parent" >
+    <LinearLayout
         android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical">
+
+        <TextView
+            android:id="@+id/account_filter_header"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:singleLine="true"
+            android:ellipsize="end"
+            android:gravity="center"
+            android:padding="5dip"
+            android:textAppearance="?android:attr/textAppearanceSmall"
+            android:textColor="@android:color/white"
+            android:background="@android:color/black"
+            android:visibility="gone" />
+
+        <view
+            class="com.android.contacts.list.ContactEntryListView"
+            android:id="@android:id/list"
+            android:layout_width="match_parent"
+            android:layout_height="0dip"
+            android:fastScrollEnabled="true"
+            android:layout_weight="1" />
+
+        <ViewStub
+            android:id="@+id/footer_stub"
+            android:layout="@layout/footer_panel"
+            android:layout_width="fill_parent"
+            android:layout_height="wrap_content" />
+    </LinearLayout>
+    <TextView
+        android:id="@+id/contacts_count"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginRight="@dimen/contacts_count_right_margin"
         android:singleLine="true"
         android:ellipsize="end"
-        android:gravity="center"
-        android:padding="5dip"
-        android:textAppearance="?android:attr/textAppearanceSmall"
-        android:textColor="@android:color/white"
-        android:background="@android:color/black"
-        android:visibility="gone" />
-
-    <view
-        class="com.android.contacts.list.ContactEntryListView"
-        android:id="@android:id/list"
-        android:layout_width="match_parent"
-        android:layout_height="0dip"
-        android:fastScrollEnabled="true"
-        android:layout_weight="1" />
-
-    <ViewStub
-        android:id="@+id/footer_stub"
-        android:layout="@layout/footer_panel"
-        android:layout_width="fill_parent"
-        android:layout_height="wrap_content" />
-</LinearLayout>
+        android:gravity="right"
+        android:layout_gravity="top|right"
+        android:textAppearance="?android:attr/textAppearanceMedium"
+        android:textColor="@color/contact_count_text_color"
+        android:background="@color/contact_browser_list_bk_color" />
+</FrameLayout>
diff --git a/res/values-sw580dp-w1000dp/dimens.xml b/res/values-sw580dp-w1000dp/dimens.xml
index f08abae..ac30b76 100644
--- a/res/values-sw580dp-w1000dp/dimens.xml
+++ b/res/values-sw580dp-w1000dp/dimens.xml
@@ -23,4 +23,6 @@
     <dimen name="detail_header_attribution_height">56dip</dimen>
     <dimen name="detail_tab_carousel_height">0dip</dimen>
     <dimen name="detail_update_section_top_padding">48dip</dimen>
+    <dimen name="contact_browser_list_left_margin">0dip</dimen>
+    <dimen name="contacts_count_right_margin">24dip</dimen>
 </resources>
diff --git a/res/values-sw580dp-w720dp/dimens.xml b/res/values-sw580dp-w720dp/dimens.xml
index a8aedb8..c072a95 100644
--- a/res/values-sw580dp-w720dp/dimens.xml
+++ b/res/values-sw580dp-w720dp/dimens.xml
@@ -21,4 +21,6 @@
     <dimen name="editor_title_label_width">150dip</dimen>
     <dimen name="editor_interpolator_narrow_width">800dip</dimen>
     <dimen name="editor_name_text_field_right_margin">10dip</dimen>
+    <dimen name="contact_browser_list_left_margin">0dip</dimen>
+    <dimen name="contacts_count_right_margin">24dip</dimen>
 </resources>
\ No newline at end of file
diff --git a/res/values-sw580dp-w720dp/styles.xml b/res/values-sw580dp-w720dp/styles.xml
index fc2b3be..4efaa09 100644
--- a/res/values-sw580dp-w720dp/styles.xml
+++ b/res/values-sw580dp-w720dp/styles.xml
@@ -33,9 +33,11 @@
         <item name="list_item_photo_size">64dip</item>
         <item name="list_item_profile_photo_size">80dip</item>
         <item name="list_item_prefix_highlight_color">#729a27</item>
-        <item name="list_item_header_text_indent">77dip</item>
-        <item name="list_item_header_text_color">?color/section_header_text_color</item>
+        <item name="list_item_header_text_indent">8dip</item>
+        <item name="list_item_header_text_color">@color/people_app_theme_color</item>
+        <item name="list_item_header_height">26dip</item>
         <item name="list_item_header_text_size">14sp</item>
+        <item name="list_item_header_underline_color">@color/people_app_theme_color</item>
         <item name="contact_filter_popup_width">320dip</item>
     </style>
 
diff --git a/res/values-sw580dp/dimens.xml b/res/values-sw580dp/dimens.xml
index e671229..9fbdc8e 100644
--- a/res/values-sw580dp/dimens.xml
+++ b/res/values-sw580dp/dimens.xml
@@ -35,4 +35,6 @@
     <dimen name="detail_tab_carousel_height">256dip</dimen>
     <dimen name="detail_update_section_item_vertical_padding">32dip</dimen>
     <dimen name="search_view_width">400dip</dimen>
+    <dimen name="contact_browser_list_left_margin">0dip</dimen>
+    <dimen name="contacts_count_right_margin">24dip</dimen>
 </resources>
diff --git a/res/values-sw580dp/styles.xml b/res/values-sw580dp/styles.xml
index 7e928b7..2838c81 100644
--- a/res/values-sw580dp/styles.xml
+++ b/res/values-sw580dp/styles.xml
@@ -22,7 +22,7 @@
         <item name="section_header_background">@drawable/list_title_holo</item>
         <item name="list_item_divider">?android:attr/listDivider</item>
         <item name="list_item_padding_top">0dip</item>
-        <item name="list_item_padding_right">20dip</item>
+        <item name="list_item_padding_right">24dip</item>
         <item name="list_item_padding_bottom">0dip</item>
         <item name="list_item_padding_left">0dip</item>
         <item name="list_item_gap_between_image_and_text">8dip</item>
@@ -33,9 +33,11 @@
         <item name="list_item_photo_size">64dip</item>
         <item name="list_item_profile_photo_size">80dip</item>
         <item name="list_item_prefix_highlight_color">#729a27</item>
-        <item name="list_item_header_text_indent">77dip</item>
-        <item name="list_item_header_text_color">?color/section_header_text_color</item>
+        <item name="list_item_header_text_indent">8dip</item>
         <item name="list_item_header_text_size">14sp</item>
+        <item name="list_item_header_text_color">@color/people_app_theme_color</item>
+        <item name="list_item_header_height">26dip</item>
+        <item name="list_item_header_underline_color">@color/people_app_theme_color</item>
         <item name="contact_filter_popup_width">320dip</item>
     </style>
 
diff --git a/res/values/colors.xml b/res/values/colors.xml
index 8a644b1..ad04e12 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -66,7 +66,6 @@
     <color name="call_log_missed_call_highlight_color">#FF0000</color>
 
     <!-- Color of the text describing an unconsumed voicemail. -->
-
     <color name="call_log_voicemail_highlight_color">#33b5e5</color>
 
     <!-- Colour background for the voicemail playback ui. -->
@@ -83,4 +82,8 @@
 
     <!-- Color of the theme of the People app -->
     <color name="people_app_theme_color">#33B5E5</color>
+
+    <!-- Colors in the contact browser list -->
+    <color name="contact_browser_list_bk_color">#EEEEEE</color>
+    <color name="contact_count_text_color">#777777</color>
 </resources>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 8d19a3e..b79bf0f 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -206,4 +206,9 @@
 
     <!-- Width of search view in action bar.  Use 0dip for MATCH_PARENT -->
     <dimen name="search_view_width">0dip</dimen>
+
+    <!-- contact browser list margins -->
+    <dimen name="contact_browser_list_left_margin">24dip</dimen>
+    <dimen name="contact_browser_list_top_margin">8dip</dimen>
+    <dimen name="contacts_count_right_margin">40dip</dimen>
 </resources>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 9a73373..e4b7525 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -21,21 +21,25 @@
         <item name="section_header_background">@drawable/list_title_holo</item>
         <item name="list_section_header_height">32dip</item>
         <item name="list_item_divider">@drawable/list_item_divider</item>
-        <item name="list_item_padding_top">4dip</item>
-        <item name="list_item_padding_right">11dip</item>
-        <item name="list_item_padding_bottom">4dip</item>
-        <item name="list_item_padding_left">4dip</item>
+        <item name="list_item_padding_top">0dip</item>
+        <item name="list_item_padding_right">0dip</item>
+        <item name="list_item_padding_bottom">0dip</item>
+        <item name="list_item_padding_left">24dip</item>
         <item name="list_item_gap_between_image_and_text">8dip</item>
         <item name="list_item_gap_between_label_and_data">5dip</item>
         <item name="list_item_call_button_padding">14dip</item>
         <item name="list_item_vertical_divider_margin">5dip</item>
-        <item name="list_item_presence_icon_margin">5dip</item>
+        <item name="list_item_presence_icon_margin">4dip</item>
+        <item name="list_item_presence_icon_size">16dip</item>
         <item name="list_item_photo_size">56dip</item>
         <item name="list_item_profile_photo_size">70dip</item>
         <item name="list_item_prefix_highlight_color">#729a27</item>
-        <item name="list_item_header_text_indent">56dip</item>
-        <item name="list_item_header_text_color">#ffcccccc</item>
-        <item name="list_item_header_text_size">14sp</item>
+        <item name="list_item_header_text_indent">4dip</item>
+        <item name="list_item_header_text_color">@color/people_app_theme_color</item>
+        <item name="list_item_header_text_size">12sp</item>
+        <item name="list_item_header_height">24dip</item>
+        <item name="list_item_header_underline_height">1px</item>
+        <item name="list_item_header_underline_color">@color/people_app_theme_color</item>
         <item name="contact_filter_popup_width">320dip</item>
         <!-- CallLogList -->
         <item name="call_log_list_contact_photo_size">64dip</item>
@@ -136,12 +140,16 @@
         <attr name="list_item_call_button_padding" format="dimension"/>
         <attr name="list_item_vertical_divider_margin" format="dimension"/>
         <attr name="list_item_presence_icon_margin" format="dimension"/>
+        <attr name="list_item_presence_icon_size" format="dimension"/>
         <attr name="list_item_photo_size" format="dimension"/>
         <attr name="list_item_profile_photo_size" format="dimension"/>
         <attr name="list_item_prefix_highlight_color" format="color"/>
         <attr name="list_item_header_text_indent" format="dimension" />
         <attr name="list_item_header_text_color" format="color" />
         <attr name="list_item_header_text_size" format="dimension" />
+        <attr name="list_item_header_height" format="dimension" />
+        <attr name="list_item_header_underline_height" format="dimension" />
+        <attr name="list_item_header_underline_color" format="color" />
     </declare-styleable>
 
     <declare-styleable name="CallDetailActivity">
@@ -179,23 +187,27 @@
         <item name="list_item_height">?android:attr/listPreferredItemHeight</item>
         <item name="activated_background">@drawable/list_item_activated_background</item>
         <item name="section_header_background">@drawable/list_title_holo</item>
-        <item name="list_section_header_height">32dip</item>
+        <item name="list_section_header_height">24dip</item>
         <item name="list_item_divider">@drawable/list_item_divider</item>
-        <item name="list_item_padding_top">4dip</item>
-        <item name="list_item_padding_right">11dip</item>
-        <item name="list_item_padding_bottom">4dip</item>
-        <item name="list_item_padding_left">4dip</item>
+        <item name="list_item_padding_top">0dip</item>
+        <item name="list_item_padding_right">0dip</item>
+        <item name="list_item_padding_bottom">0dip</item>
+        <item name="list_item_padding_left">24dip</item>
         <item name="list_item_gap_between_image_and_text">8dip</item>
         <item name="list_item_gap_between_label_and_data">5dip</item>
         <item name="list_item_call_button_padding">14dip</item>
         <item name="list_item_vertical_divider_margin">5dip</item>
-        <item name="list_item_presence_icon_margin">5dip</item>
+        <item name="list_item_presence_icon_margin">4dip</item>
+        <item name="list_item_presence_icon_size">16dip</item>
         <item name="list_item_photo_size">56dip</item>
         <item name="list_item_profile_photo_size">70dip</item>
         <item name="list_item_prefix_highlight_color">#729a27</item>
-        <item name="list_item_header_text_indent">56dip</item>
-        <item name="list_item_header_text_color">?color/section_header_text_color</item>
-        <item name="list_item_header_text_size">14sp</item>
+        <item name="list_item_header_text_indent">4dip</item>
+        <item name="list_item_header_text_color">@color/people_app_theme_color</item>
+        <item name="list_item_header_text_size">12sp</item>
+        <item name="list_item_header_height">26dip</item>
+        <item name="list_item_header_underline_height">1px</item>
+        <item name="list_item_header_underline_color">@color/people_app_theme_color</item>
         <item name="contact_filter_popup_width">320dip</item>
     </style>