Refine layout for output switcher panel

1. only make the output switcher tall enough to show 6.5 devices
2. enlarge album art to 52*52 and keep same size on group panel
3. reduce panel header top padding
4. enlarge slice first item top padding
5. update slider bar right padding
6. update panel height
7. align slice title item left with panel title icon
8. enlarge slice end item right padding

Bug: 156045699
Test: manual test
Change-Id: I51321d98ef483665689b7e258d6071df76382759

res/layout/panel_layout.xml

@@ -30,21 +30,20 @@
         <LinearLayout
             android:id="@+id/panel_header"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
+            android:layout_height="94dp"
             android:gravity="start|center_vertical"
             android:orientation="horizontal"
             android:visibility="gone">
 
             <LinearLayout
-                android:layout_width="36dp"
+                android:layout_width="wrap_content"
-                android:layout_height="36dp"
+                android:layout_height="wrap_content"
-                android:gravity="center_vertical|center_horizontal"
                 android:orientation="horizontal"
                 android:layout_marginStart="16dp">
                 <ImageView
                     android:id="@+id/title_icon"
-                    android:layout_height="wrap_content"
+                    android:layout_width="@dimen/output_switcher_panel_icon_size"
-                    android:layout_width="wrap_content"/>
+                    android:layout_height="@dimen/output_switcher_panel_icon_size"/>
             </LinearLayout>
 
             <LinearLayout
@@ -52,10 +51,7 @@
                 android:layout_height="wrap_content"
                 android:layout_marginStart="16dp"
                 android:layout_marginEnd="16dp"
-                android:gravity="center_vertical"
+                android:orientation="vertical">
-                android:orientation="vertical"
-                android:paddingBottom="9dp"
-                android:paddingTop="9dp">
                 <TextView
                     android:id="@+id/header_title"
                     android:layout_width="wrap_content"

res/values/dimens.xml

@@ -422,7 +422,9 @@
     <dimen name="list_preferred_item_padding">16dp</dimen>
 
     <!-- Output switcher panel related dimensions -->
-    <dimen name="output_switcher_slice_padding_top">12dp</dimen>
+    <dimen name="output_switcher_slice_padding_top">11dp</dimen>
+    <dimen name="output_switcher_slice_max_height">506dp</dimen>
+    <dimen name="output_switcher_panel_icon_size">52dp</dimen>
 
     <!-- Text padding for EmptyTextSettings -->
     <dimen name="empty_text_padding">24dp</dimen>

res/values/styles.xml

@@ -564,16 +564,17 @@
     </style>
 
     <style name="SliceRow.Slider">
-        <!-- 10dp start padding for the start icon -->
+        <!-- 4dp start padding for the start icon -->
-        <item name="titleItemStartPadding">10dp</item>
+        <item name="titleItemStartPadding">4dp</item>
 
         <!-- Padding between content and the start icon is 0dp -->
         <item name="contentStartPadding">0dp</item>
+        <item name="contentEndPadding">36dp</item>
 
         <!-- 0dp start padding for the end item -->
         <item name="endItemStartPadding">0dp</item>
-        <!-- 24dp end padding for the end item -->
+        <!-- 8dp end padding for the end item -->
-        <item name="endItemEndPadding">24dp</item>
+        <item name="endItemEndPadding">8dp</item>
 
         <!-- Align text with slider -->
         <item name="titleStartPadding">11dp</item>

src/com/android/settings/panel/PanelFragment.java

@@ -95,6 +95,7 @@ public class PanelFragment extends Fragment {
     private ImageView mTitleIcon;
     private TextView mHeaderTitle;
     private TextView mHeaderSubtitle;
+    private int mMaxHeight;
 
     private final Map<Uri, LiveData<Slice>> mSliceLiveData = new LinkedHashMap<>();
 
@@ -105,6 +106,18 @@ public class PanelFragment extends Fragment {
         return false;
     };
 
+    private final ViewTreeObserver.OnGlobalLayoutListener mPanelLayoutListener =
+            new ViewTreeObserver.OnGlobalLayoutListener() {
+                @Override
+                public void onGlobalLayout() {
+                    if (mLayoutView.getHeight() > mMaxHeight) {
+                        final ViewGroup.LayoutParams params = mLayoutView.getLayoutParams();
+                        params.height = mMaxHeight;
+                        mLayoutView.setLayoutParams(params);
+                    }
+                }
+            };
+
     private final ViewTreeObserver.OnGlobalLayoutListener mOnGlobalLayoutListener =
             new ViewTreeObserver.OnGlobalLayoutListener() {
                 @Override
@@ -123,6 +136,9 @@ public class PanelFragment extends Fragment {
     public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
             @Nullable Bundle savedInstanceState) {
         mLayoutView = inflater.inflate(R.layout.panel_layout, container, false);
+        mLayoutView.getViewTreeObserver()
+                .addOnGlobalLayoutListener(mPanelLayoutListener);
+        mMaxHeight = getResources().getDimensionPixelSize(R.dimen.output_switcher_slice_max_height);
         createPanelContent();
         return mLayoutView;
     }
@@ -159,6 +175,9 @@ public class PanelFragment extends Fragment {
         if (mLayoutView == null) {
             activity.finish();
         }
+        final ViewGroup.LayoutParams params = mLayoutView.getLayoutParams();
+        params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
+        mLayoutView.setLayoutParams(params);
 
         mPanelSlices = mLayoutView.findViewById(R.id.panel_parent_layout);
         mSeeMoreButton = mLayoutView.findViewById(R.id.see_more);
@@ -214,6 +233,12 @@ public class PanelFragment extends Fragment {
             mHeaderSubtitle.setText(mPanel.getSubTitle());
             if (mPanel.getHeaderIconIntent() != null) {
                 mTitleIcon.setOnClickListener(getHeaderIconListener());
+                mTitleIcon.setLayoutParams(new LinearLayout.LayoutParams(
+                        ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
+            } else {
+                final int size = getResources().getDimensionPixelSize(
+                        R.dimen.output_switcher_panel_icon_size);
+                mTitleIcon.setLayoutParams(new LinearLayout.LayoutParams(size, size));
             }
         }
         mSeeMoreButton.setOnClickListener(getSeeMoreListener());
@@ -378,6 +403,9 @@ public class PanelFragment extends Fragment {
             mPanelClosedKey = PanelClosedKeys.KEY_OTHERS;
         }
 
+        if (mLayoutView != null) {
+            mLayoutView.getViewTreeObserver().removeOnGlobalLayoutListener(mPanelLayoutListener);
+        }
         mMetricsProvider.action(
                 0 /* attribution */,
                 SettingsEnums.PAGE_HIDE,