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:-
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.