Show RecyclerView in popup window

Question

I have a RecyclerView, when RecyclerView item clicked, want to open a popup window which contains another RecyclerView. It is almost done, but in popup window, cardviews don't appear. I can't figure out why, can any one help?

1- My Main RecyclerView Adapter

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>    {

private ArrayList<Mission> mDataset;
private Context mContext;

// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(ArrayList<Mission> myDataset, Context context) {
    mDataset = myDataset;
    this.mContext = context;
}

// Create new views (invoked by the layout manager)
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    // create a new view
    View v = LayoutInflater.from(mContext)
            .inflate(R.layout.mission_card_item, parent, false);
    // set the view's size, margins, paddings and layout parameters
    MyViewHolder vh = new MyViewHolder(v);
    return vh;
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
    holder.mTextView.setText(mDataset.get(position).getName());
    holder.mPuanView.setText(mDataset.get(position).getPoint());
    holder.mRankView.setText(mDataset.get(position).getRank());

    holder.btnAdd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(mContext,"Buton Clicked", Toast.LENGTH_SHORT).show();
        }
    });
}

@Override
public int getItemCount() {
    return mDataset.size();
}

    // Provide a reference to the views for each data item
    // Complex data items may need more than one view per item, and
    // you provide access to all the views for a data item in a view holder
    public  class MyViewHolder extends RecyclerView.ViewHolder {

        public CardView mCardView;
        public TextView mTextView;
        public TextView mPuanView;
        public TextView mRankView;
        public Button btnAdd;

        public MyViewHolder(final View itemView) {
            super(itemView);

            mCardView = (CardView) itemView.findViewById(R.id.card_view);
            mTextView = (TextView) itemView.findViewById(R.id.tv_text);
            mRankView = (TextView) itemView.findViewById(R.id.tv_rank);
            mPuanView = (TextView) itemView.findViewById(R.id.tv_puan);

            btnAdd = (Button) itemView.findViewById(R.id.button_add);


            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                    showPopup();

                    Toast.makeText(itemView.getContext(),"Element " + getAdapterPosition() + " clicked", Toast.LENGTH_SHORT).show();
                    Log.d("hello", "Element " + getAdapterPosition() + " clicked.");
                }
            });
        }
    }

 public void showPopup(){
        final View popupView = LayoutInflater.from(mContext).inflate(R.layout.recycler_popup_window, null);
        final PopupWindow popupWindow = new PopupWindow(popupView, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT);

Button btn = (Button) popupView.findViewById(R.id.button);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                popupWindow.dismiss();
            }
        });

        RecyclerView recyclerView = (RecyclerView) popupView.findViewById(R.id.rv_recycler_view);
        ArrayList<String> data = new ArrayList<>();
        data.add("my data");
        data.add("my test data");
        PopupRecyclerViewAdapter adapter = new PopupRecyclerViewAdapter(mContext,data);
        recyclerView.setAdapter(adapter);

        popupWindow.showAtLocation(popupView,Gravity.CENTER, 0, 0);

    }

}

2- My second RecyclerView adapter, its for popup window

public class PopupRecyclerViewAdapter extends RecyclerView.Adapter<PopupRecyclerViewAdapter.MyViewHolder>{

    private Context mContext;
    private ArrayList<String> data;

    public PopupRecyclerViewAdapter(Context mContext, ArrayList<String> data) {
        this.mContext = mContext;
        this.data = data;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(mContext).inflate(R.layout.recycler_popup_card_item, parent,false);
        MyViewHolder vh = new MyViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.mTextView.setText(data.get(position));
    }

    @Override
    public int getItemCount() {
        return data.size();
    }


    //View Holder
    public class MyViewHolder extends RecyclerView.ViewHolder {

        public TextView mTextView;

        public MyViewHolder(View itemView) {
            super(itemView);

            mTextView = (TextView) itemView.findViewById(R.id.tv_text2);
        }
    }
}

3- Layout for Recycler popup window

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_recycler_view2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/button"
        android:background="#ff4545">
    </android.support.v7.widget.RecyclerView>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Close"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

4- CardView Layout for popup RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="4dp"
        card_view:elevation="14dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="175dp"
            android:id="@+id/imageView2"
            android:src="@mipmap/testimage"
            android:layout_marginBottom="10dp"
            android:scaleType="centerCrop"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tv_text2"
            android:text="Blah blah blah..."
            android:gravity="center"
            android:layout_marginBottom="10dp"/>

        </LinearLayout>


    </android.support.v7.widget.CardView>

</RelativeLayout>

Answer 1

Add the below lines in your recyclerview popup:

RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext()); 
recyler_view.setLayoutManager(mLayoutManager); 

Answer 2

You may, like me, find this becomes rather a lot of boilerplate code just for a simple Popup Window with a list of clickable items, and so I made a custom Drop Down class which is easily reusable. You just need the PopupWindow custom class, and the RecyclerView adapter, as well as an item data class (in Kotlin), and this is then easily reusable.

The DropDown class:

  class DropDown(context: Context, items: List<DropDownItem>, val listener: DropDownClickListener) : PopupWindow(context) {

  private val binding = DropdownLayoutBinding.inflate(LayoutInflater.from(context))

  init {
    contentView = binding.root
    setBackgroundDrawable(null)
    elevation = 8f
    isOutsideTouchable = true
    isFocusable = true
    binding.recyclerView.adapter = DropDownItemAdapter(items) { item -> onItemClicked(item) }
    setOnDismissListener { listener.onMenuDismissed() }
  }

  private fun onItemClicked(item: DropDownItem) {
    listener.onMenuItemClicked(item)
    dismiss()
  }

  fun show(anchor: View) {
    showAsDropDown(anchor, 0, 20)
  }

  interface DropDownClickListener {

    fun onMenuItemClicked(item: DropDownItem)

    fun onMenuDismissed()

  }

}

data class DropDownItem(
    val text: String,
    val icon: Int
)

With accompanying layout code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/rounded_corners"
  android:id="@+id/recycler_view"
  xmlns:tools="http://schemas.android.com/tools"
  tools:listitem="@layout/item_drop_down"
  app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintTop_toTopOf="parent" />

Explanation: This reusable new DropDown class uses ViewBinding of a simple layout that is simply a RecyclerView (with whatever Item layout you want, again mine is a reusable one called item_drop_down, a TextView with a Drawable.)

The constructor just needs three things, the context, the list of drop down items (I made a DropDownItem data class, which for simplicity I put in the same file), and then the listener - an interface also defined in this class).

In the init for this class, we set the content view, setBackgroundDrawable to null to get rid of an ugly border, give it some elevation, then make it dismissable by touching outside or pressing the back button. We then set the recyclerview adapter here from the list of items in the constructor. Finally, we set the on dismiss listener and defer to our interface.

Now the adapter code:

class DropDownItemAdapter(val items: List<DropDownItem>, val clickListener: (DropDownItem) -> Unit) : RecyclerView.Adapter<DropDownItemAdapter.ViewHolder>() {

  override fun getItemCount() = items.size

  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    return ViewHolder(ItemDropDownBinding.inflate(LayoutInflater.from(parent.context), parent, false))
  }

  override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.bind(items[position])
  }

  inner class ViewHolder(val binding: ItemDropDownBinding) : RecyclerView.ViewHolder(binding.root) {

    fun bind(item: DropDownItem) {
      binding.textView.text = item.text
      binding.textView.setCompoundDrawablesWithIntrinsicBounds(ContextCompat.getDrawable(binding.root.context, item.icon), null, null, null)
      itemView.setOnClickListener { clickListener(item) }
    }

  }

}

This is just a straight forward RecyclerView adapter, and rather than another interface, the only thing this needs to notify is when an item is clicked, so simply accept a function parameter in the constructor for handling the clicks.

Altogether, it looks like this in the calling code:

DropDown(view.context, dropDownMenu, this).show(view)

Where dropDownMenu is a list of DropDownItem.

You can then handle the interface functions as desired:

    override fun onMenuItemClicked(item: DropDownItem) {
          when (item.text) {
            "Delete" -> // respond as desired
            "Edit" -> // simply inspect the text, or alter your DropDownItem to have an ID
          }
    }
    
   override fun onMenuDismissed() {
          // it may be useful to know when the popup is dismissed
          // in my case, I select the item which has been long pressed, and want to know when to un-select it
    }

With a nice rounded corners background on my DropDown layout, and being able to know when popup showing and when dismissed to highlight my chosen item, I get this nice effect: