Material design of common edit screen fields

The normal edit screen fields, such as phone number and location,
have been updated to look like the new Material design mocks. I expect
this to be the largest CL needed to finish b/18004959.

Aspects of the Editor that haven't been touched in this CL
- readonly editor
- collapse nickname and phonetic name into StructuredNameEditorView. Then make
  sure the layout is correct
- photo editor
- Material insert/delete interpolators (maybe fast_out_slow_in)
- account header

Some complicated/weird parts of the CL:
-KindSectionView no longer displays an "Add details" button. Instead
 it always shows an additional empty row for each mimeType. The logic
 that handles this is mostly inside #updateEmptyEditors(). A lot of code
 could be deleted from RawContactEditorView because of this.
-LabeledEditorView's adapter displays TextView's inside Spinner. In order
 to make the TextViews look like EditTexts, I set the EditText's background
 (so the 9patch padding is used) and then later remove the background.
-Instead of keeping an expansion_view_container in every single field,
 I only kept it where it was needed. As a result, I needed to add
 null checks into the TextFieldsEditorView base class.
-I made an effort to reduce the depth of the view hierarchy and reduce
 the use of LinearLayout weights for performance reasons, when it was
 easy to do so

Bug: 18004959
Change-Id: I5934ca189b66468834faf3bb995b172ae2f90bed

4 files changed, 38 insertions, 19 deletions

diff --git a/res/values/colors.xml b/res/values/colors.xml
index 985a4e5c7..daea14bca 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -54,4 +54,7 @@
 
     <!-- Background color of pinned header items. -->
     <color name="list_item_pinned_header_color">@color/background_primary</color>
+
+    <!-- Color of the mime-type icons inside the editor. 50% black. -->
+    <color name="editor_icon_color">#7f7f7f</color>
 </resources>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 857045c46..69b56dcf4 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -37,27 +37,34 @@
     <!-- Minimum height of a row in the Editor -->
     <dimen name="editor_min_line_item_height">48dip</dimen>
 
-    <!-- Top padding of an EditText in the Editor -->
-    <dimen name="editor_text_field_top_padding">8dip</dimen>
+    <!-- The height and width of the delete button should be the same size as an editor row -->
+    <dimen name="editor_delete_button_size">@dimen/editor_min_line_item_height</dimen>
 
-    <!-- Bottom padding of an EditText in the Editor -->
-    <dimen name="editor_text_field_bottom_padding">7dip</dimen>
+    <!-- Top margin applied to mime-type icons inside the editor. This is needed to give the
+        appearance that the icons are top aligned with the text, since visible text doesn't
+        start at the very top of TextViews. -->
+    <dimen name="editor_kind_icon_top_margin">9dp</dimen>
 
-    <!-- Right padding of a field in the Editor -->
-    <dimen name="editor_field_right_padding">4dip</dimen>
+    <!-- RHS padding added to spinners in the editor. This separates the spinner text from the
+        spinner graphic since b/18194928 causes the spinner to always be on the RHS.
+        In LTR mode this shouldn't have an observable affect. We set paddingRight instead of
+        drawablePadding since the spinner graphic is not a normal drawable.  -->
+    <dimen name="editor_spinner_right_padding_workaround">24dip</dimen>
 
-    <!-- Left padding of a field in the Editor -->
-    <dimen name="editor_field_left_padding">4dip</dimen>
+    <!-- Size of input form text inside the contact editor -->
+    <dimen name="editor_form_text_size">16sp</dimen>
 
-    <!-- End padding added to spinners in the editor. This separates the spinner text from the
-        spinner graphic when Button gravity is incorrectly set in RTL mode
-        (see framework bug b/17011078. In LTR mode this shouldn't have an observable affect.
-        We set paddingEnd instead of drawablePadding since the spinner graphic is not a normal
-        drawable.  -->
-    <dimen name="editor_spinner_end_padding_workaround">24dip</dimen>
+    <!-- Width and height of the mime-type icons inside the editor -->
+    <dimen name="editor_kind_icon_size">24dp</dimen>
+
+    <!-- Padding below every editor view, such as LabeledEditorView -->
+    <dimen name="editor_padding_between_editor_views">24dp</dimen>
 
     <!-- Width of the Type-Label in the Editor -->
-    <dimen name="editor_type_label_width">100dip</dimen>
+    <dimen name="editor_type_label_width">150dip</dimen>
+
+    <!-- Width of the drop down that appears when you click on the Type-Label spinner in the editor -->
+    <dimen name="editor_type_label_dropdown_width">150dp</dimen>
 
     <!-- Left padding of the label in the add field button for the contact editor -->
     <dimen name="editor_add_field_label_left_padding">16dip</dimen>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index e8b954ecc..bd0391746 100644
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -426,9 +426,6 @@
     <!-- Label to clear all selection in multiple picker -->
     <string name="menu_select_none">"Unselect all"</string>
 
-    <!-- The add field button shown in the editor under each editable Raw Contact [CHAR LIMIT=30] -->
-    <string name="add_field">Add another field</string>
-
     <!-- The button to add another entry of a specific data type (i.e. email, phone, address) to a contact in the Raw Contact Editor [CHAR LIMIT=22] -->
     <string name="add_new_entry_for_section">Add new</string>
 
diff --git a/res/values/styles.xml b/res/values/styles.xml
index d66cf4e19..1261a7a25 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -284,11 +284,14 @@
         <item name="android:layout_height">wrap_content</item>
     </style>
 
-    <style name="SpinnerButtonStyle" parent="@android:style/Widget.Material.Spinner">
+    <style name="SpinnerButtonStyle" parent="@android:style/Widget.Material.Spinner.Underlined">
         <!-- When applying the spinner style to a Button we need to disable the shadow animation
             on the button since the spinner background is transparent. Otherwise the spinner-button
             will look ridiculous. -->
         <item name="android:stateListAnimator">@null</item>
+        <!-- We want our spinner's to use the same gravity as an EditText, so that they look
+            visually consistent with other controls in our forms -->
+        <item name="android:gravity">start|center_vertical</item>
     </style>
 
     <style name="EditKindSeparatorTextViewStyle" parent="ContactListSeparatorTextViewStyle">
@@ -308,4 +311,13 @@
     <style name="ContactsAlertDialogTheme" parent="@android:style/Theme.Material.Light.Dialog">
         <item name="android:colorAccent">@color/primary_color</item>
     </style>
+
+    <style name="EditKindIconStyle">
+        <item name="android:layout_width">24dp</item>
+        <item name="android:layout_height">24dp</item>
+        <item name="android:tint">@color/editor_icon_color</item>
+        <item name="android:layout_marginStart">16dp</item>
+        <item name="android:layout_marginEnd">32dp</item>
+        <item name="android:layout_marginTop">@dimen/editor_kind_icon_top_margin</item>
+    </style>
 </resources>