How to realize this custom popup menu with Material Design Android?

Question

I want to realize a custom popup menu like Twitter in Android for example with item and picture but I don't know what's the component used for that.

In Material Design website, google present this solution. So I think, there is a native solution to achieve this.

enter image description here

I tried with Popup menu, but I can't find how to customize the layout of this view like that.

Hi Lopez, Please try my code and let me know is it working or not. Thanks :) — Biswajit, Jun 02 '15 at 12:47

score 27 · Accepted Answer · answered May 27 '15 at 08:11

you can use a ListPopupWindow, submitting your custom adapter, through which you can control the layout of every single row of the ListPopupWindow. As for a normal PopupWindow you have to provide an anchor view and additionally you have to call setContentWidth on the instance of ListPopupWindow, which sets the width of the popup window by the size of its content. It is a small price you have to pay, but for a small dataset is not a big deal. I have this utility method to retrieve the max width of the row:

public int measureContentWidth(ListAdapter adapter) {
    int maxWidth = 0;
    int count = adapter.getCount();
    final int widthMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
    final int heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
    View itemView = null;
    for (int i = 0; i < count; i++) {
        itemView = adapter.getView(i, itemView, this);
        itemView.measure(widthMeasureSpec, heightMeasureSpec);
        maxWidth = Math.max(maxWidth, itemView.getMeasuredWidth());
    }
    return maxWidth;
}

What style would you inherit from? I'm struggling with that, both for the rows and for the ListView containing them. — Anubian Noob, Aug 01 '15 at 12:09

score 4 · Answer 2 · answered May 26 '15 at 18:18

There's a widget called PopupMenu which is basically a menu anchored to a specific view. One drawback is that it doesn't display icons by default.

However, you can use reflection and call setForceShowIcon to reveal them. The code that you need is:

Since a PopupMenu is anchored to a specific view, your ActionBar item has an actionLayout attribute. That layout (action_item.xml) can be as simple as:

<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    style="?attr/actionButtonStyle"
    android:layout_gravity="center"
    android:text="Show popup"
    android:textStyle="bold"
    android:textSize="12sp"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"/>

ActionBar menu style that contains your item with the above layout

<menu
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/popup_item"
        android:title="Show popup"
        android:showAsAction="always"
        android:actionLayout="@layout/action_item"/>
</menu>

Your popup_menu.xml, the layout you'll inflate for your PopupMenu

<menu
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item1"
        android:title="Item1"
        android:icon="@mipmap/ic_launcher"/>
</menu>

And finally code to perform the inflation when an ActionBar item is clicked

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_add_item:
            PopupMenu popup = new PopupMenu(this, item.getActionView());
            MenuInflater inflater = popup.getMenuInflater();
            inflater.inflate(R.menu.popup_menu, popup.getMenu());

            // Use reflection to invoke setForceShowIcon
            try {
                Field[] fields = popup.getClass().getDeclaredFields();
                for (Field field : fields) {
                    if ("mPopup".equals(field.getName())) {
                        field.setAccessible(true);
                        Object menuPopupHelper = field.get(popup);
                        Class<?> classPopupHelper = Class
                                .forName(menuPopupHelper.getClass().getName());
                        Method setForceIcons = classPopupHelper
                                .getMethod("setForceShowIcon", boolean.class);
                        setForceIcons.invoke(menuPopupHelper, true);
                        break;
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }

            popup.show();
            return true;
    }

    return super.onOptionsItemSelected(item);
}

Note, that to get that multi-line text in a menu, you'd need to use an actionLayout for your popup menu items too.

score 3 · Answer 3 · edited May 23 '17 at 12:25

3

Use a Pop-Up list fragment. The nice thing about fragments is that you can easily animate them (If you don't understand fragments I recommend first reading Fragment Introduction)

If you want complete control over the pop-up content then see Dialog Fragment

edited May 23 '17 at 12:25

Community

1
1

answered May 29 '15 at 09:14

Steven Mark Ford

3,372
21
32

score 2 · Answer 4 · answered Jun 02 '15 at 10:08

I have same issue.but finally i found at my own solution that i am sharing you my code. Hope that will help you.

popupWindowDogs = popupWindowDogs();
    button.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            // popupWindowDogs.showAsDropDown(v, -5, 0);
            popupWindowDogs().showAtLocation(v, Gravity.CENTER, 0, 0);
        }
    });
    // Detect touched area
    detector = new SimpleGestureFilter(this, this);

}

public PopupWindow popupWindowDogs()
{

    // initialize a pop up window type
    PopupWindow popupWindow = new PopupWindow(this);

    // the drop down list is a list view
    final ListView listView = new ListView(this);
    // set our adapter and pass our pop up window contents
    listView.setAdapter(dogsAdapter(popUpContents));
    // listView.setBackgroundColor(Color.DKGRAY);
    listView.setBackgroundResource(R.drawable.ss4);
    listView.setPadding(0, 0, 0, 10);
    listView.setDivider(null);
    try {

        listView.setOnScrollListener(new OnScrollListener() {

            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                View c = listView.getChildAt(0);
                String cc = listView.getChildAt(0).toString();
                int scrolly = -c.getTop() + listView.getFirstVisiblePosition() * c.getHeight();
                /*
                 * Toast.makeText(getApplicationContext(), scrolly + "", Toast.LENGTH_SHORT)
                 * .show();
                 */}

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,
                    int totalItemCount) {

            }
        });
    } catch (Exception e) {
        Toast.makeText(getApplicationContext(), e.toString() + "", Toast.LENGTH_SHORT)
                .show();
    }
    listView.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> arg0, View v, int arg2,
                long arg3) {
            try {

                // TODO Auto-generated method stub
                Context mContext = v.getContext();
                Swipetouch mainActivity = ((Swipetouch) mContext);
                // add some animation when a list item was clicked
                Animation fadeInAnimation = AnimationUtils.loadAnimation(v.getContext(),
                        android.R.anim.fade_in);
                fadeInAnimation.setDuration(10);
                v.startAnimation(fadeInAnimation);
                // dismiss the pop up
                mainActivity.popupWindowDogs.dismiss();
                // get the text and set it as the button text
                String val = (String) arg0.getItemAtPosition(arg2);
                // Toast.makeText(mContext, val, Toast.LENGTH_SHORT).show();
                if (val.equals("Signup Now")) {
                    Intent ii = new Intent(getApplicationContext(), Registration.class);
                    startActivity(ii);
                    stopService(new Intent(Swipetouch.this, MyService.class));
                    stopService(new Intent(Swipetouch.this, MyService.class));
                } else if (val.equals("Login")) {
                    Intent ii = new Intent(getApplicationContext(), MyLoginActivity.class);
                    startActivity(ii);
                    stopService(new Intent(Swipetouch.this, MyService.class));

                } else if (val.equals("Exit")) {
                    finish();
                    stopService(new Intent(Swipetouch.this, MyService.class));
                } else if (val.equals("Friends")) {
                    Intent ii = new Intent(getApplicationContext(), MyLoginActivity.class);
                    startActivity(ii);
                } else if (val.equals("Exit")) {
                    stopService(new Intent(Swipetouch.this, MyService.class));
                    finish();
                }

            } catch (Exception e) {
                Toast.makeText(Swipetouch.this, e.toString(), Toast.LENGTH_SHORT).show();
            }
        }

    });
    // some other visual settings
    popupWindow.setFocusable(true);
    popupWindow.setWidth(250);
    // popupWindow.setHeight(300);
    popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);

    // set the list view as pop up window content
    // SET WALLPAPER IMAGE
    /*
     * popupWindow.setBackgroundDrawable(getWallpaper()); popupWindow.setHeight(300);
     */
    // layout.setBackgroundResource(R.drawable.sshadow);
    // layout.setBackgroundColor(Color.TRANSPARENT);
    // popupWindow.setContentView(layout);

    popupWindow.setBackgroundDrawable(new ColorDrawable(
            android.graphics.Color.TRANSPARENT));
    popupWindow.setContentView(listView);

    return popupWindow;
}

Biswajit · Answer 5 · 2015-06-02T12:10:21.207

This code is working in my app.

Try this :-

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".LocationDetailsActivity">


<item xmlns:tools="http://schemas.android.com/tools"
    android:icon="@android:drawable/ic_menu_mapmode"
    app:showAsAction="ifRoom"
    android:title="@string/title_of_menu"
    tools:context=".LocationDetailsActivity">
    //the menu list with icon
    <menu>
        <item
            android:id="@+id/action_map_type_normal"
            android:orderInCategory="100"
            android:icon="some_icon" //place your icon here
            android:title="Vacation spots" />
        <item
            android:id="@+id/action_map_type_satellite"
            android:orderInCategory="100"
            android:icon="some_icon" //place your icon here
            android:title="Friends and family" />
        <item
            android:id="@+id/action_map_type_hybrid"
            android:orderInCategory="100"
            android:icon="some_icon" //place your icon here
            android:title="Restaurants" />
    </menu>
</item>

You can go through the tutorial from these different providers

http://developer.android.com/guide/topics/ui/actionbar.html

http://www.vogella.com/tutorials/AndroidActionBar/article.html

http://www.androidhive.info/2013/11/android-working-with-action-bar/

All of them have great examples and source code to help you out

Hope this help you :)

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Linda Lawton - DaImTo, Jun 02 '15 at 11:32
@Dalm Yes you are right. But these are the complete tutorials so its better to check the whole tutorial. I will add some main contents. Thanks :) — Biswajit, Jun 02 '15 at 11:35

score 1 · Answer 6 · answered Jul 10 '15 at 02:51

  try {
                    java.lang.reflect.Field[] fields = popup.getClass().getDeclaredFields();
                    for (java.lang.reflect.Field field : fields) {
                        if ("mPopup".equals(field.getName())) {
                            field.setAccessible(true);
                            Object menuPopupHelper = field.get(popup);
                            Class<?> classPopupHelper = Class
                                    .forName(menuPopupHelper.getClass().getName());
                            Method setForceIcons = classPopupHelper
                                    .getMethod("setForceShowIcon", boolean.class);
                            setForceIcons.invoke(menuPopupHelper, true);
                            break;
                        }
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }

Just dd this code before popup.show(); it worked perfectttttllyyyy :) — Bilel Bouali, Jul 10 '15 at 02:52

score 0 · Answer 7 · answered May 06 '16 at 06:44

Easier solution. Add this just before you .show() method.

try {
  Field mFieldPopup=popupMenu.getClass().getDeclaredField("mPopup");
  mFieldPopup.setAccessible(true);
  MenuPopupHelper mPopup = (MenuPopupHelper) mFieldPopup.get(popupMenu);
  mPopup.setForceShowIcon(true);
} catch (Exception e) {}

How to realize this custom popup menu with Material Design Android?

7 Answers7

Linked