Simplified Coding

  • About
  • Contact Us
  • Advertise
  • Privacy Policy
You are here: Home / Android Application Development / Create Options Menu for RecyclerView Item Tutorial

Create Options Menu for RecyclerView Item Tutorial

October 5, 2016 by Belal Khan 15 Comments

Hello guys, today we will learn about creating options menu for RecyclerView Item in Android. You may have seen this in many apps. Sometimes you need to open an Options Menu for every item in the List. For creating the list we will use RecyclerView. I already posted some RecyclerView Tutorials. This time we will add an option menu to the items. So lets start.

Contents

  • 1 Creating an Android Studio Project
  • 2 Learn Everything About RecyclerView in this Video
  • 3 Adding RecyclerView and CardView
  • 4 Creating RecyclerView
  • 5 Designing List Items
  • 6 Creating Menu Items
  • 7 Creating List Model and Adapter
  • 8 Adding Items to RecyclerView
  • 9 Creating Options Menu for RecyclerView Item
    • 9.1 Sharing is Caring:
    • 9.2 Related

Creating an Android Studio Project

  • As we always do create a new Android Studio Project.
  • Select Empty Activity and move ahead.
  • As usual after project is loaded in Android Studio we will get MainActivity.java and activity_main.xml files (If you haven’t changed the names while creating projects).

Learn Everything About RecyclerView in this Video

  • If you are not familiar with RecyclerView then you can learn it from Scratch in this playlist. The playlist covers everything from beginning to advanced level.

  • If you don’t want to learn with video then leave it and lets move ahead on this tutorial.

Adding RecyclerView and CardView

  • For this List we will use RecyclerView and for the ListItems we will use CardView. Both the components are not available by default. So first we need to add these.
  • Go to File -> Project Structure -> app -> Dependencies, then click on the + icon from below and select Library Dependency.

adding recyclerview

  • Now find ReyclerView and CardView from the list and add them both.

recyclerview

Creating RecyclerView

  • Now we will create a RecyclerView, so come inside activity_main.xml and create a RecyclerView with the below given code.

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="net.simplifiedcoding.recyclerviewoptionsmenu.MainActivity">
 
 
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
 
    </android.support.v7.widget.RecyclerView>
 
</RelativeLayout>

Designing List Items

  • Now its time to design our List Items. So create a new layout resource file inside layout folder. I have created list_items.xml.  Copy the following code inside this file, we are using CardView here to design the list item.

list_items.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
 
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:elevation="4dp">
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/activity_horizontal_margin">
 
            <TextView
                android:id="@+id/textViewHead"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Your Heading"
                android:textAppearance="?android:textAppearanceLarge" />
 
            <TextView
                android:id="@+id/textViewDesc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/textViewHead"
                android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie nisi dui. "
                android:textAppearance="?android:textAppearanceMedium" />
 
            <TextView
                android:id="@+id/textViewOptions"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:text="&#8942;"
                android:textAppearance="?android:textAppearanceLarge" />
 
 
        </RelativeLayout>
 
    </android.support.v7.widget.CardView>
 
</LinearLayout>

  • The above code will generate the following ListItem.

options for recyclerview item

Creating Menu Items

  • Now we need the menu item so first create a new directory inside res and name it menu.
  • Inside this menu directory create a menu resource file named options_menu.xml.  And create the menus you want inside this file. See the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item
        android:id="@+id/menu1"
        android:title="Menu 1" />
 
    <item
        android:id="@+id/menu2"
        android:title="Menu 2" />
 
    <item
        android:id="@+id/menu3"
        android:title="Menu 3" />
 
 
</menu>

Creating List Model and Adapter

  • Now lets come to the coding part. First we will create a Model for our RecyclerView. So create a java file named MyList.java. 

MyList
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package net.simplifiedcoding.recyclerviewoptionsmenu;
 
/**
* Created by Belal on 05/10/16.
*/
public class MyList {
    private String head;
    private String desc;
 
    //constructor initializing values
    public MyList(String head, String desc) {
        this.head = head;
        this.desc = desc;
    }
 
    //getters
    public String getHead() {
        return head;
    }
 
    public String getDesc() {
        return desc;
    }
}

  • Now its time to create our RecyclerView Adapter. So create a java file named CustomAdapter and write the following code.

CustomAdapter.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
package net.simplifiedcoding.recyclerviewoptionsmenu;
 
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import java.util.List;
 
/**
* Created by Belal on 29/09/16.
*/
 
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {
 
    private List<MyList> list;
    private Context mCtx;
 
    public CustomAdapter(List<MyList> list, Context mCtx) {
        this.list = list;
        this.mCtx = mCtx;
    }
 
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_items, parent, false);
        return new ViewHolder(v);
    }
 
    @Override
    public void onBindViewHolder(CustomAdapter.ViewHolder holder, int position) {
        MyList myList = list.get(position);
        holder.textViewHead.setText(myList.getHead());
        holder.textViewDesc.setText(myList.getDesc());
 
        holder.buttonViewOption.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
 
                //will show popup menu here
 
            }
        });
    }
 
 
    @Override
    public int getItemCount() {
        return list.size();
    }
 
 
    public class ViewHolder extends RecyclerView.ViewHolder {
 
        public TextView textViewHead;
        public TextView textViewDesc;
        public TextView buttonViewOption;
 
        public ViewHolder(View itemView) {
            super(itemView);
 
            textViewHead = (TextView) itemView.findViewById(R.id.textViewHead);
            textViewDesc = (TextView) itemView.findViewById(R.id.textViewDesc);
            buttonViewOption = (TextView) itemView.findViewById(R.id.textViewOptions);
        }
    }
}

Adding Items to RecyclerView

  • Now lets add some items to our RecyclerView. So come inside MainActivity.java and write the following code.

MainActivity.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package net.simplifiedcoding.recyclerviewoptionsmenu;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.TextView;
 
import java.util.ArrayList;
import java.util.List;
 
public class MainActivity extends AppCompatActivity {
 
    //recyclerview objects
    private RecyclerView recyclerView;
    private RecyclerView.LayoutManager layoutManager;
    private RecyclerView.Adapter adapter;
 
    //model object for our list data
    private List<MyList> list;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //initializing views
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
 
        list = new ArrayList<>();
 
        //loading list view item with this function
        loadRecyclerViewItem();
    }
 
    private void loadRecyclerViewItem() {
        //you can fetch the data from server or some apis
        //for this tutorial I am adding some dummy data directly
        for (int i = 1; i <= 5; i++) {
            MyList myList = new MyList(
                    "Dummy Heading " + i,
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie nisi dui."
            );
            list.add(myList);
        }
 
        adapter = new CustomAdapter(list, this);
        recyclerView.setAdapter(adapter);
    }
}

  • Now run the application and you should see the following output.

options menu for recyclerview

  • So by now we have our nice looking RecyclerView. Now we need to create Options Menu for RecyclerView Items. You can see the three vertical dots in every item. We will option the option on the click over this three vertical dot.

Creating Options Menu for RecyclerView Item

  • Now the last phase of this tutorial is creating Options Menu for RecyclerView Item. So again come inside CustomAdapter.java. And inside onClick() method where we written a comment that will show popup menu here, write the following code.

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
               //creating a popup menu
                PopupMenu popup = new PopupMenu(mCtx, holder.buttonViewOption);
                //inflating menu from xml resource
                popup.inflate(R.menu.options_menu);
                //adding click listener
                popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.menu1:
                                //handle menu1 click
                                break;
                            case R.id.menu2:
                                //handle menu2 click
                                break;
                            case R.id.menu3:
                                //handle menu3 click
                                break;
                        }
                        return false;
                    }
                });
                //displaying the popup
                popup.show();

  • So the final code of the CustomAdapter.java after adding the Options Menu for RecyclerView Item will be.

CustomAdapter.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
package net.simplifiedcoding.recyclerviewoptionsmenu;
 
import android.content.Context;
import android.content.DialogInterface;
import android.support.v7.app.AlertDialog;
import android.support.v7.widget.PopupMenu;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import java.util.List;
 
/**
* Created by Belal on 29/09/16.
*/
 
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {
 
    private List<MyList> list;
    private Context mCtx;
 
    public CustomAdapter(List<MyList> list, Context mCtx) {
        this.list = list;
        this.mCtx = mCtx;
    }
 
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_items, parent, false);
        return new ViewHolder(v);
    }
 
    @Override
    public void onBindViewHolder(final CustomAdapter.ViewHolder holder, int position) {
        MyList myList = list.get(position);
        holder.textViewHead.setText(myList.getHead());
        holder.textViewDesc.setText(myList.getDesc());
 
        holder.buttonViewOption.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
 
                //creating a popup menu
                PopupMenu popup = new PopupMenu(mCtx, holder.buttonViewOption);
                //inflating menu from xml resource
                popup.inflate(R.menu.options_menu);
                //adding click listener
                popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.menu1:
                                //handle menu1 click
                                break;
                            case R.id.menu2:
                                //handle menu2 click
                                break;
                            case R.id.menu3:
                                //handle menu3 click
                                break;
                        }
                        return false;
                    }
                });
                //displaying the popup
                popup.show();
 
            }
        });
    }
 
 
    @Override
    public int getItemCount() {
        return list.size();
    }
 
 
    public class ViewHolder extends RecyclerView.ViewHolder {
 
        public TextView textViewHead;
        public TextView textViewDesc;
        public TextView buttonViewOption;
 
        public ViewHolder(View itemView) {
            super(itemView);
 
            textViewHead = (TextView) itemView.findViewById(R.id.textViewHead);
            textViewDesc = (TextView) itemView.findViewById(R.id.textViewDesc);
            buttonViewOption = (TextView) itemView.findViewById(R.id.textViewOptions);
        }
    }
}

  • Now run the application.

options menu for recyclerview item

  • Bingo! Its working absolutely fine.
  • Still facing problems? Don’t worry you can get my source code from github repository, just go to the link given below.

Options Menu for RecyclerView Source Code

So thats all for this Options Menu For RecyclerView Tutorial friends. If you are still facing troubles or have any query please don’t hesitate to leave your comments. Thank You 🙂

Sharing is Caring:

  • Tweet
  • Share on Tumblr
  • More
  • Pocket
  • Print
  • Email

Related

Filed Under: Android Application Development, Android Intermediate Tagged With: android recyclerview, options menu for recyclerview item

About Belal Khan

I am Belal Khan, I am currently pursuing my MCA. In this blog I write tutorials and articles related to coding, app development, android etc.

Comments

  1. VIN says

    October 5, 2016 at 11:59 pm

    Very nice tutorial man! What a big help! Thank you.

    Reply
  2. VINKHIL says

    November 2, 2016 at 8:31 am

    VERY NICE TUTORIAL. HELPED ME ALOT TO UNDERSTAND RECYCLER VIEW..EASY AND VERY WELL DESCRIBED TUTORIAL…LOVED IT..HATS OFF TO U GUYS..KEEP GOING..

    Reply
  3. MB Obiosio says

    November 30, 2016 at 6:43 am

    How do I update the content of the cardview once in 24 hours? Need just one cardview on the main activity then I want to update the contents once daily.

    Reply
  4. K. hahaz says

    December 15, 2016 at 3:41 am

    Hello there, wanna ask you something, how to implement recyclerview inside a fragment? any help would be very appreciated 😀

    Reply
  5. sharon says

    December 22, 2016 at 9:09 am

    how to design multiple recycleview pls tell me like google playstore

    Reply
  6. ashna says

    January 13, 2017 at 7:42 am

    Hi there, i have a problem with my listview. it is not appearing one after the other. i have to scroll down to get the other one. Can you tell me where i have gone wrong?

    Reply
  7. wiz says

    February 11, 2017 at 7:10 pm

    thanks for sharing bro!!! love you

    Reply
  8. Rahul says

    July 31, 2017 at 11:14 am

    It helped me… thanks

    Reply
  9. M Vishnuvardhan Reddy says

    December 5, 2017 at 1:19 pm

    TypedValue{t=0x3d=0x3ee “res/drawable/ic_menu more overflow material.xml” a=1 r=0x10803d6}
    This error i am getting in my project when i am used pop menu code in adapter. When i run the app it showing unfortunatly stop becoz of the adove error.

    Reply
  10. saz says

    December 21, 2017 at 2:23 pm

    android:layout_width=”wrap_content” not give perfect click for me
    i use this insted
    android:layout_width=”40dp”
    android:gravity=”center”

    Reply
  11. CAT says

    December 28, 2017 at 5:03 am

    Hello,

    I wish to create Recyclerview with Floating button.

    In detail, recyclerview’s each cell will contain an imageview & 1 floating action button. On click floating action button, circular floating action menu will appear.
    I tried this using a library of github ie. https://github.com/oguzbilgener/CircularFloatingActionMenu library.
    I stuck,where, when I click on 1st item floating button, circular floating menu get visible of 1st cell which is correct . But at the same time when I scroll down, last cell’s circular floating menu is also opened.
    I request your guidance, regarding Recyclerview with floating action button & particularly how to handle clicked cell position of resp floating button inside recyclerview.
    Thanks in advance.

    Reply
  12. Seth says

    February 27, 2018 at 7:49 am

    What a nice hack with “⋮” 😀

    Reply
  13. Anand Mishra says

    April 18, 2018 at 5:41 am

    how to hide Menu 3 for 4th position element in RecyclarView

    Reply
  14. Julia says

    July 15, 2018 at 5:33 pm

    Very helpful, thank you!

    Reply
  15. Rudhin says

    September 9, 2018 at 6:23 pm

    Thank you so much, I missed popup.show() all these time. Big saver.

    Reply

Leave a Reply to Julia Cancel reply

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

Search




Download our Android App

Simplified Coding in Google Play

About Me

Belal Khan

Hello I am Belal Khan, founder and owner of Simplified Coding. I am currently pursuing MCA from St. Xavier's College, Ranchi. I love to share my knowledge over Internet.

Connect With Me

Follow @codesimplified
Simplified Coding

Popular Tutorials

  • Android JSON Parsing – Retrieve From MySQL Database
  • Android Login and Registration Tutorial with PHP MySQL
  • Android Volley Tutorial – Fetching JSON Data from URL
  • Android Upload Image to Server using Volley Tutorial
  • Android TabLayout Example using ViewPager and Fragments
  • Retrieve Data From MySQL Database in Android using Volley
  • Firebase Cloud Messaging Tutorial for Android
  • Android Volley Tutorial – User Registration and Login
  • Android Upload Image to Server Using PHP MySQL
  • Android Navigation Drawer Example using Fragments




About Simplified Coding

Simplified Coding is a blog for all the students learning programming. We are providing various tutorials related to programming and application development. You can get various nice and simplified tutorials related to programming, app development, graphics designing and animation. We are trying to make these things simplified and entertaining. We are writing text tutorial and creating video and visual tutorials as well. You can check about the admin of the blog here and check out our sitemap

Quick Links

  • Advertise Here
  • Privacy Policy
  • Disclaimer
  • About
  • Contact Us
  • Write for Us

Categories

Android Advance Android Application Development Android Beginners Android Intermediate Ionic Framework Tutorial JavaScript Kotlin Android Others PHP Advance PHP Tutorial React Native

Copyright © 2017 · Simplified Coding· All rights Reserved. And Our Sitemap.All Logos & Trademark Belongs To Their Respective Owners·

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.