Widget tray alignment according to UX spec

- Fixing an issue where widget preview is not loaded do to faulty
canceling of loading async task when view is detached from the window.

b/20338334

Change-Id: I1e3bd6b6cdafda8d1e0a7a0e87c8089100c341a7

4 files changed, 22 insertions, 28 deletions

diff --git a/res/layout/widget_cell.xml b/res/layout/widget_cell.xml
index 64ddea1ae..cb1c812cb 100644
--- a/res/layout/widget_cell.xml
+++ b/res/layout/widget_cell.xml
@@ -17,13 +17,11 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:launcher="http://schemas.android.com/apk/res-auto"
     android:layout_width="@dimen/widget_preview_container_width"
-    android:layout_height="wrap_content"
+    android:layout_height="@dimen/widget_cell_height"
     android:layout_weight="1"
-    android:layout_marginTop="@dimen/widget_preview_padding_top"
-    android:layout_marginLeft="8dp"
-    android:layout_marginBottom="8dp"
+    android:layout_marginRight="@dimen/widget_row_divider"
     android:orientation="vertical"
-    android:background="@color/bubble_dark_background"
+    android:background="@color/widgets_cell_color"
     android:focusable="true">
 
     <LinearLayout
diff --git a/res/layout/widgets_list_row_view.xml b/res/layout/widgets_list_row_view.xml
index f94d02330..12f6401e4 100644
--- a/res/layout/widgets_list_row_view.xml
+++ b/res/layout/widgets_list_row_view.xml
@@ -20,7 +20,6 @@
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:focusable="true"
-    android:background="@drawable/focusable_view_bg"
     android:descendantFocusability="afterDescendants">
 
     <!-- Section info -->
@@ -29,24 +28,23 @@
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:focusable="true"
-        android:background="@drawable/focusable_view_bg"
         android:descendantFocusability="afterDescendants">
         <ImageView
             android:id="@+id/section_image"
-            android:layout_width="@dimen/widget_section_height"
             android:layout_height="@dimen/widget_section_height"
-            android:paddingLeft="@dimen/widget_section_icon_padding"
-            android:paddingRight="@dimen/widget_section_icon_padding"
-            android:paddingTop="@dimen/widget_section_icon_padding"
-            android:paddingBottom="@dimen/widget_section_icon_padding"
+            android:layout_width="@dimen/widget_section_icon_width"
+            android:paddingLeft="@dimen/widget_section_icon_horizontal_padding"
+            android:paddingRight="@dimen/widget_section_icon_horizontal_padding"
+            android:paddingTop="@dimen/widget_section_icon_vertical_padding"
+            android:paddingBottom="@dimen/widget_section_icon_vertical_padding"
             android:background="@color/widget_text_panel"
         />
         <TextView
             android:id="@+id/section"
             android:layout_width="match_parent"
             android:layout_height="@dimen/widget_section_height"
-            android:paddingLeft="16dp"
-            android:paddingRight="16dp"
+            android:paddingEnd="@dimen/widget_preview_label_horizontal_padding"
+            android:paddingRight="@dimen/widget_preview_label_horizontal_padding"
             android:singleLine="true"
             android:ellipsize="end"
             android:gravity="start|center_vertical"
@@ -57,31 +55,24 @@
     </LinearLayout>
 
     <!--  Widget list -->
-    <RelativeLayout 
+    <RelativeLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_gravity="end"
+        android:background="@color/widgets_cell_color"
         >
-        <!-- TODO(hyunyoungs): replace the indicator with actual assets. -->
-        <FrameLayout
-            android:id="@+id/scrollable_indicator"
-            android:layout_gravity="center_vertical"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:background="@drawable/ic_pageindicator_default"
-            android:visibility="invisible"
-            />
         <HorizontalScrollView
             android:id="@+id/widgets_scroll_container"
             android:layout_width="match_parent"
             android:layout_height="@dimen/widget_cell_height"
-            android:paddingLeft="40dp"
+            android:layout_marginLeft="@dimen/widget_row_padding"
             android:scrollbars="none" >
             <LinearLayout
                 android:id="@+id/widgets_cell_list"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:orientation="horizontal" />
+                android:orientation="horizontal"
+                android:background="@color/widget_text_panel"/>
         </HorizontalScrollView>
     </RelativeLayout>
 </LinearLayout>
diff --git a/res/values/colors.xml b/res/values/colors.xml
index 3a06bd95a..58a4d4ce1 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -42,4 +42,5 @@
 
     <!-- Widgetss view -->
     <color name="widgets_view_section_text_color">#009688</color>
+    <color name="widgets_cell_color">#263238</color>
 </resources>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index da1108271..a57ae89d0 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -86,12 +86,16 @@
     <dimen name="widget_preview_label_horizontal_padding">8dp</dimen>
     <dimen name="widget_preview_horizontal_padding">8dp</dimen>
 
-    <dimen name="widget_section_height">52dp</dimen>
-    <dimen name="widget_section_icon_padding">8dp</dimen>
+    <dimen name="widget_section_height">56dp</dimen>
+    <dimen name="widget_section_icon_width">72dp</dimen>
+    <dimen name="widget_section_icon_vertical_padding">8dp</dimen>
+    <dimen name="widget_section_icon_horizontal_padding">16dp</dimen>
 
     <!-- Equation: widget_preview_size + 2 * widget_preview_padding_horizontal -->
     <dimen name="widget_preview_container_width">136dp</dimen>
     <dimen name="widget_cell_height">150dp</dimen>
+    <dimen name="widget_row_padding">8dp</dimen>
+    <dimen name="widget_row_divider">1dp</dimen>
 
     <!-- Padding applied to shortcut previews -->
     <dimen name="shortcut_preview_padding_left">0dp</dimen>