Conversation View UI Refresh: Cards.

Lots of changes:
New show pictures asset.
Added border as a new view type in the conversation
view to vertically separate cards. Changing its size
is TBD.
Final UI for details header (both collapsed and
expanded).
Side borders are accomplished via a new overlay layer that
is positions a view to each side of the conversation view.
Lots of dimension changes, padding and margin changes, and
other pixelpushing.

Change-Id: I4029ae46896e27fe20b005c01b8df04bb2a46c2a
diff --git a/res/drawable-hdpi/ic_show_images_holo_light.png b/res/drawable-hdpi/ic_show_images_holo_light.png
index 368b042..790e187 100644
--- a/res/drawable-hdpi/ic_show_images_holo_light.png
+++ b/res/drawable-hdpi/ic_show_images_holo_light.png
Binary files differ
diff --git a/res/drawable-mdpi/ic_show_images_holo_light.png b/res/drawable-mdpi/ic_show_images_holo_light.png
index 8302fa9..6e155dd 100644
--- a/res/drawable-mdpi/ic_show_images_holo_light.png
+++ b/res/drawable-mdpi/ic_show_images_holo_light.png
Binary files differ
diff --git a/res/drawable-xhdpi/ic_show_images_holo_light.png b/res/drawable-xhdpi/ic_show_images_holo_light.png
index acf93ad..90fcb8a 100644
--- a/res/drawable-xhdpi/ic_show_images_holo_light.png
+++ b/res/drawable-xhdpi/ic_show_images_holo_light.png
Binary files differ
diff --git a/res/drawable/message_header_bg.xml b/res/drawable/message_header_bg.xml
deleted file mode 100644
index 5e00915..0000000
--- a/res/drawable/message_header_bg.xml
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-     Copyright (C) 2011 Google Inc.
-     Licensed to 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"
-          xmlns:app="http://schemas.android.com/apk/res-auto">
-    <item app:state_draft="true" android:state_activated="true"
-          android:drawable="@drawable/header_convo_view_thread_bg_holo_repeat"/>
-    <item android:state_activated="true"
-          android:drawable="@color/expanded_message_header_background_color" />
-    <item android:drawable="@color/collapsed_message_header_background_color" />
-</selector>
diff --git a/res/layout/ad_header_view.xml b/res/layout/ad_header_view.xml
index 1ed6c27..a13e7fb 100644
--- a/res/layout/ad_header_view.xml
+++ b/res/layout/ad_header_view.xml
@@ -23,11 +23,7 @@
     android:background="@color/ad_background_yellow"
     android:orientation="vertical"
     android:paddingTop="@dimen/conversation_header_vertical_padding"
-    android:paddingBottom="@dimen/conversation_header_vertical_padding"
-    android:layout_marginStart="@dimen/conversation_view_margin_side"
-    android:layout_marginEnd="@dimen/conversation_view_margin_side"
-    android:layout_marginLeft="@dimen/conversation_view_margin_side"
-    android:layout_marginRight="@dimen/conversation_view_margin_side" >
+    android:paddingBottom="@dimen/conversation_header_vertical_padding" >
 
     <TextView
         android:id="@+id/ad_info"
diff --git a/res/values-sw720dp/dimen.xml b/res/layout/card_border.xml
similarity index 69%
rename from res/values-sw720dp/dimen.xml
rename to res/layout/card_border.xml
index b018380..03cc60f 100644
--- a/res/values-sw720dp/dimen.xml
+++ b/res/layout/card_border.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--
-     Copyright (C) 2012 Google Inc.
+     Copyright (C) 2013 Google Inc.
      Licensed to The Android Open Source Project.
 
      Licensed under the Apache License, Version 2.0 (the "License");
@@ -15,5 +15,8 @@
      See the License for the specific language governing permissions and
      limitations under the License.
 -->
-<resources>
-</resources>
\ No newline at end of file
+<View xmlns:android="http://schemas.android.com/apk/res/android"
+      android:layout_width="match_parent"
+      android:layout_height="@dimen/message_header_border_height"
+      android:background="@color/conversation_view_border_color">
+</View>
diff --git a/res/layout/conversation_message_details_header.xml b/res/layout/conversation_message_details_header.xml
index 172bbd2..935014e 100644
--- a/res/layout/conversation_message_details_header.xml
+++ b/res/layout/conversation_message_details_header.xml
@@ -18,12 +18,13 @@
 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/details_collapsed_content"
     android:layout_width="match_parent"
-    android:layout_height="@dimen/message_details_header_collapsed_height"
+    android:layout_height="wrap_content"
     android:background="?android:attr/selectableItemBackground"
     android:paddingStart="@dimen/message_details_header_padding_start_collapsed"
     android:paddingEnd="@dimen/message_details_header_padding_end"
     android:paddingLeft="@dimen/message_details_header_padding_start_collapsed"
-    android:paddingRight="@dimen/message_details_header_padding_end" >
+    android:paddingRight="@dimen/message_details_header_padding_end"
+    android:paddingBottom="@dimen/message_details_header_vertical_padding" >
     <TextView
         android:id="@+id/recipients_summary"
         android:layout_width="0dp"
diff --git a/res/layout/conversation_message_details_header_expanded.xml b/res/layout/conversation_message_details_header_expanded.xml
index a5aa753..aa365b0 100644
--- a/res/layout/conversation_message_details_header_expanded.xml
+++ b/res/layout/conversation_message_details_header_expanded.xml
@@ -20,32 +20,20 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="?android:attr/selectableItemBackground"
-    android:paddingStart="@dimen/message_details_header_padding_start"
+    android:paddingStart="@dimen/message_details_header_padding_start_collapsed"
     android:paddingEnd="@dimen/message_details_header_padding_end"
-    android:paddingLeft="@dimen/message_details_header_padding_start"
+    android:paddingLeft="@dimen/message_details_header_padding_start_collapsed"
     android:paddingRight="@dimen/message_details_header_padding_end"
-    android:columnCount="3"
+    android:columnCount="2"
     android:rowCount="5" >
 
     <TextView
-        android:id="@+id/from_heading"
-        android:layout_width="@dimen/message_header_contact_photo_width"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="@dimen/message_header_inner_side_padding"
-        android:layout_marginRight="@dimen/message_header_inner_side_padding"
-        android:layout_column="0"
-        android:layout_row="0"
-        android:gravity="end|right"
-        android:text="@string/from_heading"
-        android:visibility="gone"
-        style="@style/MessageHeaderSmallStyle" />
-    <TextView
         android:id="@+id/from_details"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_gravity="fill_horizontal"
         android:layout_marginBottom="4dp"
-        android:layout_column="1"
+        android:layout_column="0"
         android:layout_row="0"
         android:visibility="gone"
         style="@style/MessageDetailsValueStyle" />
@@ -55,95 +43,47 @@
         android:layout_height="wrap_content"
         android:layout_marginStart="@dimen/message_header_inner_side_padding"
         android:layout_marginLeft="@dimen/message_header_inner_side_padding"
-        android:layout_column="2"
+        android:layout_column="1"
         android:layout_row="0"
         android:contentDescription="@string/collapse_recipient_details"
         android:src="@drawable/ic_menu_expander_maximized_holo_light" />
     <TextView
-        android:id="@+id/replyto_heading"
-        android:layout_width="@dimen/message_header_contact_photo_width"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="@dimen/message_header_inner_side_padding"
-        android:layout_marginRight="@dimen/message_header_inner_side_padding"
-        android:layout_column="0"
-        android:layout_row="1"
-        android:gravity="end|right"
-        android:text="@string/replyto_heading"
-        android:visibility="gone"
-        style="@style/MessageHeaderSmallStyle" />
-    <TextView
         android:id="@+id/replyto_details"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_gravity="fill_horizontal"
         android:layout_marginBottom="4dp"
-        android:layout_column="1"
+        android:layout_column="0"
         android:layout_row="1"
         android:visibility="gone"
         style="@style/MessageDetailsValueStyle" />
     <TextView
-        android:id="@+id/to_heading"
-        android:layout_width="@dimen/message_header_contact_photo_width"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="@dimen/message_header_inner_side_padding"
-        android:layout_marginRight="@dimen/message_header_inner_side_padding"
-        android:layout_column="0"
-        android:layout_row="2"
-        android:gravity="end|right"
-        android:text="@string/to_heading"
-        android:visibility="gone"
-        style="@style/MessageHeaderSmallStyle" />
-    <TextView
         android:id="@+id/to_details"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_gravity="fill_horizontal"
         android:layout_marginBottom="4dp"
-        android:layout_column="1"
+        android:layout_column="0"
         android:layout_row="2"
         android:visibility="gone"
         style="@style/MessageDetailsValueStyle" />
     <TextView
-        android:id="@+id/cc_heading"
-        android:layout_width="@dimen/message_header_contact_photo_width"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="@dimen/message_header_inner_side_padding"
-        android:layout_marginRight="@dimen/message_header_inner_side_padding"
-        android:layout_column="0"
-        android:layout_row="3"
-        android:gravity="end|right"
-        android:text="@string/cc_heading"
-        android:visibility="gone"
-        style="@style/MessageHeaderSmallStyle" />
-    <TextView
         android:id="@+id/cc_details"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_gravity="fill_horizontal"
         android:layout_marginBottom="4dp"
-        android:layout_column="1"
+        android:layout_column="0"
         android:layout_row="3"
         android:visibility="gone"
         style="@style/MessageDetailsValueStyle" />
     <TextView
-        android:id="@+id/bcc_heading"
-        android:layout_width="@dimen/message_header_contact_photo_width"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="@dimen/message_header_inner_side_padding"
-        android:layout_marginRight="@dimen/message_header_inner_side_padding"
-        android:layout_column="0"
-        android:layout_row="4"
-        android:gravity="end|right"
-        android:text="@string/bcc_heading"
-        android:visibility="gone"
-        style="@style/MessageHeaderSmallStyle" />
-    <TextView
         android:id="@+id/bcc_details"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_gravity="fill_horizontal"
         android:layout_marginBottom="4dp"
-        android:layout_column="1"
+        android:layout_column="0"
         android:layout_row="4"
         android:visibility="gone"
         style="@style/MessageDetailsValueStyle" />
diff --git a/res/layout/conversation_message_footer.xml b/res/layout/conversation_message_footer.xml
index 04a1e11..612d0c2 100644
--- a/res/layout/conversation_message_footer.xml
+++ b/res/layout/conversation_message_footer.xml
@@ -29,18 +29,13 @@
         android:id="@+id/attachments_header_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginBottom="16dp"
         android:text="@string/attachments_header"
         android:visibility="gone"
         android:paddingStart="@dimen/message_details_header_padding_start"
         android:paddingLeft="@dimen/message_details_header_padding_start"
         style="@style/MessageAttachmentsHeaderStyle"/>
-    <View
-        android:id="@+id/attachments_header_bar"
-        android:layout_width="match_parent"
-        android:layout_height="@dimen/message_details_header_border_height"
-        android:visibility="gone"
-        android:background="@color/conversation_border_color"
-        android:layout_marginBottom="8dp" />
+
     <com.android.mail.ui.AttachmentTileGrid
         android:id="@+id/attachment_tile_grid"
         android:layout_width="match_parent"
@@ -60,4 +55,5 @@
         android:layout_marginLeft="16dp"
         android:layout_marginRight="16dp"
         android:orientation="vertical"/>
+
 </com.android.mail.browse.MessageFooterView>
diff --git a/res/layout/conversation_message_header.xml b/res/layout/conversation_message_header.xml
index c0c1c63..8734131 100644
--- a/res/layout/conversation_message_header.xml
+++ b/res/layout/conversation_message_header.xml
@@ -20,25 +20,20 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:visibility="visible"
-    android:background="@android:color/white"
+    android:background="@color/message_header_background_color"
     android:orientation="vertical"
     android:layout_marginStart="@dimen/conversation_view_margin_side"
     android:layout_marginEnd="@dimen/conversation_view_margin_side"
     android:layout_marginLeft="@dimen/conversation_view_margin_side"
     android:layout_marginRight="@dimen/conversation_view_margin_side" >
 
-    <View
-        android:layout_width="match_parent"
-        android:layout_height="@dimen/message_details_header_border_height"
-        android:background="@color/conversation_border_color" />
-
     <include layout="@layout/conversation_message_upper_header"
         android:id="@+id/upper_header" />
 
     <View
         android:id="@+id/snap_header_bottom_border"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/message_details_header_border_height"
-        android:background="@color/conversation_border_color"
+        android:layout_height="1dp"
+        android:background="@color/conversation_view_border_color"
         android:visibility="gone" />
 </com.android.mail.browse.MessageHeaderView>
diff --git a/res/layout/conversation_message_show_pics.xml b/res/layout/conversation_message_show_pics.xml
index 7ef2c22..1c0a05e 100644
--- a/res/layout/conversation_message_show_pics.xml
+++ b/res/layout/conversation_message_show_pics.xml
@@ -15,40 +15,19 @@
      See the License for the specific language governing permissions and
      limitations under the License.
 -->
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:id="@+id/show_pictures"
+<TextView xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/show_pictures_text"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?android:attr/selectableItemBackground">
-    <ImageView
-        android:id="@+id/show_pictures_icon"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_centerVertical="true"
-        android:paddingStart="@dimen/message_details_header_padding_start"
-        android:paddingLeft="@dimen/message_details_header_padding_start"
-        android:src="@drawable/ic_show_images_holo_light"
-        android:contentDescription="@string/show_images" />
-    <TextView
-        android:id="@+id/show_pictures_text"
-        android:layout_toEndOf="@id/show_pictures_icon"
-        android:layout_toRightOf="@id/show_pictures_icon"
-        android:layout_marginStart="10dp"
-        android:layout_marginEnd="14dp"
-        android:layout_marginLeft="10dp"
-        android:layout_marginRight="14dp"
-        android:minHeight="@dimen/message_details_header_collapsed_height"
-        android:paddingTop="8dp"
-        android:paddingBottom="8dp"
-        android:paddingEnd="@dimen/message_details_header_padding_end"
-        android:paddingRight="@dimen/message_details_header_padding_end"
-        android:gravity="center_vertical"
-        android:text="@string/show_images"
-        style="@style/MessageHeaderSmallStyle"/>
-    <View
-        android:id="@+id/show_pics_bottom_border"
-        android:layout_width="match_parent"
-        android:layout_height="@dimen/message_details_header_border_height"
-        android:layout_below="@id/show_pictures_text"
-        android:background="@color/conversation_border_color" />
-</RelativeLayout>
+    android:layout_gravity="center_vertical"
+    android:background="?android:attr/selectableItemBackground"
+    android:drawablePadding="10dp"
+    android:drawableStart="@drawable/ic_show_images_holo_light"
+    android:paddingTop="@dimen/message_details_header_vertical_padding"
+    android:paddingBottom="@dimen/message_details_header_vertical_padding"
+    android:paddingStart="@dimen/message_details_header_padding_start_collapsed"
+    android:paddingLeft="@dimen/message_details_header_padding_start_collapsed"
+    android:paddingEnd="14dp"
+    android:paddingRight="14dp"
+    android:text="@string/show_images"
+    style="@style/MessageHeaderShowPicsStyle"/>
diff --git a/res/layout/conversation_message_spam_warning.xml b/res/layout/conversation_message_spam_warning.xml
index f59b224..f94e403 100644
--- a/res/layout/conversation_message_spam_warning.xml
+++ b/res/layout/conversation_message_spam_warning.xml
@@ -35,7 +35,6 @@
         android:layout_marginRight="14dp"
         android:layout_toRightOf="@id/spam_warning_icon"
         android:gravity="center_vertical"
-        android:minHeight="@dimen/message_details_header_collapsed_height"
         android:paddingRight="@dimen/message_details_header_padding_end"
         android:paddingTop="8dp" />
 
@@ -59,8 +58,8 @@
     <View
         android:id="@+id/spam_warning_bottom_border"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/message_details_header_border_height"
+        android:layout_height="@dimen/message_header_border_height"
         android:layout_alignParentBottom="true"
-        android:background="@color/conversation_border_color" />
+        android:background="@color/conversation_view_border_color" />
 
 </com.android.mail.browse.SpamWarningView>
diff --git a/res/layout/conversation_message_upper_header.xml b/res/layout/conversation_message_upper_header.xml
index 5a84273..82ede70 100644
--- a/res/layout/conversation_message_upper_header.xml
+++ b/res/layout/conversation_message_upper_header.xml
@@ -18,24 +18,17 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginLeft="@dimen/conversation_view_margin_side"
-    android:layout_marginRight="@dimen/conversation_view_margin_side"
-    android:layout_marginStart="@dimen/conversation_view_margin_side"
-    android:layout_marginEnd="@dimen/conversation_view_margin_side"
-    android:background="@drawable/message_header_bg"
-    android:duplicateParentState="true"
-    android:paddingLeft="@dimen/message_header_padding_start"
-    android:paddingRight="@dimen/message_header_padding_end"
-    android:paddingStart="@dimen/message_header_padding_start"
-    android:paddingEnd="@dimen/message_header_padding_end"
-    android:paddingTop="12dp"
-    android:paddingBottom="12dp" >
+    android:duplicateParentState="true" >
 
     <QuickContactBadge
         android:id="@+id/photo"
         android:layout_width="@dimen/message_header_contact_photo_width"
         android:layout_height="@dimen/message_header_contact_photo_height"
         android:layout_gravity="center_vertical"
+        android:layout_marginStart="@dimen/message_header_padding_start"
+        android:layout_marginLeft="@dimen/message_header_padding_start"
+        android:layout_marginTop="12dp"
+        android:layout_marginBottom="12dp"
         android:scaleType="centerCrop"
         android:contentDescription="@string/contact_info_string" />
     <!-- draft should match photo in dimensions -->
@@ -44,6 +37,10 @@
         android:layout_width="@dimen/message_header_contact_photo_width"
         android:layout_height="@dimen/message_header_contact_photo_height"
         android:layout_gravity="center_vertical"
+        android:layout_marginTop="12dp"
+        android:layout_marginBottom="12dp"
+        android:layout_marginStart="@dimen/message_header_padding_start"
+        android:layout_marginLeft="@dimen/message_header_padding_start"
         android:visibility="gone"
         android:scaleType="center"
         android:src="@drawable/ic_draft" />
diff --git a/res/layout/conversation_message_upper_header_actions.xml b/res/layout/conversation_message_upper_header_actions.xml
index 73a41ae..016dd5a 100644
--- a/res/layout/conversation_message_upper_header_actions.xml
+++ b/res/layout/conversation_message_upper_header_actions.xml
@@ -40,7 +40,7 @@
         android:contentDescription="@string/reply_all" />
     <ImageView
         android:id="@+id/overflow"
-        android:layout_height="match_parent"
-        android:layout_width="@dimen/message_header_height"
+        android:layout_height="@dimen/message_header_action_button_height"
+        android:layout_width="@dimen/message_header_action_button_width"
         style="@android:style/Widget.Holo.Light.ActionButton.Overflow" />
 </merge>
diff --git a/res/layout/conversation_message_upper_header_text.xml b/res/layout/conversation_message_upper_header_text.xml
index bc3ab29..dc695d7 100644
--- a/res/layout/conversation_message_upper_header_text.xml
+++ b/res/layout/conversation_message_upper_header_text.xml
@@ -16,8 +16,9 @@
      limitations under the License.
 -->
 
-<!-- title_container's marginRight is *reserved*, see
-     MessageHeaderView.mCollapsedTextMarginRight -->
+<!-- NOTE: Be careful when setting title_container's marginEnd.
+     The value is updated in code. See uses of
+     MessageHeaderView.mCollapsedTitleContainerMarginEnd -->
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/title_container"
     android:layout_width="0dip"
@@ -55,8 +56,7 @@
         android:layout_toLeftOf="@id/attachment"
         android:layout_alignParentStart="true"
         android:layout_alignParentLeft="true"
-        style="@style/MessageSenderNameStyle"
-        android:singleLine="true" />
+        style="@style/MessageSenderNameStyle" />
     <ImageView
         android:id="@+id/presence"
         android:layout_below="@id/sender_name"
@@ -68,7 +68,6 @@
         android:layout_below="@id/sender_name"
         android:layout_toEndOf="@id/presence"
         android:layout_toRightOf="@id/presence"
-        android:singleLine="true"
         style="@style/MessageHeaderSubtitleStyle" />
     <TextView
         android:id="@+id/send_date"
@@ -77,14 +76,11 @@
         android:layout_below="@id/sender_email"
         android:layout_toEndOf="@id/presence"
         android:layout_toRightOf="@id/presence"
-        android:singleLine="true"
         style="@style/MessageHeaderSubtitleStyle" />
     <TextView
         android:id="@+id/email_snippet"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@id/sender_name"
-        android:lines="2"
-        android:lineSpacingExtra="1dp"
         style="@style/MessageHeaderSnippetStyle" />
 </RelativeLayout>
diff --git a/res/layout/conversation_pager.xml b/res/layout/conversation_pager.xml
index 5fc13d1..9985939 100644
--- a/res/layout/conversation_pager.xml
+++ b/res/layout/conversation_pager.xml
@@ -20,7 +20,7 @@
     android:id="@+id/conversation_pane"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@android:color/white"
+    android:background="@color/conversation_view_border_color"
     android:visibility="gone">
 
     <android.support.v4.view.PagerTitleStrip
diff --git a/res/layout/conversation_view.xml b/res/layout/conversation_view.xml
index 1f7a25a..de5325f 100644
--- a/res/layout/conversation_view.xml
+++ b/res/layout/conversation_view.xml
@@ -28,8 +28,29 @@
             android:id="@+id/webview"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
+            android:layout_marginStart="@dimen/conversation_view_margin_side"
+            android:layout_marginEnd="@dimen/conversation_view_margin_side"
+            android:layout_marginLeft="@dimen/conversation_view_margin_side"
+            android:layout_marginRight="@dimen/conversation_view_margin_side"
             android:scrollbars="none" />
 
+        <FrameLayout
+                android:id="@+id/conversation_side_border_overlay"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent">
+            <View
+                android:layout_width="@dimen/conversation_view_margin_side"
+                android:layout_height="match_parent"
+                android:layout_gravity="left"
+                android:background="@color/conversation_view_border_color" />
+
+            <View
+                android:layout_width="@dimen/conversation_view_margin_side"
+                android:layout_height="match_parent"
+                android:layout_gravity="right"
+                android:background="@color/conversation_view_border_color" />
+        </FrameLayout>
+
         <!-- scrolling overlay views go here -->
 
         <!-- topmost layer for floating views (e.g. snap header, New Message bar) -->
@@ -43,6 +64,10 @@
                 android:id="@+id/snap_header"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
+                android:layout_marginStart="@dimen/conversation_view_margin_side"
+                android:layout_marginEnd="@dimen/conversation_view_margin_side"
+                android:layout_marginLeft="@dimen/conversation_view_margin_side"
+                android:layout_marginRight="@dimen/conversation_view_margin_side"
                 android:layout_gravity="top"
                 android:visibility="gone" />
 
@@ -50,6 +75,8 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_gravity="bottom"
+                android:layout_marginStart="@dimen/conversation_view_margin_side"
+                android:layout_marginEnd="@dimen/conversation_view_margin_side"
                 android:layout_marginLeft="@dimen/conversation_view_margin_side"
                 android:layout_marginRight="@dimen/conversation_view_margin_side" />
 
diff --git a/res/layout/conversation_view_header.xml b/res/layout/conversation_view_header.xml
index b63f88b..78d6020 100644
--- a/res/layout/conversation_view_header.xml
+++ b/res/layout/conversation_view_header.xml
@@ -20,13 +20,10 @@
     android:id="@+id/conversation_header"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:background="@android:color/white"
     android:orientation="vertical"
     android:paddingTop="@dimen/conversation_header_vertical_padding"
-    android:paddingBottom="@dimen/conversation_header_vertical_padding"
-    android:layout_marginLeft="@dimen/conversation_view_margin_side"
-    android:layout_marginRight="@dimen/conversation_view_margin_side"
-    android:layout_marginStart="@dimen/conversation_view_margin_side"
-    android:layout_marginEnd="@dimen/conversation_view_margin_side" >
+    android:paddingBottom="@dimen/conversation_header_vertical_padding" >
 
     <TextView
         android:id="@+id/subject"
diff --git a/res/layout/super_collapsed_block.xml b/res/layout/super_collapsed_block.xml
index 38b7434..11dcd03 100644
--- a/res/layout/super_collapsed_block.xml
+++ b/res/layout/super_collapsed_block.xml
@@ -19,22 +19,17 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/super_collapsed_block"
     android:layout_width="match_parent"
-    android:layout_height="@dimen/super_collapsed_height"
+    android:layout_height="wrap_content"
     android:layout_marginStart="@dimen/conversation_view_margin_side"
     android:layout_marginEnd="@dimen/conversation_view_margin_side"
     android:layout_marginLeft="@dimen/conversation_view_margin_side"
     android:layout_marginRight="@dimen/conversation_view_margin_side"
-    android:layout_marginBottom="@dimen/message_header_vertical_margin"
-    android:background="@color/collapsed_message_header_background_color"
-    android:orientation="vertical" >
-    <View
-        android:layout_width="match_parent"
-        android:layout_height="@dimen/message_details_header_border_height"
-        android:background="@color/conversation_border_color" />
+    android:background="@color/message_header_background_color" >
     <TextView
         android:id="@+id/super_collapsed_text"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
+        android:layout_width="0dp"
+        android:layout_height="@dimen/super_collapsed_height"
+        android:layout_weight="1"
         android:gravity="center"
         android:textSize="14sp"
         android:textColor="@color/dark_gray_text_color" />
diff --git a/res/raw/template_border.html b/res/raw/template_border.html
new file mode 100644
index 0000000..8478cbd
--- /dev/null
+++ b/res/raw/template_border.html
@@ -0,0 +1 @@
+<div class="mail-border spacer" style="height: %spx;"></div>
diff --git a/res/values-sw600dp/dimen.xml b/res/values-sw600dp/dimen.xml
index 9bb262e..5c6d070 100644
--- a/res/values-sw600dp/dimen.xml
+++ b/res/values-sw600dp/dimen.xml
@@ -23,14 +23,12 @@
     <dimen name="conversation_page_side_margin">16dip</dimen>
     <dimen name="conversation_page_gutter">0dip</dimen>
     <dimen name="conversation_side_padding">16dip</dimen>
-    <dimen name="message_header_inner_side_padding">16dip</dimen>
+    <dimen name="message_header_inner_side_padding">32dp</dimen>
     <dimen name="message_header_contact_photo_width">64dp</dimen>
     <dimen name="message_header_contact_photo_height">64dp</dimen>
-    <dimen name="message_details_header_padding_start">14dip</dimen>
-    <dimen name="message_details_header_padding_end">4dip</dimen>
-    <dimen name="message_header_height">64sp</dimen>
-    <dimen name="message_header_padding_right">4dip</dimen>
-    <dimen name="message_header_action_button_width">56dip</dimen>
+    <dimen name="message_header_action_button_width">56dp</dimen>
+    <dimen name="message_header_action_button_height">56dp</dimen>
+    <dimen name="message_details_header_padding_start_collapsed">76dip</dimen>
     <dimen name="attachment_tile_min_size">180dp</dimen>
     <dimen name="attachment_tile_max_size">254dp</dimen>
     <dimen name="wait_padding">32dp</dimen>
diff --git a/res/values/attrs.xml b/res/values/attrs.xml
index 6471c2d..60fbc86 100644
--- a/res/values/attrs.xml
+++ b/res/values/attrs.xml
@@ -35,7 +35,4 @@
         <attr name="barHeight" format="dimension" />
         <attr name="detentWidth" format="dimension" />
     </declare-styleable>
-    <declare-styleable name="ConversationViewDrawableState">
-        <attr name="state_draft" format="boolean" />
-    </declare-styleable>
 </resources>
diff --git a/res/values/colors.xml b/res/values/colors.xml
index da9957f..291048d 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -73,7 +73,7 @@
     <color name="conv_header_add_label_background">#eeeeee</color>
 
     <!-- Conversation message header colors -->
-    <color name="conversation_border_color">#c0c0c0</color>
+    <color name="conversation_view_border_color">#eeeeee</color>
     <color name="conv_header_text_light">#a6a8ab</color>
     <color name="conv_header_text_dark">@color/dark_gray_text_color</color>
     <color name="conv_header_text_link_blue">#35b4e3</color>
@@ -125,10 +125,8 @@
         progressbar_solid_holo.png -->
     <color name="swipe_to_refresh_text_color">#0099cc</color>
 
-    <!-- The color of the collapsed message header -->
-    <color name="collapsed_message_header_background_color">#eeeded</color>
-    <!-- The color of the expanded message header -->
-    <color name="expanded_message_header_background_color">@android:color/white</color>
+    <!-- The background color of the message header -->
+    <color name="message_header_background_color">@android:color/white</color>
 
     <color name="ad_background_yellow">#fff8e5</color>
 </resources>
diff --git a/res/values/dimen.xml b/res/values/dimen.xml
index 12ec084..10c4ab1 100644
--- a/res/values/dimen.xml
+++ b/res/values/dimen.xml
@@ -40,7 +40,7 @@
     <dimen name="folders_left_padding">8dip</dimen>
     <dimen name="conversation_page_gutter">16dp</dimen>
     <dimen name="conversation_message_content_margin_side">16dp</dimen>
-    <dimen name="conversation_view_margin_side">0dp</dimen>
+    <dimen name="conversation_view_margin_side">8dp</dimen>
     <dimen name="conversation_header_font_size">18sp</dimen>
     <dimen name="conversation_header_font_size_condensed">14sp</dimen>
     <dimen name="conversation_header_vertical_item_padding">16dip</dimen>
@@ -52,25 +52,21 @@
     <dimen name="conversation_folder_padding_extra_width">14dip</dimen>
     <dimen name="conversation_folder_padding_before">8dip</dimen>
     <dimen name="conversation_folder_padding_above">4dip</dimen>
-    <dimen name="message_details_header_collapsed_height">48sp</dimen>
-    <dimen name="message_details_header_border_height">1dip</dimen>
-    <dimen name="message_details_header_date_margin_right">4dip</dimen>
-    <dimen name="message_header_vertical_margin">1dip</dimen>
     <dimen name="message_details_header_padding_start">16dip</dimen>
-    <dimen name="message_details_header_padding_start_collapsed">76dip</dimen>
-    <dimen name="message_details_header_padding_end">16dip</dimen>
-    <dimen name="message_header_height">48sp</dimen>
+    <dimen name="message_details_header_padding_start_collapsed">68dip</dimen>
+    <dimen name="message_details_header_padding_end">10dip</dimen>
+    <dimen name="message_details_header_vertical_padding">7dp</dimen>
+    <dimen name="message_header_border_height">8dp</dimen>
     <dimen name="message_header_presence_top_margin">-4dp</dimen>
-    <dimen name="message_header_action_button_width">48dip</dimen>
-    <dimen name="message_header_padding">16dip</dimen>
-    <dimen name="message_header_padding_start">16dp</dimen>
-    <dimen name="message_header_padding_end">4dp</dimen>
-    <dimen name="message_header_title_container_margin_end_collapsed">12dp</dimen>
-    <dimen name="super_collapsed_height">34sp</dimen>
+    <dimen name="message_header_action_button_width">48dp</dimen>
+    <dimen name="message_header_action_button_height">48dp</dimen>
+    <dimen name="message_header_padding_start">10dp</dimen>
+    <dimen name="message_header_title_container_margin_end_collapsed">10dp</dimen>
+    <dimen name="super_collapsed_height">30sp</dimen>
     <dimen name="notification_view_height">36dip</dimen>
-    <dimen name="message_header_contact_photo_width">48dp</dimen>
-    <dimen name="message_header_contact_photo_height">48dp</dimen>
-    <dimen name="message_header_inner_side_padding">12dp</dimen>
+    <dimen name="message_header_contact_photo_width">48sp</dimen>
+    <dimen name="message_header_contact_photo_height">48sp</dimen>
+    <dimen name="message_header_inner_side_padding">10dp</dimen>
     <dimen name="attachment_toast_yoffset">-100dip</dimen>
     <dimen name="spinner_frame_width">196dip</dimen>
     <dimen name="folder_list_heading_padding_side">16dp</dimen>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index e76f72c..919eb0a 100644
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -524,16 +524,16 @@
         <item quantity="other"><xliff:g id="count" example="4">%1$d</xliff:g> older messages</item>
     </plurals>
 
-    <string name="from_heading">From:</string>
+    <string name="from_heading">From:\u0020</string>
     <!-- Shown to display the reply to address of the message [CHAR LIMIT=20] -->
-    <string name="replyto_heading">Reply-to:</string>
+    <string name="replyto_heading">Reply-to:\u0020</string>
     <!-- Shown to display the recipient(s) of the message [CHAR LIMIT=10] -->
     <!-- Shown in HTML to display the recipient(s) of the message [CHAR LIMIT=10] -->
-    <string name="to_heading">To:</string>
+    <string name="to_heading">To:\u0020</string>
     <!-- Shown in HTML to display the recipient(s) of the message [CHAR LIMIT=10] -->
-    <string name="cc_heading">Cc:</string>
+    <string name="cc_heading">Cc:\u0020</string>
     <!-- Shown in HTML to display the recipient(s) of the message [CHAR LIMIT=10] -->
-    <string name="bcc_heading">Bcc:</string>
+    <string name="bcc_heading">Bcc:\u0020</string>
     <!-- Shown to display the from address of the message [CHAR LIMIT=10] -->
     <!-- Displayed above an HTML message to show the images in that message [CHAR LIMIT=40] -->
     <string name="show_images">Show pictures</string>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 9263316..474eae8 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -250,17 +250,20 @@
     </style>
 
     <style name="MessageSenderNameStyle">
+        <item name="android:singleLine">true</item>
         <item name="android:textSize">16sp</item>
-        <item name="android:textStyle">bold</item>
         <item name="android:textColor">@color/conv_header_text_dark</item>
     </style>
 
     <style name="MessageHeaderSubtitleStyle">
+        <item name="android:singleLine">true</item>
         <item name="android:textSize">12sp</item>
         <item name="android:textColor">@color/conv_header_text_dark</item>
     </style>
 
     <style name="MessageHeaderSnippetStyle">
+        <item name="android:lines">2</item>
+        <item name="android:lineSpacingExtra">1dp</item>
         <item name="android:textSize">12sp</item>
         <item name="android:textColor">@color/conv_header_text_light</item>
     </style>
@@ -272,13 +275,16 @@
         <item name="android:textSize">12sp</item>
     </style>
 
+    <style name="MessageHeaderShowPicsStyle" parent="MessageHeaderSmallStyle">
+        <item name="android:textColor">@color/conv_header_text_light</item>
+    </style>
+
     <style name="MessageHeaderUpperDateStyle" parent="MessageHeaderSmallStyle">
         <item name="android:minHeight">24dp</item>
     </style>
 
     <style name="MessageAttachmentsHeaderStyle" parent="MessageHeaderSmallStyle">
         <item name="android:textStyle">bold</item>
-        <item name="android:layout_marginBottom">8dp</item>
         <item name="android:textAllCaps">true</item>
     </style>
 
@@ -292,7 +298,7 @@
 
     <style name="MessageHeaderActionButtonStyle" parent="android:Widget.Holo.Button.Borderless">
         <item name="android:layout_width">@dimen/message_header_action_button_width</item>
-        <item name="android:layout_height">match_parent</item>
+        <item name="android:layout_height">@dimen/message_header_action_button_height</item>
         <item name="android:scaleType">center</item>
     </style>