Update menu look and feel on Android

- Change the overflow menu to have an updated layout.

BUG=375379

Review URL: https://codereview.chromium.org/377083002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@282563 0039d316-1c4b-4281-b951-d872f2087c98

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

@@ -6,54 +6,41 @@
 -->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
+    android:layout_height="?android:attr/listPreferredItemHeightSmall"
     android:layout_gravity="top|start"
     android:orientation="horizontal">
 
     <ImageButton
         android:id="@+id/button_one"
-        android:layout_width="wrap_content"
+        android:layout_width="56dp"
         android:layout_height="match_parent"
-        android:layout_weight="1"
+        android:paddingEnd="8dp"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:scaleType="center" />
 
-    <View
-        android:layout_width="1dp"
-        android:layout_height="?android:attr/listPreferredItemHeightSmall"
-        android:background="?android:attr/listDivider" />
-
     <ImageButton
         android:id="@+id/button_two"
-        android:layout_width="wrap_content"
+        android:layout_width="64dp"
         android:layout_height="match_parent"
-        android:layout_weight="1"
+        android:paddingStart="8dp"
+        android:paddingEnd="8dp"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:scaleType="center" />
 
-    <View
-        android:layout_width="1dp"
-        android:layout_height="?android:attr/listPreferredItemHeightSmall"
-        android:background="?android:attr/listDivider" />
-
     <ImageButton
         android:id="@+id/button_three"
-        android:layout_width="wrap_content"
+        android:layout_width="64dp"
         android:layout_height="match_parent"
-        android:layout_weight="1"
+        android:paddingStart="8dp"
+        android:paddingEnd="8dp"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:scaleType="center" />
 
-    <View
-        android:layout_width="1dp"
-        android:layout_height="?android:attr/listPreferredItemHeightSmall"
-        android:background="?android:attr/listDivider" />
-
     <ImageButton
         android:id="@+id/button_four"
-        android:layout_width="wrap_content"
+        android:layout_width="56dp"
         android:layout_height="match_parent"
-        android:layout_weight="1"
+        android:paddingStart="8dp"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:scaleType="center" />
 

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

@@ -7,26 +7,26 @@
 <!-- Layout for each item in the menu popup -->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
+    android:layout_height="?android:attr/listPreferredItemHeightSmall"
+    android:paddingStart="?android:attr/listPreferredItemPaddingStart"
+    android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
     android:background="?android:attr/listChoiceBackgroundIndicator">
     <TextView
         android:id="@+id/menu_item_text"
         android:textAppearance="?android:attr/textAppearanceLargePopupMenu"
         android:layout_weight="1"
         android:layout_width="wrap_content"
-        android:layout_height="?android:attr/listPreferredItemHeightSmall"
+        android:layout_height="match_parent"
         android:layout_gravity="start"
         android:gravity="center_vertical"
         android:singleLine="true"
-        android:paddingStart="9dp"
         android:paddingEnd="9dp" />
     <view
         class="org.chromium.chrome.browser.appmenu.AppMenuItemIcon"
         android:id="@+id/menu_item_icon"
         android:layout_weight="0"
         android:layout_width="wrap_content"
-        android:layout_height="?android:attr/listPreferredItemHeightSmall"
+        android:layout_height="match_parent"
         android:layout_gravity="end"
-        android:gravity="center_vertical"
-        android:paddingEnd="8dp" />
+        android:gravity="center_vertical" />
 </LinearLayout>

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

@@ -6,42 +6,31 @@
 -->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
+    android:layout_height="?android:attr/listPreferredItemHeightSmall"
     android:layout_gravity="top|start"
     android:orientation="horizontal">
 
     <ImageButton
         android:id="@+id/button_one"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="1"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:scaleType="center" />
 
-    <View
-        android:layout_width="1dp"
-        android:layout_height="?android:attr/listPreferredItemHeightSmall"
-        android:background="?android:attr/listDivider" />
-
     <ImageButton
         android:id="@+id/button_two"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="1"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:scaleType="center" />
 
-    <View
-        android:layout_width="1dp"
-        android:layout_height="?android:attr/listPreferredItemHeightSmall"
-        android:background="?android:attr/listDivider" />
-
     <ImageButton
         android:id="@+id/button_three"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="1"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:scaleType="center" />
-
 </LinearLayout>
\ No newline at end of file

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

@@ -7,30 +7,23 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="?android:attr/listPreferredItemHeightSmall">
-
     <TextView
         android:id="@+id/title"
         android:layout_width="wrap_content"
-        android:layout_height="?android:attr/listPreferredItemHeightSmall"
+        android:layout_height="match_parent"
         android:layout_gravity="start"
         android:layout_weight="1"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:gravity="center_vertical"
+        android:paddingStart="?android:attr/listPreferredItemPaddingStart"
         android:paddingEnd="9dp"
-        android:paddingStart="9dp"
         android:singleLine="true"
         android:textAppearance="?android:attr/textAppearanceLargePopupMenu" />
 
-    <View
-        android:id="@+id/divider"
-        android:layout_width="1dp"
-        android:layout_height="match_parent"
-        android:background="?android:attr/listDivider" />
-
     <ImageButton
         android:id="@+id/button"
         android:layout_width="48dp"
-        android:layout_height="48dp"
+        android:layout_height="match_parent"
         android:background="?android:attr/listChoiceBackgroundIndicator"
         android:padding="10dp"
         android:scaleType="fitCenter" />

chrome/android/java/res/values-v17/styles.xml

@@ -16,4 +16,12 @@
         <item name="android:fontFamily">sans-serif</item>
         <item name="android:textStyle">bold</item>
     </style>
+    <style name="OverflowMenuTheme" parent="Theme.AppCompat.Light">
+        <item name="android:popupBackground">@null</item>
+        <item name="android:listDivider">@null</item>
+        <item name="android:listPreferredItemHeightSmall">48dp</item>
+        <item name="android:listPreferredItemPaddingStart">16dp</item>
+        <item name="android:listPreferredItemPaddingEnd">16dp</item>
+        <item name="android:textSize">16sp</item>
+    </style>
 </resources>

chrome/android/java/res/values/dimens.xml

@@ -15,7 +15,7 @@
     <dimen name="swipe_commit_distance">120dp</dimen>
 
     <!-- Custom Menu dimensions -->
-    <dimen name="menu_width">257dp</dimen>
+    <dimen name="menu_width">260dp</dimen>
     <dimen name="menu_vertical_offset">0dp</dimen>
     <!-- The amount to fade the edges of the menu to indicate more content is available
          via scrolling. -->

chrome/android/java/src/org/chromium/chrome/browser/appmenu/AppMenu.java

@@ -65,7 +65,7 @@ public class AppMenu implements OnItemClickListener, OnKeyListener {
         mHandler = handler;
 
         mItemDividerHeight = itemDividerHeight;
-        assert mItemDividerHeight > 0;
+        assert mItemDividerHeight >= 0;
 
         mAdditionalVerticalOffset = res.getDimensionPixelSize(R.dimen.menu_vertical_offset);
         mVerticalFadeDistance = res.getDimensionPixelSize(R.dimen.menu_vertical_fade_distance);
@@ -99,6 +99,10 @@ public class AppMenu implements OnItemClickListener, OnKeyListener {
         });
         mPopup.setWidth(context.getResources().getDimensionPixelSize(R.dimen.menu_width));
 
+        // Need to explicitly set the background here.  Relying on it being set in the style caused
+        // an incorrectly drawn background.
+        mPopup.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.menu_bg));
+
         mCurrentScreenRotation = screenRotation;
         mIsByHardwareButton = isByHardwareButton;
 

chrome/android/java/src/org/chromium/chrome/browser/appmenu/AppMenuAdapter.java

@@ -100,7 +100,7 @@ class AppMenuAdapter extends BaseAdapter {
                 StandardMenuItemViewHolder holder = null;
                 if (convertView == null) {
                     holder = new StandardMenuItemViewHolder();
-                    convertView = mInflater.inflate(R.layout.menu_item, null);
+                    convertView = mInflater.inflate(R.layout.menu_item, parent, false);
                     holder.text = (TextView) convertView.findViewById(R.id.menu_item_text);
                     holder.image = (AppMenuItemIcon) convertView.findViewById(R.id.menu_item_icon);
                     convertView.setTag(holder);
@@ -132,7 +132,7 @@ class AppMenuAdapter extends BaseAdapter {
                 ThreeButtonMenuItemViewHolder holder = null;
                 if (convertView == null) {
                     holder = new ThreeButtonMenuItemViewHolder();
-                    convertView = mInflater.inflate(R.layout.three_button_menu_item, null);
+                    convertView = mInflater.inflate(R.layout.three_button_menu_item, parent, false);
                     holder.buttonOne = (ImageButton) convertView.findViewById(R.id.button_one);
                     holder.buttonTwo = (ImageButton) convertView.findViewById(R.id.button_two);
                     holder.buttonThree = (ImageButton) convertView.findViewById(R.id.button_three);
@@ -151,7 +151,7 @@ class AppMenuAdapter extends BaseAdapter {
                 FourButtonMenuItemViewHolder holder = null;
                 if (convertView == null) {
                     holder = new FourButtonMenuItemViewHolder();
-                    convertView = mInflater.inflate(R.layout.four_button_menu_item, null);
+                    convertView = mInflater.inflate(R.layout.four_button_menu_item, parent, false);
                     holder.buttonOne = (ImageButton) convertView.findViewById(R.id.button_one);
                     holder.buttonTwo = (ImageButton) convertView.findViewById(R.id.button_two);
                     holder.buttonThree = (ImageButton) convertView.findViewById(R.id.button_three);
@@ -172,9 +172,8 @@ class AppMenuAdapter extends BaseAdapter {
                 TitleButtonMenuItemViewHolder holder = null;
                 if (convertView == null) {
                     holder = new TitleButtonMenuItemViewHolder();
-                    convertView = mInflater.inflate(R.layout.title_button_menu_item, null);
+                    convertView = mInflater.inflate(R.layout.title_button_menu_item, parent, false);
                     holder.title = (TextView) convertView.findViewById(R.id.title);
-                    holder.divider = convertView.findViewById(R.id.divider);
                     holder.button = (ImageButton) convertView.findViewById(R.id.button);
                     convertView.setTag(holder);
                 } else {
@@ -192,11 +191,9 @@ class AppMenuAdapter extends BaseAdapter {
                 });
                 if (item.getSubMenu().getItem(1).getIcon() != null) {
                     holder.button.setVisibility(View.VISIBLE);
-                    holder.divider.setVisibility(View.VISIBLE);
                     setupImageButton(holder.button, item.getSubMenu().getItem(1));
                 } else {
                     holder.button.setVisibility(View.GONE);
-                    holder.divider.setVisibility(View.GONE);
                 }
                 convertView.setFocusable(false);
                 convertView.setEnabled(false);
@@ -245,7 +242,6 @@ class AppMenuAdapter extends BaseAdapter {
 
     static class TitleButtonMenuItemViewHolder {
         public TextView title;
-        public View divider;
         public ImageButton button;
     }
 }
\ No newline at end of file

chrome/android/java/src/org/chromium/chrome/browser/appmenu/AppMenuHandler.java

@@ -76,20 +76,21 @@ public class AppMenuHandler {
         }
         mDelegate.prepareMenu(mMenu);
 
+        ContextThemeWrapper wrapper = new ContextThemeWrapper(mActivity,
+                mDelegate.getMenuThemeResourceId());
+
         if (mAppMenu == null) {
-            TypedArray a = mActivity.obtainStyledAttributes(new int[]
+            TypedArray a = wrapper.obtainStyledAttributes(new int[]
                     {android.R.attr.listPreferredItemHeightSmall, android.R.attr.listDivider});
             int itemRowHeight = a.getDimensionPixelSize(0, 0);
             Drawable itemDivider = a.getDrawable(1);
-            int itemDividerHeight = itemDivider.getIntrinsicHeight();
+            int itemDividerHeight = itemDivider != null ? itemDivider.getIntrinsicHeight() : 0;
             a.recycle();
             mAppMenu = new AppMenu(mMenu, itemRowHeight, itemDividerHeight, this,
                     mActivity.getResources());
             mAppMenuDragHelper = new AppMenuDragHelper(mActivity, mAppMenu, itemRowHeight);
         }
 
-        ContextThemeWrapper wrapper = new ContextThemeWrapper(mActivity,
-                mDelegate.getMenuThemeResourceId());
         // Get the height and width of the display.
         Rect appRect = new Rect();
         mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(appRect);

chrome/android/shell/java/src/org/chromium/chrome/shell/ChromeShellActivity.java

@@ -391,7 +391,7 @@ public class ChromeShellActivity extends Activity implements AppMenuPropertiesDe
 
     @Override
     public int getMenuThemeResourceId() {
-        return android.R.style.Theme_Holo_Light;
+        return R.style.OverflowMenuTheme;
     }
 
     @VisibleForTesting

chrome/chrome.gyp

@@ -649,6 +649,7 @@
             '../content/content.gyp:content_java',
             '../printing/printing.gyp:printing_java',
             '../sync/sync.gyp:sync_java',
+            '../third_party/android_tools/android_tools.gyp:android_support_v7_appcompat_javalib',
             '../third_party/guava/guava.gyp:guava_javalib',
             '../ui/android/ui_android.gyp:ui_java',
           ],