Align list item with hamburger menu and activity title (1/2)

- Also change index color.
- Move index characters to right by 2dp, so that it's aligned
  with hamburger menu.
- There are 4 items in ContactListItemView (indexer, photo,
  name and checkbox), and previously we use
  mGapBetweenImageAndText to control 3 gaps between them.
  This CL starts to use mGapBetweenIndexerAndImage to control
  the gap between indexer and photo, and it's smaller than the
  other 2 gaps, so that avatar is aligned with activity title.
- Dimensions are also changed for small tablets (Nexus 7), to
  align title with avatars. We don't need to worry about large
  tablets since the avatars and title are not aligned anyway.

Screenshots: https://docs.google.com/a/google.com/drawings/d/1CI4vNoWNgEg-m2OVlMORtW4mrU3cGb4c64cE5zPGHYg/edit?usp=sharing

Bug 28880897
Bug 28246577

Change-Id: Ifbfb3fae7344596f82960dcdd8f4088b9a6e52c7
diff --git a/res-common/values/attrs.xml b/res-common/values/attrs.xml
index 79d4ee7..4d553f2 100644
--- a/res-common/values/attrs.xml
+++ b/res-common/values/attrs.xml
@@ -45,6 +45,7 @@
         <attr name="list_item_padding_bottom" format="dimension"/>
         <attr name="list_item_padding_left" format="dimension"/>
         <attr name="list_item_gap_between_image_and_text" format="dimension"/>
+        <attr name="list_item_gap_between_indexer_and_image" format="dimension"/>
         <attr name="list_item_gap_between_label_and_data" format="dimension"/>
         <attr name="list_item_presence_icon_margin" format="dimension"/>
         <attr name="list_item_presence_icon_size" format="dimension"/>
diff --git a/res-common/values/colors.xml b/res-common/values/colors.xml
index 339b0e3..1db0dec 100644
--- a/res-common/values/colors.xml
+++ b/res-common/values/colors.xml
@@ -29,7 +29,7 @@
     <color name="secondary_text_color">@color/dialtacts_secondary_text_color</color>
 
     <!-- Text color for section header. -->
-    <color name="section_header_text_color">#888888</color>
+    <color name="section_header_text_color">@color/dialtacts_theme_color</color>
 
     <!-- Divider color for header separator -->
     <color name="main_header_separator_color">#AAAAAA</color>
diff --git a/res-common/values/dimens.xml b/res-common/values/dimens.xml
index 6afeaac..f255143 100644
--- a/res-common/values/dimens.xml
+++ b/res-common/values/dimens.xml
@@ -71,6 +71,7 @@
     <dimen name="contact_browser_list_item_text_size">16sp</dimen>
     <dimen name="contact_browser_list_item_photo_size">40dp</dimen>
     <dimen name="contact_browser_list_item_gap_between_image_and_text">15dp</dimen>
+    <dimen name="contact_browser_list_item_gap_between_indexer_and_image">6dp</dimen>
     <dimen name="contact_browser_list_top_margin">12dp</dimen>
 
     <!-- Dimensions for "No contacts" string in PhoneFavoriteFragment for the All contacts