RecyclerView in PopupMenu

Hey Folks, in this blog i am going to tell you about how to implement RecyclerView in PopupWindow and in case you are new to android and wondering what are these Go check out the official documentation ->> PopupWindow RecyclerView

Here’s a demo what we are going to achieve after this tutorial:-

Download project

Lets get Started.

Boilerplate:
1>Create a new android project.
2>Import RecyclerView Dependancy:
File->Project Structure->Dependencies->Add(+)->Library Dependancy->search for recyclerview->apply.
3>Import CircleImageView Dependancy

 compile 'de.hdodenhof:circleimageview:2.2.0'

Code:
activity_main.xml:
Our layout consists of relativelayout, textview and a imageview clicking on which our PopupWindow will show.

<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    tools:context="ahuja.shivam.recyclerviewinpopupwindow.MainActivity">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/PopupWindowOpener_iv"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="50dp"
        android:background="@android:color/transparent"
        android:clickable="false"
        android:src="@drawable/ic_arrow_drop_down_black_24dp"
        android:tint="#fff" />

    <android.support.v7.widget.AppCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="50dp"
        android:layout_toRightOf="@id/PopupWindowOpener_iv"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:text="PopupMenu"
        android:textColor="@color/white"
        android:textSize="30dp" />
</RelativeLayout>

PopupWIndow layout ->recyclerview.xml:
Create a layout file for popupwindow, in our case we will use RecyclerView.

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingRight="5dp"
    android:paddingBottom="5dp"
    android:overScrollMode="never">

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

RecyclerView item layout -> listitem_circle.xml:
Create a layout for Recyclerview content, in our case we are using CircleImageView.

<de.hdodenhof.circleimageview.CircleImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:paddingLeft="5dp"
    android:paddingTop="5dp"/>

RecyclerView Adapter->Adapter.java
In this we are setting the color to the respective position.The colors are in hexcode format.

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
    Context context;
    ArrayList<String> colors;

    public Adapter(Context context, ArrayList<String> colors) {
        this.context = context;
        this.colors = colors;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(context).inflate(R.layout.listitem_circle, parent, false));
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.circle.setImageDrawable(new ColorDrawable(Color.parseColor(colors.get(position))));
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        private final CircleImageView circle;

        public ViewHolder(View itemView) {
            super(itemView);
            circle = (CircleImageView) itemView;
        }
    }
}

MainActivity.java:
In our MainActivity we  have implemented the ImageView OnClickListener to show PopupWindow on click. We have also initialized the RecyclerView aka PopupWindow layout and set its layout manager to GridLayoutManger.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private AppCompatImageView PopupWindowOpener_iv;
    private PopupWindow popupWindow;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        PopupWindowOpener_iv = (AppCompatImageView) findViewById(R.id.PopupWindowOpener_iv);
        PopupWindowOpener_iv.setOnClickListener(this);
        initPopup();
    }

    private void initPopup() {
        //inflate layout and set its layout manager
        RecyclerView recyclerview = 
        (RecyclerView) LayoutInflater.from(this).inflate(R.layout.recyclerview, null);
        recyclerview.setLayoutManager(new GridLayoutManager(this, 6));
        
        //make colors list
        ArrayList<String> colors = new ArrayList<>();
        colors.add("#f29a8b"); colors.add("#ffcc85"); colors.add("#7fdba9");
        colors.add("#80b8d1"); colors.add("#bf93eb"); colors.add("#ed93d6");
        colors.add("#f29a8b"); colors.add("#ffcc85"); colors.add("#7fdba9"); 
        colors.add("#80b8d1"); colors.add("#bf93eb"); colors.add("#ed93d6");
        colors.add("#f29a8b"); colors.add("#ffcc85"); colors.add("#7fdba9");
        colors.add("#80b8d1"); colors.add("#bf93eb"); colors.add("#ed93d6");
        colors.add("#f29a8b"); colors.add("#ffcc85"); colors.add("#7fdba9");
        colors.add("#80b8d1"); colors.add("#bf93eb"); colors.add("#ed93d6");
        colors.add("#f29a8b"); colors.add("#ffcc85"); colors.add("#7fdba9"); 
        colors.add("#80b8d1"); colors.add("#bf93eb"); colors.add("#ed93d6");
        colors.add("#f29a8b"); colors.add("#ffcc85"); colors.add("#7fdba9"); 
        colors.add("#80b8d1"); colors.add("#bf93eb"); colors.add("#ed93d6");
        
        //set Adapter
        final Adapter adapter = new Adapter(this, colors);
        recyclerview.setAdapter(adapter);

        //create popup and setView->> 
        //public PopupWindow (View contentView, int width, int height, boolean focusable)
        popupWindow = new PopupWindow(
                recyclerview,
                RecyclerView.LayoutParams.WRAP_CONTENT,
                RecyclerView.LayoutParams.WRAP_CONTENT, true);
        popupWindow.setElevation(3);
        
    }

    @Override
    public void onClick(View view) {
        //show Popup
        popupWindow.showAsDropDown(PopupWindowOpener_iv);
    }
}

and thats it guys.

Thankyou for reading.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *