Redesign sign in and sign in confirmation screens for Narnia 2.0

chrome/android/java/res/layout/account_signin_view.xml

Index: chrome/android/java/res/layout/account_signin_view.xml
diff --git a/chrome/android/java/res/layout/account_signin_view.xml b/chrome/android/java/res/layout/account_signin_view.xml
index 41288f0a43c4d672fbf5eb9711bc0d94a442d92e..d07dec8c49074958ddb8994885539331464a92b0 100644
--- a/chrome/android/java/res/layout/account_signin_view.xml
+++ b/chrome/android/java/res/layout/account_signin_view.xml
@@ -8,97 +8,234 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:chrome="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:background="@color/signin_body_background">
 
-    <ScrollView
+    <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_marginBottom="72dp"
-        android:fillViewport="true">
+        android:layout_marginBottom="52dp"
+        android:orientation="vertical">
 
         <LinearLayout
-            android:id="@+id/fre_main_layout"
+            android:id="@+id/signin"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="vertical"
-            android:gravity="center_horizontal">
+            android:orientation="vertical">
 
             <TextView
-                android:id="@+id/title"
-                android:text="@string/signin_set_up_chrome"
-                style="@style/FreTitle"/>
-            
-            <!-- The orientation of this view is changed dynamically to give a nicer layout when in
-            landscape mode on devices with small screens. -->
-            <LinearLayout
-                android:id="@+id/fre_image_and_content"
+                android:id="@+id/signin_title"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="start"
+                android:gravity="bottom"
+                android:paddingStart="16dp"
+                android:paddingEnd="16dp" 
+                android:paddingBottom="16dp"
+                android:background="@color/signin_head_background"
+                android:textColor="@color/default_text_color"
+                android:textSize="@dimen/fre_title_text_size"
+                android:text="@string/sign_in_to_chrome"/>
+
+            <View 
+                android:layout_width="match_parent"
+                android:layout_height="1dp"
+                android:background="@color/signin_border_line_color"
+                android:alpha="0.08"/>
+
+            <org.chromium.chrome.browser.signin.AccountListView 
+                android:id="@+id/signin_account_list"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:gravity="center_horizontal"
-                android:layout_marginTop="@dimen/fre_vertical_spacing">
+                android:layout_gravity="start"
+                android:paddingStart="16dp"
+                android:paddingEnd="16dp"
+                android:divider="@null"
+                android:dividerHeight="0dp"
+                android:scrollbars="none"
+                android:requiresFadingEdge="vertical"
+                android:fadingEdgeLength="48dp"/>
+
+            <View
+                android:layout_width="match_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
+                android:visibility="invisible"/>
+
+        </LinearLayout>
 
-                <org.chromium.chrome.browser.firstrun.ImageCarousel
-                    android:id="@+id/image"
-                    android:layout_width="@dimen/signin_image_carousel_width"
-                    android:layout_height="@dimen/fre_image_height" />
+        <org.chromium.chrome.browser.signin.AccountSigninConfirmationView
+            android:id="@+id/signin_confirmation_layout"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:scrollbars="none"
+            android:requiresFadingEdge="vertical"
+            android:fadingEdgeLength="48dp"
+            android:visibility="gone">
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical">
 
                 <LinearLayout
-                    android:id="@+id/fre_content_wrapper"
-                    android:layout_width="0dp"
-                    android:layout_height="0dp"
-                    android:layout_weight="1"
-                    android:layout_marginTop="@dimen/fre_vertical_spacing"
-                    android:layout_marginEnd="@dimen/fre_content_margin"
-                    android:layout_marginStart="@dimen/fre_content_margin"
-                    android:orientation="vertical" >
-
-                    <Spinner
-                        style="@style/Widget.AppCompat.Spinner.Underlined"
-                        android:id="@+id/google_accounts_spinner"
-                        android:layout_width="wrap_content"
+                    android:id="@+id/signin_confirmation_head"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:paddingStart="16dp"
+                    android:paddingEnd="16dp"
+                    android:background="@color/signin_head_background"
+                    android:orientation="vertical">
+
+                    <View
+                        android:layout_width="match_parent"
+                        android:layout_height="0dp"
+                        android:layout_weight="1"
+                        android:visibility="invisible"/>
+
+                    <ImageView
+                        android:id="@+id/signin_account_image"
+                        android:layout_width="64dp"
+                        android:layout_height="64dp"
+                        android:layout_gravity="start|bottom"
+                        android:layout_marginBottom="24dp"
+                        android:scaleType="fitXY"
+                        android:contentDescription="@null"/>
+
+                    <TextView
+                        android:id="@+id/signin_account_name"
+                        android:layout_width="match_parent"
                         android:layout_height="wrap_content"
-                        android:layout_marginBottom="@dimen/fre_vertical_spacing"
-                        android:layout_gravity="center_horizontal"
-                        android:popupBackground="#ffffff"
-                        android:textColor="@color/fre_text_color" />
+                        android:layout_gravity="start|bottom"
+                        android:layout_marginBottom="8dp"
+                        android:textColor="@color/default_text_color"
+                        android:textSize="@dimen/fre_title_text_size"/>
 
                     <TextView
-                        android:id="@+id/confirm_account_email"
-                        android:layout_width="wrap_content"
+                        android:id="@+id/signin_account_email"
+                        android:layout_width="match_parent"
                         android:layout_height="wrap_content"
-                        android:layout_gravity="center"
+                        android:layout_gravity="start|bottom"
                         android:layout_marginBottom="16dp"
-                        android:paddingTop="12dp"
-                        android:paddingBottom="8dp"
-                        android:textColor="@color/fre_text_color"
-                        android:visibility="gone" />
-
-                    <org.chromium.ui.widget.TextViewWithClickableSpans
-                        android:id="@+id/description"
-                        android:layout_width="wrap_content"
+                        android:textColor="@color/descriptive_text_color"
+                        android:textSize="@dimen/fre_normal_text_size"/>
+                </LinearLayout>
+
+                <LinearLayout
+                    android:id="@+id/signin_confirmation_content"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:paddingStart="16dp"
+                    android:paddingEnd="16dp"
+                    android:orientation="vertical">
+                    
+                    <LinearLayout
+                        android:id="@+id/signin_chrome_sync"
+                        android:layout_width="match_parent"
                         android:layout_height="wrap_content"
-                        android:gravity="center"
-                        android:lineSpacingMultiplier="1.4"
-                        android:text="@string/signin_account_choice_description"
-                        android:textColor="@color/signin_light_text_color"
-                        android:textSize="@dimen/fre_normal_text_size" />
+                        android:layout_marginTop="16dp"
+                        android:layout_marginBottom="16dp"
+                        android:orientation="vertical">
+
+                        <TextView
+                            android:id="@+id/signin_chrome_sync_title"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_marginBottom="8dp"
+                            android:layout_gravity="start"
+                            android:gravity="start"
+                            android:text="@string/signin_signed_in_description_title"
+                            android:textColor="@color/default_text_color"
+                            android:textSize="@dimen/fre_normal_text_size"
+                            android:drawableStart="@drawable/confirmation_logo_chrome"

[Bernhard Bauer, 2016/03/31 17:02:59]

Nit: I would rename this to ...chrome_sync, because it refers to the Chrome Sync
service here (the distinction is important in case the build does not have the
Chrome branding, but rather the Chromium one).

Also, "confirmation" alone isn't very descriptive, and these are in a single big
directory with all the other drawables. signin_confirmation_... maybe? Or just
leave it out and only use "chrome_sync_logo" or something.

[gogerald1, 2016/03/31 18:18:48]

Done.

+                            android:drawablePadding="16dp"/>
+
+                        <org.chromium.ui.widget.TextViewWithClickableSpans
+                            android:id="@+id/signin_chrome_sync_description"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_marginStart="32dp"
+                            android:layout_gravity="start"
+                            android:gravity="start"
+                            android:lineSpacingMultiplier="1.4"
+                            android:text="@string/signin_signed_in_description"
+                            android:textColor="@color/descriptive_text_color"
+                            android:textSize="@dimen/fre_normal_text_size" />
                     </LinearLayout>
-                    
+
+                    <View 
+                        android:layout_width="match_parent"
+                        android:layout_height="1dp"
+                        android:layout_marginStart="32dp"
+                        android:background="@color/signin_border_line_color"
+                        android:alpha="0.08"/>
+
+                    <LinearLayout
+                        android:id="@+id/signin_personalize_service"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_marginTop="16dp"
+                        android:orientation="vertical">
+
+                        <TextView
+                            android:id="@+id/signin_personalize_service_title"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_marginBottom="8dp"
+                            android:layout_gravity="start"
+                            android:gravity="start"
+                            android:text="@string/personalize_google_service"
+                            android:textColor="@color/default_text_color"
+                            android:textSize="@dimen/fre_normal_text_size"
+                            android:drawableStart="@drawable/confirmation_logo_googleg"
+                            android:drawablePadding="16dp"/>
+
+                        <TextView
+                            android:id="@+id/signin_personalize_service_description"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_marginStart="32dp"
+                            android:layout_marginBottom="16dp"
+                            android:layout_gravity="start"
+                            android:gravity="start"
+                            android:lineSpacingMultiplier="1.4"
+                            android:text="@string/signin_account_choice_description"
+                            android:textColor="@color/descriptive_text_color"
+                            android:textSize="@dimen/fre_normal_text_size"/>
+
+                        <CheckBox
+                            android:id="@+id/signin_personalize_service_checkbox"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_marginStart="27dp"
+                            android:layout_gravity="start"
+                            android:paddingStart="11dp"
+                            android:gravity="start"
+                            android:lineSpacingMultiplier="1.4"
+                            android:text="@string/open_myaccount_after_sign_in"
+                            android:textColor="@color/descriptive_text_color"
+                            android:textSize="@dimen/fre_normal_text_size" />
+
+                        <View
+                            android:id="@+id/signin_confirmation_bottom_padding"
+                            android:layout_width="match_parent"
+                            android:layout_height="36dp"
+                            android:visibility="invisible"/>
+                    </LinearLayout>
+                </LinearLayout>
             </LinearLayout>
-        </LinearLayout>
-    </ScrollView>
+        </org.chromium.chrome.browser.signin.AccountSigninConfirmationView>
+    </LinearLayout>
 
-    <!-- layout_height = 72dp = fre_button_bar_height + paddingTop -->
+    <!-- layout_height = 52dp -->
     <LinearLayout
         android:id="@+id/button_bar"
         android:layout_width="match_parent"
-        android:layout_height="72dp"
+        android:layout_height="52dp"
         android:layout_gravity="bottom"
-        android:orientation="horizontal"
-        android:paddingTop="16dp"
         android:paddingStart="16dp"
-        android:paddingEnd="16dp" >
+        android:paddingEnd="16dp"
+        android:orientation="horizontal">
 
         <!--suppress ButtonStyle -->
         <Button
@@ -109,8 +246,7 @@
             android:text="@string/fre_skip_text"
             android:textAllCaps="true"
             android:textColor="@color/light_active_color"
-            android:textSize="14sp"
-            android:layout_marginBottom="24dp" />
+            android:textSize="14sp"/>
 
         <View
             android:layout_width="0dp"
@@ -127,8 +263,7 @@
             android:textAllCaps="true"
             android:textColor="@android:color/white"
             android:textSize="14sp"
-            chrome:buttonColor="@color/light_active_color"
-            android:layout_marginBottom="24dp" />
+            chrome:buttonColor="@color/light_active_color"/>
 
         <View
             android:id="@+id/positive_button_end_padding"