How to make a fancy transparent menu like the “share menu” in Android gallery?

Question

On my Android 2.2.2 device the gallery looks really nice. What I would love to do in my own app is to press a button and then show a menu that looks like this:

Is this using any standard Android themes / styles? Does anybody know of an example code to have a menu like this?

Edit: I figured out that one could mimic this menu with a Dialog. To simplify things I'm not using a ListView in this example, just a single TextView entry for the dialog:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/layout_root"
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="fill_parent"
              android:textColor="#FFF"
              android:padding="10dp"
              />
</LinearLayout>

Showing the dialog when I press a button:

                Dialog dialog = new Dialog(MyActivity.this);
                dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

                dialog.setContentView(R.layout.custom_dialog);

                TextView text = (TextView) dialog.findViewById(R.id.text);
                text.setText("Test option 1");

                WindowManager.LayoutParams WMLP = dialog.getWindow().getAttributes();
                WMLP.gravity = (Gravity.BOTTOM | Gravity.LEFT);
                WMLP.x = 0;
                WMLP.y = 0;
                dialog.getWindow().setAttributes(WMLP);

                dialog.show();

This creates a dialog that comes close to the menu in the picture. I still have two problems, however:

1) How can I draw this little triangle at the bottom of the dialog, like it is done in the picture above?

2) The button that is supposed to open the dialog is positioned horizontally in the middle of the bottom button bar. So when I press it, the dialog should be displayed right above that button. What I would like to do is this:

WMLP.x = middleButton.getLeft() + (middleButton.getWidth() / 2) - dialog.getWindow().getDecorView().getPaddingLeft() - (WMLP.width / 2);

The problem is, that WMLP.width is -2. I guess the reason is that the layout width is set to "wrap_content" (which is -2) and the actual width is not known at this moment. So, how can I determine the width of the dialog so that I can position it concentrical over another view?

Update: I finally found a great source for a dialog like this: http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/

It's exactly what I wanted and I'm using it in my app now.

Answer 1

You can do this by adding a PopupWindow at the current location, for draw this cool menu you are going to need to have the image of this background and the litle arrow to draw too.

Also you should read about the Nine-Path Drawable to get this done.

PS: I already have this done, but with another image.

Answer 2

About the Dialog

3 Options:

1. About drawing the triangle (actually, I think it's a square with rounded corners split by the diagonal). I'd create the large square behind (the dialog's container) and another one that would be this triangle (using an image). This would have some issues with transparency because the triangle would partially overlap the square. so maybe the triangle wouldn't be transparent.

2. Another option, would be using a custom view. I have never tried this but I think you could specify a set of points and stroke them creating the white frame. The inside could be a painted rectangle with transparency (easy). There is something to draw a shadow with your painter object (what you use to draw text, lines, rectangles) but I believe this would be the most complicated thing to achieve using a manual drawing function.

3. Use the source! (In other words, Android is open... see how did they do it in the source code)

About the width of the view:

When do you try to get the value? If you do it in onCreate method, it shouldn't work. Do it when the user clicks the button. If you're already doing it this time, I can't help you. It should work. I've done that many times before!

Free tip: Instead of view.getLeft (which returns the distance to its parent), using view.getLocationOnScreen is a better option.

Answer 3

This is probably, or at least can be, achieved using the PathShape constructs. Combined with ShapeDrawable you can build your own "dialog" control. Using The same path, you can define the clipping regions of a drawing Canvas. Finally, using ColorDrawable you can fill the canvas with the transparent color.