Options menu like ActionSheet

Source Code

Русский перевод. Pending...

Now I'll show how to create options menu that will look like iPhone's Action Sheet.

Preparings.


First let's create animations for the menu. The menu will show from the bottom of the device screen. So the "in" animation will look like:

<set xmlns:android="http://schemas.android.com/apk/res/android">
 <translate
  android:fromXDelta="100%"
  android:toXDelta="100%"
  android:fromYDelta="0%"
  android:toYDelta="100%"
  android:duration="@android:integer/config_shortAnimTime"
  android:interpolator="@android:anim/linear_interpolator"
 >
 </translate>
</set>

As you can see it's the "translate" animation. The animated view will be always 100% screen width and will grow from 0% to 100% it's height.
Vice versa the "out" we'll define as following:

<set xmlns:android="http://schemas.android.com/apk/res/android">
 <translate
  android:fromXDelta="100%"
  android:toXDelta="100%"
  android:fromYDelta="100%"
  android:toYDelta="0%"
  android:duration="@android:integer/config_shortAnimTime"
  android:interpolator="@android:anim/linear_interpolator"
 >
 </translate>
</set>

It will shrink from 100% to 0% height.
And to apply the animation to a view:

    <style name="Animations.MenuAnimation">
        <item name="android:windowEnterAnimation">
                @anim/menu_animation_in</item>
        <item name="android:windowExitAnimation">
                @anim/menu_animation_out</item>
    </style>

The menu items will be the same as in Dialog demo, but with gray colors. And at last to complete XML stuff there are the menu item layout and the menu layout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#224c4c4c"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="4dip" >

    <Button
        android:id="@+id/custom_menu_item_caption"
        style="@style/button_black"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Add from URL" >
    </Button>

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#00000000"
    android:orientation="vertical"
    android:padding="0dip" >

    <View
        android:layout_width="fill_parent"
        android:layout_height="0.5dip"
        android:background="#ff4f4f4f" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="20dip"
        android:gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/menu_header" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="0.5dip"
        android:background="#ff4f4f4f" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#aa000000"
        android:orientation="vertical"
        android:padding="0dip" >

        <TableLayout
            android:id="@+id/custom_menu_table"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:stretchColumns="*" >
        </TableLayout>
    </LinearLayout>

</LinearLayout>

Menu Header:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <gradient
  android:angle="270"
  android:type="linear"
  android:endColor="#444c4c4c"
  android:startColor="#44ffffff"
 />
</shape>

The code
The code is quite clear. On base of the PopupWindow we form our menu. The layout for the popup window is the table layout. And each item of the menu we add to the layout. And to complete the menu we add a listener to each item.

 /**
  * Opened menu
  */
 private static volatile CustomMenu mMenu = null;

 private ArrayList<CustomMenuItem> mMenuItems;
 private OnMenuItemSelectedListener mListener = null;
 private Activity mContext = null;
 private static volatile PopupWindow mPopupWindow = null;
 private static boolean mIsShowing = false;

 /**
  * Menu item selected listener
  */
 public interface OnMenuItemSelectedListener {
  public void MenuItemSelectedEvent(Integer selection);
 }

 /**
  * Is the menu opened
  * 
  * @return boolean isShowing
  */
 public static boolean isShowing() {
  return mIsShowing;
 }

 /**
  * Constructor
  * 
  * @param activity
  *            Activity where the menu will be shown
  * @param OnMenuItemSelectedListener
  *            listener Listener
  * @param LayoutInflater
  *            items Items list
  * @return void
  */
 public CustomMenu(Activity activity, 
                        OnMenuItemSelectedListener listener,
   HashMap<Integer, String> items) {

  mListener = listener;
  mMenuItems = new ArrayList<CustomMenuItem>();
  mContext = activity;

  // Add items to the menu
  for (Integer id : items.keySet()) {

   String name = items.get(id);
   CustomMenuItem cmi = new CustomMenuItem();
   cmi.setCaption(name);
   cmi.setId(id);
   mMenuItems.add(cmi);

  }

 }


 public void show(View v) {

  // The menu is shown
  mIsShowing = true;
  int itemCount = mMenuItems.size();

  if (itemCount < 1)
   return; // Nothing to show

  if (mPopupWindow != null)
   return; // The menu is opened

  // Display settings
  Display display = ((WindowManager) mContext
    .getSystemService(Context.WINDOW_SERVICE))
                                .getDefaultDisplay();

  // The view to show
  View mView = ((Activity) mContext).getLayoutInflater().inflate(
    R.layout.custom_menu, null);

  // Create popup window to show
  mPopupWindow = new PopupWindow(mView, LayoutParams.FILL_PARENT,
    LayoutParams.WRAP_CONTENT, false);
  mPopupWindow.setAnimationStyle(R.style.Animations_MenuAnimation);
  mPopupWindow.setWidth(display.getWidth());
  mPopupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

  // Add menu items
  TableLayout table = (TableLayout) mView
    .findViewById(R.id.custom_menu_table);
  table.removeAllViews();

  for (int i = 0; i < itemCount; i++) {

   TableRow row = null;
   Button btn = null;

   // create headers
   row = new TableRow(mContext);
   row.setLayoutParams(new LayoutParams(
                            LayoutParams.FILL_PARENT,
                            LayoutParams.WRAP_CONTENT));

   final CustomMenuItem cmi = mMenuItems.get(i);
   View itemLayout = ((Activity) mContext).getLayoutInflater()
     .inflate(R.layout.custom_menu_item, null);
   btn = (Button) itemLayout
     .findViewById(R.id.custom_menu_item_caption);
   btn.setText(cmi.getCaption());

   btn.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
     mListener.MenuItemSelectedEvent(cmi.getId());
     hide();
    }
   });

   row.addView(itemLayout);
   table.addView(row);
  }

 }

And we have: