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.

hope this link helpful to you, [Try this link](https://stackoverflow.com/questions/46440245/show-popup-in-recyclerview-exactly-where-the-button-is-in-android) — Jinal Awaiya, Feb 28 '19 at 05:40

score 3 · Accepted Answer · answered Feb 28 '19 at 05:29

3

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.

answered Feb 28 '19 at 05:29

Sanwal Singh

1,765
3
17
35

But how can i call this function at respective item only from adapter class. – Laxman Lucky Feb 28 '19 at 05:33
Create same function in Adapter and where you have to pass id use --> holder.ivAddMember. simple – Sanwal Singh Feb 28 '19 at 05:35
and this popup options i need to use from arraylist rather than hardcode – Laxman Lucky Feb 28 '19 at 05:37
Let me know how to add that popup design as per my screenshot, popup right end of corner extend as top arrow. – Laxman Lucky Feb 28 '19 at 05:57
can i able to pass arralist here rather than R.menu.menu_option – Laxman Lucky Feb 28 '19 at 06:06
Check this, https://stackoverflow.com/questions/13784088/setting-popupmenu-menu-items-programmatically it will help to create dynamic popup menu list. – Sanwal Singh Feb 28 '19 at 06:26
How to add popup design as per my screenshot, right end of corner extend as top arrow. – Laxman Lucky Feb 28 '19 at 06:45

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

1 Answers1