Impl the selecting flow in style picker

 - Implement the select/apply flow in style picker
 - Adjust the layout and tiles, doc: https://docs.google.com/presentation/d/15JadcGi5k1_0znUN_XdFpU7UxeXwxjK3Y7LxvhW5ETM/edit?ts=5eb5f9a8#slide=id.g777aaff414_1_0
 video: https://drive.google.com/file/d/1gW6r43DuinIdjto8XC7P-T9hWjmflk6I/view?usp=sharing

Bug: 151285478
Test: manually
Change-Id: I067cbc01f8ac9b7b8487566381c5e3f58242f706
diff --git a/res/layout/custom_theme_option.xml b/res/layout/custom_theme_option.xml
index c91cbf1..2805185 100644
--- a/res/layout/custom_theme_option.xml
+++ b/res/layout/custom_theme_option.xml
@@ -16,15 +16,22 @@
 -->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
-    android:layout_height="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingHorizontal="@dimen/option_padding_horizontal"
+    android:paddingBottom="@dimen/option_bottom_margin"
+    android:clipChildren="false"
+    android:clipToPadding="false"
     android:orientation="vertical">
 
     <TextView
         android:id="@+id/option_label"
-        android:layout_width="wrap_content"
+        android:layout_width="@dimen/option_tile_width"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal"
         android:layout_marginBottom="@dimen/theme_option_label_margin"
+        android:ellipsize="end"
+        android:gravity="center_horizontal"
+        android:maxLines="1"
         android:textAppearance="@style/OptionTitleTextAppearance"/>
     <FrameLayout
         android:id="@+id/option_tile"
@@ -35,8 +42,8 @@
         android:paddingVertical="@dimen/option_tile_padding_vertical"
         android:background="@drawable/option_border_custom">
         <ImageView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
+            android:layout_width="@dimen/option_icon_size"
+            android:layout_height="@dimen/option_icon_size"
             android:layout_gravity="center"
             android:src="@drawable/ic_add_24px"
             android:tint="?android:attr/colorAccent" />
diff --git a/res/layout/theme_option.xml b/res/layout/theme_option.xml
index 98fae71..557d532 100644
--- a/res/layout/theme_option.xml
+++ b/res/layout/theme_option.xml
@@ -17,7 +17,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:paddingRight="2dp"
+    android:paddingHorizontal="@dimen/option_padding_horizontal"
     android:paddingBottom="@dimen/option_bottom_margin"
     android:clipChildren="false"
     android:clipToPadding="false"
@@ -47,21 +47,21 @@
             android:layout_height="@dimen/theme_option_icon_sample_height"
             android:layout_alignParentTop="true"
             android:layout_alignParentLeft="true"
-            android:layout_margin="@dimen/theme_option_sample_padding"
             android:tint="?android:colorForeground"/>
         <ImageView
             android:id="@+id/theme_option_shape"
             android:layout_width="@dimen/theme_option_shape_sample_width"
             android:layout_height="@dimen/theme_option_shape_sample_height"
-            android:layout_alignParentRight="true"
             android:layout_alignBottom="@+id/theme_option_icon"
-            android:layout_marginHorizontal="@dimen/theme_option_sample_padding"/>
+            android:layout_toEndOf="@id/theme_option_icon"
+            android:layout_marginLeft="@dimen/theme_option_sample_margin"/>
         <TextView
             android:id="@+id/theme_option_font"
             android:layout_width="@dimen/theme_option_font_sample_width"
             android:layout_height="@dimen/theme_option_font_sample_height"
-            android:layout_alignParentBottom="true"
-            android:layout_gravity="center_horizontal"
+            android:layout_gravity="center"
+            android:layout_below="@id/theme_option_icon"
+            android:layout_marginTop="@dimen/option_bottom_margin"
             android:autoSizeMaxTextSize="@dimen/theme_option_font_text_size"
             android:autoSizeMinTextSize="@dimen/theme_option_font_min_text_size"
             android:autoSizeTextType="uniform"
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index b8fe190..81a13ca 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -30,20 +30,22 @@
     <dimen name="options_container_height">120dp</dimen>
     <dimen name="options_container_width">0dp</dimen>
     <dimen name="option_tile_width">88dp</dimen>
-    <dimen name="theme_option_icon_sample_height">18dp</dimen>
-    <dimen name="theme_option_icon_sample_width">18dp</dimen>
-    <dimen name="theme_option_shape_sample_height">16dp</dimen>
-    <dimen name="theme_option_shape_sample_width">16dp</dimen>
-    <dimen name="theme_option_font_sample_height">16dp</dimen>
+    <dimen name="option_icon_size">16dp</dimen>
+    <dimen name="theme_option_icon_sample_height">22dp</dimen>
+    <dimen name="theme_option_icon_sample_width">22dp</dimen>
+    <dimen name="theme_option_shape_sample_height">20dp</dimen>
+    <dimen name="theme_option_shape_sample_width">20dp</dimen>
+    <dimen name="theme_option_font_sample_height">20dp</dimen>
     <dimen name="theme_option_font_sample_width">52dp</dimen>
-    <dimen name="theme_option_sample_padding">5dp</dimen>
+    <dimen name="theme_option_sample_margin">10dp</dimen>
     <!-- Note, using dp instead of sp as this is just the "+" symbol, not text -->
-    <dimen name="option_tile_padding_vertical">16dp</dimen>
-    <dimen name="option_tile_padding_horizontal">16dp</dimen>
+    <dimen name="option_tile_padding_vertical">18dp</dimen>
+    <dimen name="option_tile_padding_horizontal">18dp</dimen>
 
     <dimen name="option_bottom_margin">8dp</dimen>
+    <dimen name="option_padding_horizontal">2dp</dimen>
     <!-- Note, using dp instead of sp as this text is more like a "snapshot" of the font -->
-    <dimen name="theme_option_font_text_size">16dp</dimen>
+    <dimen name="theme_option_font_text_size">20dp</dimen>
     <dimen name="theme_option_font_min_text_size">15dp</dimen>
 
     <dimen name="option_tile_margin_horizontal">6dp</dimen>
diff --git a/src/com/android/customization/picker/theme/ThemeFragment.java b/src/com/android/customization/picker/theme/ThemeFragment.java
index d8f3a6e..50f99b6 100644
--- a/src/com/android/customization/picker/theme/ThemeFragment.java
+++ b/src/com/android/customization/picker/theme/ThemeFragment.java
@@ -162,7 +162,10 @@
         mBottomActionBar = bottomActionBar;
         mBottomActionBar.bindBackButtonToSystemBackKey(getActivity());
         mBottomActionBar.showActionsOnly(APPLY);
-        mBottomActionBar.setActionClickListener(APPLY, v -> applyTheme());
+        mBottomActionBar.setActionClickListener(APPLY, v -> {
+            mBottomActionBar.disableActions();
+            applyTheme();
+        });
     }
 
     @Override
@@ -177,15 +180,19 @@
         mThemeManager.apply(mSelectedTheme, new Callback() {
             @Override
             public void onSuccess() {
+                // Since we disabled it when clicked apply button.
+                mBottomActionBar.enableActions();
+                mBottomActionBar.hide();
                 Toast.makeText(getContext(), R.string.applied_theme_msg,
                         Toast.LENGTH_LONG).show();
-                getActivity().finish();
-                getActivity().overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
             }
 
             @Override
             public void onError(@Nullable Throwable throwable) {
                 Log.w(TAG, "Error applying theme", throwable);
+                // Since we disabled it when clicked apply button.
+                mBottomActionBar.enableActions();
+                mBottomActionBar.hide();
                 Toast.makeText(getContext(), R.string.apply_theme_error_msg,
                         Toast.LENGTH_LONG).show();
             }
@@ -233,6 +240,9 @@
             } else {
                 if (mSelectedTheme != null) {
                     mOptionsController.setSelectedOption(mSelectedTheme);
+                    // Set selected option above will show BottomActionBar,
+                    // hide BottomActionBar for the mis-trigger.
+                    mBottomActionBar.hide();
                 } else {
                     reloadOptions();
                 }
@@ -359,6 +369,9 @@
                 mOptionsController.setAppliedOption(mSelectedTheme);
             }
             mOptionsController.setSelectedOption(mSelectedTheme);
+            // Set selected option above will show BottomActionBar,
+            // hide BottomActionBar for the mis-trigger.
+            mBottomActionBar.hide();
         }, true);
     }