Begin fixing layouts for account setup flows

Also address some RTL issues

b/10784160
b/13544189
b/13585832

Change-Id: I5c86497940ce4b972e0ee9189418f120391a8833

2 files changed, 100 insertions, 38 deletions

diff --git a/res/values/dimensions.xml b/res/values/dimensions.xml
index ad516f8e6..24e35592d 100644
--- a/res/values/dimensions.xml
+++ b/res/values/dimensions.xml
@@ -17,40 +17,55 @@
 <!-- non-xlarge -->
 
 <resources>
-    <dimen name="button_minWidth">100sp</dimen>
-
-    <!-- Account Setup Activities -->
-    <!-- inset distance for setup/settings buttons -->
-    <dimen name="setup_buttons_padding_left">16dip</dimen>
-    <dimen name="setup_buttons_padding_right">16dip</dimen>
-    <!-- distance of any button below the upper hairline -->
-    <dimen name="setup_buttons_padding_top">64dip</dimen>
-    <!-- distance of any button below the previous button (vertical stack) -->
-    <dimen name="setup_buttons_vertical_spacing">48dip</dimen>
-    <!-- distance of any button above the bottom of the screen -->
-    <dimen name="setup_buttons_padding_bottom">48dip</dimen>
+
+    <!-- Account setup type screen buttons -->
+    <dimen name="setup_account_type_button_min_width">100sp</dimen>
+    <dimen name="setup_account_type_buttons_vertical_spacing">16dp</dimen>
+    <dimen name="setup_account_type_buttons_width">212sp</dimen>
+    <dimen name="setup_account_type_buttons_height">54dp</dimen>
 
     <!-- Account settings fragments -->
-    <dimen name="settings_fragment_padding_top">16dip</dimen>
-    <dimen name="settings_fragment_padding_left">16dip</dimen>
-    <dimen name="settings_fragment_padding_right">16dip</dimen>
+    <dimen name="settings_fragment_padding_top">16dp</dimen>
+    <dimen name="settings_fragment_padding_side">16dp</dimen>
+    <dimen name="settings_fragment_padding_bottom">24dp</dimen>
 
     <!-- Account setup fragments -->
-    <dimen name="setup_fragment_padding_top">16dip</dimen>
-    <dimen name="setup_fragment_padding_left">16dip</dimen>
-    <dimen name="setup_fragment_padding_right">16dip</dimen>
+    <dimen name="setup_fragment_padding_top">16dp</dimen>
+    <dimen name="setup_fragment_padding_side">16dp</dimen>
+    <dimen name="setup_fragment_padding_bottom">16dp</dimen>
+
+    <!-- Account setup navigation buttons -->
+    <dimen name="setup_nav_button_padding_top">24dp</dimen>
+    <dimen name="setup_nav_button_padding_side">20dp</dimen>
+    <dimen name="setup_nav_button_padding_bottom">24dp</dimen>
+
+    <!-- Account setup text buttons -->
+    <dimen name="setup_text_button_width">160sp</dimen>
+    <dimen name="setup_text_button_height">40sp</dimen>
+    <dimen name="setup_text_button_text_size">18sp</dimen>
+
+    <!-- Account setup headline -->
+    <dimen name="setup_headline_text_size">30sp</dimen>
+    <dimen name="setup_headline_padding_top">24dp</dimen>
+    <dimen name="setup_headline_padding_side">24dp</dimen>
+
+    <!-- Account setup hairline -->
+    <dimen name="setup_top_divider_margin_top">8dp</dimen>
+    <dimen name="setup_top_divider_margin_bottom">16dp</dimen>
+    <dimen name="setup_top_divider_margin_side">24dp</dimen>
 
     <!-- inset distance for settings buttons -->
-    <dimen name="settings_buttons_padding_top">48dip</dimen>
-    <dimen name="settings_buttons_padding_bottom">48dip</dimen>
+    <dimen name="settings_buttons_padding_top">48dp</dimen>
+    <dimen name="settings_buttons_padding_bottom">48dp</dimen>
 
     <!-- In setup screens, the inset for all items below the headline+hairline -->
-    <dimen name="setup_item_inset_left">0dip</dimen>
-    <dimen name="setup_item_inset_right">0dip</dimen>
+    <dimen name="setup_item_inset_start">0dp</dimen>
+    <dimen name="setup_item_inset_end">0dp</dimen>
 
     <!-- Username/password entry -->
-    <dimen name="setup_credentials_input_width">340dip</dimen>
+    <dimen name="setup_credentials_input_width">340dp</dimen>
 
+    <!-- TODO: probably delete these -->
     <!-- Notification dialog -->
     <dimen name="dialog_text_size">10sp</dimen>
     <dimen name="dialog_padding_left">10sp</dimen>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 5402795a4..2f65a8708 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -14,42 +14,89 @@
      limitations under the License.
 -->
 
-<!-- non-xlarge.  See also values-xlarge for specializations for xlarge screens -->
 <resources>
+    <!-- Account Setup Activity -->
+    <style name="account_setup_activity">
+        <item name="android:background">@drawable/account_setup_background</item>
+    </style>
+
     <!-- The large headline at the top of every account setup screen -->
-    <!-- TODO these are estimates for the phone UX - final sizes TBD -->
-    <style name="accountSetupHeadline">
-        <item name="android:textSize">22sp</item>
+    <style name="account_setup_headline">
+        <item name="android:textSize">@dimen/setup_headline_text_size</item>
         <item name="android:textColor">@color/account_setup_headline_color</item>
+        <item name="android:paddingTop">@dimen/setup_headline_padding_top</item>
+        <item name="android:paddingLeft">@dimen/setup_headline_padding_side</item>
+        <item name="android:paddingRight">@dimen/setup_headline_padding_side</item>
+    </style>
+
+    <!-- The divider hairline below the headline in account setup screens -->
+    <style name="account_setup_top_divider">
+        <item name="android:layout_marginTop">@dimen/setup_top_divider_margin_top</item>
+        <item name="android:layout_marginLeft">@dimen/setup_top_divider_margin_side</item>
+        <item name="android:layout_marginRight">@dimen/setup_top_divider_margin_side</item>
+        <item name="android:layout_marginBottom">@dimen/setup_top_divider_margin_bottom</item>
+        <item name="android:background">@color/account_setup_divider_color</item>
+        <item name="android:layout_height">1px</item>
+    </style>
+
+    <style name="account_setup_fragment_container">
+        <item name="android:paddingTop">@dimen/setup_fragment_padding_top</item>
+        <item name="android:paddingLeft">@dimen/setup_fragment_padding_side</item>
+        <item name="android:paddingRight">@dimen/setup_fragment_padding_side</item>
+        <item name="android:paddingBottom">@dimen/setup_fragment_padding_bottom</item>
     </style>
 
     <!-- Wizard buttons on the account setup screens -->
-    <!-- TODO these are estimates for the phone UX - final sizes TBD -->
-    <style name="accountSetupButton">
-        <item name="android:layout_width">160sp</item>
-        <item name="android:layout_height">40sp</item>
+    <style name="account_setup_text_button">
+        <item name="android:layout_width">@dimen/setup_text_button_width</item>
+        <item name="android:layout_height">@dimen/setup_text_button_height</item>
         <item name="android:textColor">?android:attr/textColorPrimary</item>
-        <item name="android:textAppearance">?android:attr/textAppearanceSmall</item>
+        <item name="android:textSize">@dimen/setup_text_button_text_size</item>
     </style>
 
     <!-- Navigation buttons on the account setup screens -->
-    <style name="accountSetupNavButton">
+    <style name="account_setup_nav_button">
         <item name="android:background">@android:color/transparent</item>
     </style>
 
     <!-- Cancel/Done buttons on the account settings (server settings) fragments -->
-    <style name="accountSettingsButton">
-        <item name="android:layout_width">160sp</item>
+    <style name="account_settings_button">
+        <item name="android:layout_width">@dimen/setup_text_button_width</item>
         <item name="android:layout_height">40sp</item>
         <item name="android:textColor">?android:attr/textColorPrimary</item>
-        <item name="android:textAppearance">?android:attr/textAppearanceSmall</item>
+        <item name="android:textSize">@dimen/setup_text_button_text_size</item>
     </style>
 
     <!-- Info text in any account setup screen -->
-    <style name="accountSetupInfoText">
-        <item name="android:textSize">18sp</item>
+    <style name="account_setup_info_text">
+        <item name="android:textSize">20sp</item>
         <item name="android:textColor">@color/account_setup_info_text_color</item>
     </style>
 
+    <!-- Account setup row label text -->
+    <style name="account_setup_label_text">
+        <item name="android:textColor">?android:attr/textColorPrimary</item>
+        <item name="android:textAppearance">?android:attr/textAppearanceSmall</item>
+    </style>
+
+    <!-- Client certificate UI. See also values in styles-ldrtl.xml -->
+    <!-- Client certificate 'select' button, see also styles-ldrtl.xml -->
+    <style name="client_certificate_button"
+           parent="account_setup_text_button">
+        <item name="android:layout_alignParentRight">true</item>
+   </style>
+
+    <!-- Client certificate title, see also styles-ldrtl.xml -->
+    <style name="client_certificate_title">
+        <item name="android:layout_alignParentLeft">true</item>
+        <item name="android:layout_toLeftOf">@id/select_button</item>
+    </style>
+
+    <!-- Client certificate alias, see also styles-ldrtl.xml -->
+    <style name="client_certificate_alias">
+        <item name="android:layout_marginLeft">@dimen/setup_item_inset_start</item>
+        <item name="android:layout_alignParentLeft">true</item>
+        <item name="android:layout_toLeftOf">@id/select_button</item>
+    </style>
 </resources>