Creating a custom popup dialog menu

Question

I'm currently trying to achieve popup menu on menu button click as shown in following screen:

I tried popupwindow methods but couldn't achieve the exact case. This is how I'm trying:

   private View.OnClickListener showPopupWindow() {
    return new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            PopupWindow popUp = popupWindowsort();
            popUp.showAsDropDown(v, 1, 1); // show popup like dropdown list
        }
    };
}

private PopupWindow popupWindowsort() {

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

    ArrayList<String> sortList = new ArrayList<String>();
    sortList.add("VIEW FULL");
    sortList.add("REPORT");
    sortList.add("ADD TO LIST");
    sortList.add("ADD TO CART");

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(context, R.layout.drop_down_line,
            sortList);
    // the drop down list is a list view
    ListView listViewSort = new ListView(context);

    // set our adapter and pass our pop up window contents
    listViewSort.setAdapter(adapter);

    // set on item selected
    listViewSort.setOnItemClickListener(onItemClickListener());

    // some other visual settings for popup window
    popupWindow.setFocusable(true);
    popupWindow.setWidth(300);
    popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.background));
    popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);


    // set the listview as popup content
    popupWindow.setContentView(listViewSort);

    return popupWindow;
}

private AdapterView.OnItemClickListener onItemClickListener() {
    return new AdapterView.OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) {
            if (position == 0) {

                // adapter.notifyDataSetChanged();
            } else if (position == 1) {
                report_lay.setVisibility(View.VISIBLE);
                // adapter.notifyDataSetChanged();
            } else {

                // adapter.notifyDataSetChanged();
                Log.i(TAG, "position2 " + position);
            }
            dismissPopup();
        }
    };
}

private void dismissPopup() {
    if (popupWindow != null) {
        popupWindow.dismiss();
    }
}

But I'm getting the following result:

and this is also causing a problem in marshmallow.

How do I create such popup menu?

Answer 1

You have to use PopupMenu instead of PopupWindow.

Sample Code:

public class MainActivity extends AppCompatActivity {

    private Context context;
    private ImageView img;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;

        img = (ImageView) findViewById(R.id.imageView);
        img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                PopupMenu popup = new PopupMenu(MainActivity.this, v);
                popup.getMenuInflater().inflate(R.menu.pop_up, popup.getMenu());

                popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                    public boolean onMenuItemClick(MenuItem item) {
                        Toast.makeText(MainActivity.this, "You Clicked : " + item.getTitle(), Toast.LENGTH_SHORT).show();
                        return true;
                    }
                });
                popup.show();//showing popup menu
            }
        });
    }
}

layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/base"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="horizontal">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="#D6D7D7">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="20dp"
            android:gravity="center"
            android:src="@mipmap/more" />
    </RelativeLayout>
</RelativeLayout>

menu/pop_up.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/add"
        android:title="@string/one" />
    <item
        android:id="@+id/sub"
        android:title="@string/two" />
    <item
        android:id="@+id/mul"
        android:title="@string/three" />
    <item
        android:id="@+id/div"
        android:title="@string/four" />
</menu>

Update: Menu Background color change

Use this style in your applied theme.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!--Add modified themes-->
        <item name="android:popupMenuStyle">@style/PopupMenu</item>
        <item name="popupMenuStyle">@style/PopupMenu</item>
        <item name="android:itemTextAppearance">@style/itemTextStyle.AppTheme</item>
    </style>

    <style name="PopupMenu" parent="@android:style/Widget.PopupMenu">
        <item name="android:popupBackground">#B4B52B</item>
    </style>

    <style name="itemTextStyle.AppTheme" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
        <item name="android:textColor">@color/white</item>
    </style>
</resources>