How to show popup on top of recyclerview item when we click on respective item

Question

Here is required screen design:

As per the above screenshot, I need to design the layout: when i click on add button of recyclerview item row, add options need to show.

Here is my XML code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cell"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorLightWhite">


    <LinearLayout
        android:id="@+id/ll_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:visibility="visible"
        android:layout_marginRight="@dimen/default_margin"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginTop="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin"
        android:weightSum="100">
        <EditText
            android:id="@+id/et_add_member"
            android:layout_width="wrap_content"
            android:layout_weight="95"
            android:layout_height="42dp"
            android:padding="@dimen/padding_8"
            android:hint="Person"
            android:background="@drawable/edit_box"/>
        <ImageView
            android:id="@+id/iv_addMember"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_gravity="center"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_centerVertical="true"
            android:layout_weight="5"
            android:src="@drawable/add_x" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/include_add"
        android:layout_width="210dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ll_main"
        android:layout_alignTop="@+id/ll_main"
        android:layout_marginTop="35dp"
        android:layout_marginRight="@dimen/margin_10"
        android:gravity="center"
        android:layout_alignParentRight="true"
        android:orientation="vertical"
        android:visibility="gone">

        <include layout="@layout/include_members" />
    </LinearLayout>

</RelativeLayout>

Here is Adapter Code of showing the popup:

holder.ivAddMember.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                holder.include_add.setVisibility(View.VISIBLE);
            }
        });

include_add LinearLayout is the pop code, but I'm not able to get the exact UI with this code.

Can anyone please suggest me how to show pop on top of respective item click, how to close popup at previously click item position & Popup design as well.

Answer 1

You have to create xml file under menu in res folder and then, make function like below to show pop-up on desired location

public void showPopup() {
    PopupMenu popup = new PopupMenu(context, <PASS ID WHERE YOU WISH TO SHOW POPUP>);
    popup.getMenuInflater().inflate(R.menu.menu_option, popup.getMenu());
    Object menuHelper;
    Class[] argTypes;
    popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
        public boolean onMenuItemClick(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.member:
                    // call member class or function here
                    return true;
                case R.id.guest:
                    // call Guest class or function here
                    return true;
                case R.id.my_buddies:
                    // call My Buddies class or function here
                    return true;
            }
            return true;
        }
    });
    popup.show();
}

Hope you understand.