How to Implement RecylerView Inside a Dialogue Window?

RecyclerView is a ViewGroup added to the Android studio as a successor of the GridView and ListView. It is an improvement on both of them and can be found in the latest v-7 support packages. It has been created to make possible the construction of any lists with XML layouts as an item that can be customized vastly while improving on the efficiency of ListViews and GridViews. In this article, we are going to see how can we implement a RecylerView inside a Dialogue Window. For this we have to follow some steps: 

To implement a RecyclerView inside a Dialog, you can follow these steps are as follows:

1. Create a layout file for the Dialog and add a RecyclerView to it.
2. Create a class for the Dialog and set its content view to the layout file you created.
3. Create an adapter for the RecyclerView and pass it to Dialog’s setAdapter method.

Step by Step Implementation:

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Change the StatusBar Color

Navigate to app > res > values > themes > themes.xml and add the below code under the style section in the themes.xml file.

<item name="android:statusBarColor" tools:targetApi="l">#308d46</item>

Step 3: Creating a layout for RecyclerView

Here we have to create a layout for our RecyclerView to display our items, Navigate to app > res > layout > Create a new layout file named item_employee.xml, it contains two textViews for displaying the name and email of the employee.

item_employee.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<!--LinearLayout orientation horizontal -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/llMain"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="10dp">

    <!--TextView for displaying Name -->
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@color/white"
        android:foreground="?attr/selectableItemBackground"
        app:cardCornerRadius="3dp"
        app:cardElevation="3dp"
        app:cardUseCompatPadding="true">

        <!--LinearLayout orientation horizontal -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@android:color/black"
                android:textSize="20sp"
                tools:text="Name" />

            <!--TextView for displaying Email -->
            <TextView
                android:id="@+id/tvEmail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#454545"
                android:textSize="16sp"
                tools:text="Email" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Step 4: Creating a Dialog Window Layout File

Navigate to app > res > layout > create a new layout file named Dialog_list.xml, it contains the RecylerView and displays a list of the employee inside a dialog window.

Dialog_list.xml: 

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:layout_height="match_parent">

  <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/tvTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:textColor="@color/black"
                android:textSize="20sp"
                android:textStyle="bold"
                android:text="List of Employees"
                android:visibility="visible"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:background="#308d46" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rvList"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="visible"
                tools:listitem="@layout/item_employee" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Step 5: Working with activity_main.xml

Navigate to the app > res > layout > activity_main.xml and add the below code to the activity_main.xml file. Below is the code for the activity_main.xml file. The activity_main.xml represents the UI part of our application, it contains a TextView and a RecylerView to display the list of items.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/tvTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:textColor="@color/black"
                android:textSize="20sp"
                android:textStyle="bold"
                android:text="List of Employees"
                android:visibility="visible"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:background="#308d46" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rvList"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="visible"
                tools:listitem="@layout/item_employee"/>

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Step 6: Creating an Employee Model

In this step, we are going to create an employee model for our RecyclerView. It Contains the Employee’s Name and Employee email Id, and it was going to be a Serializable model because we are going to pass the object of this Employee model to another Activity. Below is the code for the Employee model. Navigate to app >java > your package name >  Create a Kotlin data class named it Employee.kt.

Employee.kt:

Kotlin

package com.example.geeksforgeeks
import android.os.Parcel
import android.os.Parcelable

// Employee model
data class Employee(
    val name:String,    // name of the employee
    val email:String    // email of the employee
):java.io.Serializable  // serializing the model

Java

package com.example.geeksforgeeks;

import java.io.Serializable;

// Employee model
public class Employee implements Serializable {
    private String name;    // name of the employee
    private String email;   // email of the employee

    public Employee(String name, String email) {
        this.name = name;
        this.email = email;
    }

    public String getName() {
        return name;
    }

    public String getEmail() {
        return email;
    }
}

Step 7: Creating Employee ArrayList

In this step, we are going to prepare the List of employees with the employee name and employee email. Below is the code for Creating and adding data to the ArrayList. Comments are added inside the code for a better understanding of the Code. Navigate to app > java >your package name > Create a Kotlin Object named Constants.

Constants.kt:

Kotlin

package com.example.geeksforgeeks

object Constants {
    fun getEmployeeData():ArrayList<Employee>{
        // create an arraylist of type employee class
        val employeeList=ArrayList<Employee>()
        val emp1=Employee("Chinmaya Mohapatra","chinmaya@gmail.com")
        employeeList.add(emp1)
        val emp2=Employee("Ram prakash","ramp@gmail.com")
        employeeList.add(emp2)
        val emp3=Employee("OMM Meheta","mehetaom@gmail.com")
        employeeList.add(emp3)
        val emp4=Employee("Hari Mohapatra","harim@gmail.com")
        employeeList.add(emp4)
        val emp5=Employee("Abhisek Mishra","mishraabhi@gmail.com")
        employeeList.add(emp5)
        val emp6=Employee("Sindhu Malhotra","sindhu@gmail.com")
        employeeList.add(emp6)
        val emp7=Employee("Anil sidhu","sidhuanil@gmail.com")
        employeeList.add(emp7)
        val emp8=Employee("Sachin sinha","sinhas@gmail.com")
        employeeList.add(emp8)
        val emp9=Employee("Amit sahoo","sahooamit@gmail.com")
        employeeList.add(emp9)
        val emp10=Employee("Raj kumar","kumarraj@gmail.com")
        employeeList.add(emp10)

        return  employeeList
    }
}

Java

package com.example.geeksforgeeks;

import java.util.ArrayList;

public class Constants {
    public static ArrayList<Employee> getEmployeeData() {
        ArrayList<Employee> employeeList = new ArrayList<>();
        Employee emp1 = new Employee("Chinmaya Mohapatra", "chinmaya@gmail.com");
        employeeList.add(emp1);
        Employee emp2 = new Employee("Ram prakash", "ramp@gmail.com");
        employeeList.add(emp2);
        Employee emp3 = new Employee("OMM Meheta", "mehetaom@gmail.com");
        employeeList.add(emp3);
        Employee emp4 = new Employee("Hari Mohapatra", "harim@gmail.com");
        employeeList.add(emp4);
        Employee emp5 = new Employee("Abhisek Mishra", "mishraabhi@gmail.com");
        employeeList.add(emp5);
        Employee emp6 = new Employee("Sindhu Malhotra", "sindhu@gmail.com");
        employeeList.add(emp6);
        Employee emp7 = new Employee("Anil sidhu", "sidhuanil@gmail.com");
        employeeList.add(emp7);
        Employee emp8 = new Employee("Sachin sinha", "sinhas@gmail.com");
        employeeList.add(emp8);
        Employee emp9 = new Employee("Amit sahoo", "sahooamit@gmail.com");
        employeeList.add(emp9);
        Employee emp10 = new Employee("Raj kumar", "kumarraj@gmail.com");
        employeeList.add(emp10);

        return employeeList;
    }
}

Step 8: Create an Adapter for our RecylerView 

As we know for every RecylerView we need an Adapter class.  and Implement the Three member functions.

• onCreateViewHolder: Here we have to connect the layout resource file that we are for our RecylerView. 
• onBindViewHolder: Here we have to bind our items to the data source.
• getItemCount: Here we have to return the length of our ArrayList.

Here we are going to Apply OnClickListener to our RecylerView Adapter by Implementing OnClickListener Interface. Navigate to app > java >your package name > Create a Kotlin Class named as EmployeeAdapter. Below is the code for the ItemAdapter class. Comments are added inside the code for a better understanding of the Code.

EmployeeAdapter.kt:

Kotlin

package com.example.geeksforgeeks

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import java.util.ArrayList

// Define a class for the adapter,
// which extends RecyclerView.Adapter
class EmployeeAdapter(
    private val context: Context,
    // The adapter needs a list of data to display
    private var list: ArrayList<Employee>,
) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    // This method is called when the RecyclerView needs a new ViewHolder to display an item
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        // Use the LayoutInflater to
        // create a new view from the
        // item_employee layout file
        val view = LayoutInflater.from(context).inflate(R.layout.item_employee, parent, false)
        // Return a new ViewHolder that
        // holds the newly created view
        return MyViewHolder(view)
    }

    // This method is called when the RecyclerView needs
    // to display the data at a certain position
    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        // Get the item at the specified position from the list
        val item = list[position]

        // Check if the ViewHolder is of type MyViewHolder
        if (holder is MyViewHolder) {
            // If it is, set the name and email TextViews
            // to the corresponding values in the item
            holder.name.text = item.name
            holder.email.text = item.email
        }
    }

    // This method returns the total
    // number of items in the list
    override fun getItemCount(): Int {
        return list.size
    }

    // Define a ViewHolder class that holds references
    // to the TextViews in the item_employee layout file
    private class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val name = view.findViewById<TextView>(R.id.tvName)
        val email = view.findViewById<TextView>(R.id.tvEmail)
    }
}

Java

package com.example.geeksforgeeks;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;

// Define a class for the adapter,
// which extends RecyclerView.Adapter
public class EmployeeAdapter
    extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private Context context;
    // The adapter needs a list of data to display
    private ArrayList<Employee> list;

    public EmployeeAdapter(Context context,
                           ArrayList<Employee> list)
    {
        this.context = context;
        this.list = list;
    }

    // This method is called when the RecyclerView needs a
    // new ViewHolder to display an item
    @Override
    public RecyclerView.ViewHolder
    onCreateViewHolder(ViewGroup parent, int viewType)
    {
        // Use the LayoutInflater to
        // create a new view from the
        // item_employee layout file
        View view = LayoutInflater.from(context).inflate(
            R.layout.item_employee, parent, false);
        // Return a new ViewHolder that
        // holds the newly created view
        return new MyViewHolder(view);
    }

    // This method is called when the RecyclerView needs
    // to display the data at a certain position
    @Override
    public void
    onBindViewHolder(RecyclerView.ViewHolder holder,
                     int position)
    {
        // Get the item at the specified position from the
        // list
        Employee item = list.get(position);

        // Check if the ViewHolder is of type MyViewHolder
        if (holder instanceof MyViewHolder) {
            // If it is, set the name and email TextViews
            // to the corresponding values in the item
            ((MyViewHolder)holder)
                .name.setText(item.getName());
            ((MyViewHolder)holder)
                .email.setText(item.getEmail());
        }
    }

    // This method returns the total
    // number of items in the list
    @Override public int getItemCount()
    {
        return list.size();
    }

    // Define a ViewHolder class that holds references
    // to the TextViews in the item_employee layout file
    private static class MyViewHolder
        extends RecyclerView.ViewHolder {
        TextView name;
        TextView email;

        MyViewHolder(View view)
        {
            super(view);
            name = view.findViewById(R.id.tvName);
            email = view.findViewById(R.id.tvEmail);
        }
    }
}

Step 9: Creating a Class for Dialog Window

In this step we are going to create a Kotlin class to set out the dialog window, Navigate to app > java >your package name > Create a Kotlin Class named as DialogList, below is the code for DialogList.kt.

DialogList.kt:

Kotlin

package com.example.geeksforgeeks

import android.app.Dialog
import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

// Define a DialogList class that extends Dialog
abstract class DialogList(
    context: Context,
    private var list: ArrayList<Employee>,
) : Dialog(context) {

    private var adapter: EmployeeAdapter? = null

    // This method is called when the Dialog is created
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState ?: Bundle())

        // Use the LayoutInflater to inflate the
        // dialog_list layout file into a View object
        val view = LayoutInflater.from(context).inflate(R.layout.dialog_list, null)

        // Set the dialog's content view
        // to the newly created View object
        setContentView(view)

        // Allow the dialog to be dismissed
        // by touching outside of it
        setCanceledOnTouchOutside(true)

        // Allow the dialog to be canceled
        // by pressing the back button
        setCancelable(true)
        // Set up the RecyclerView in the dialog
        setUpRecyclerView(view)
    }

    // This method sets up the RecyclerView in the dialog
    private fun setUpRecyclerView(view: View) {
        // Find the RecyclerView in the layout file and set
        // its layout manager to a LinearLayoutManager
        view.findViewById<RecyclerView>(R.id.rvList).layoutManager = LinearLayoutManager(context)
        // Create a new instance of the EmployeeAdapter
        // and set it as the RecyclerView's adapter
        adapter = EmployeeAdapter(context, list)
        view.findViewById<RecyclerView>(R.id.rvList).adapter = adapter
    }
}

Java

package com.example.geeksforgeeks;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;

// Define a DialogList class that extends Dialog
public abstract class DialogList extends Dialog {
    private ArrayList<Employee> list;
    private EmployeeAdapter adapter;
    public DialogList(Context context,
                      ArrayList<Employee> list)
    {
        super(context);
        this.list = list;
    }

    // This method is called when the Dialog is created
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState != null
                           ? savedInstanceState
                           : new Bundle());

        // Use the LayoutInflater to inflate the
        // dialog_list layout file into a View object
        View view
            = LayoutInflater.from(getContext())
                  .inflate(R.layout.dialog_list, null);

        // Set the dialog's content view
        // to the newly created View object
        setContentView(view);

        // Allow the dialog to be dismissed
        // by touching outside of it
        setCanceledOnTouchOutside(true);

        // Allow the dialog to be canceled
        // by pressing the back button
        setCancelable(true);

        // Set up the RecyclerView in the dialog
        setUpRecyclerView(view);
    }

    // This method sets up the RecyclerView in the dialog
    private void setUpRecyclerView(View view)
    {
        // Find the RecyclerView in the layout file and set
        // its layout manager to a LinearLayoutManager
        RecyclerView recyclerView
            = view.findViewById(R.id.rvList);
        recyclerView.setLayoutManager(
            new LinearLayoutManager(getContext()));

        // Create a new instance of the EmployeeAdapter
        // and set it as the RecyclerView's adapter
        adapter = new EmployeeAdapter(getContext(), list);
        recyclerView.setAdapter(adapter);
    }
}

Step 10: Working with MainActivity File

In this step, we are going to Get the employeelist by calling the Constants getEmployeeData() method and pass the employeelist to the DialogList class and display the employee list. Comments are added inside the code for a better understanding of the Code.

MainActivity.kt:

Kotlin

package com.example.geeksforgeeks

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

class MainActivity : AppCompatActivity() {

    // This method is called when the activity is created
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Find the "open" button in the layout file
        // and set an onClickListener for it
        val btn_open=findViewById<Button>(R.id.open)
        btn_open.setOnClickListener {
            // Call the EmployeeListDialough
            // method when the button is clicked
            EmployeeListDialough()
        }
    }

    // This method creates and shows an
      // instance of the DialogList dialog
    fun EmployeeListDialough() {
        // Get the employee data from the Constants class
        val employeeList: ArrayList<Employee> = Constants.getEmployeeData()
        // Create a new instance of the DialogList
        // dialog, passing in the activity
        // and employee data as parameters
        val listDialog = object : DialogList(
            this@MainActivity,
            employeeList
        ) {

        }
        // Show the dialog
        listDialog.show()
    }
}

Java

package com.example.geeksforgeeks;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Find the "open" button in the layout file
        // and set an onClickListener for it
        Button btnOpen = findViewById(R.id.open);
        btnOpen.setOnClickListener(
            new View.OnClickListener() {
                @Override public void onClick(View v)
                {
                    // Call the EmployeeListDialough
                    // method when the button is clicked
                    EmployeeListDialough();
                }
            });
    }

    // This method creates and shows an
    // instance of the DialogList dialog
    public void EmployeeListDialough()
    {
        // Get the employee data from the Constants class
        ArrayList<Employee> employeeList
            = Constants.getEmployeeData();
        // Create a new instance of the DialogList
        // dialog, passing in the activity
        // and employee data as parameters
        DialogList listDialog = new DialogList(
            this, employeeList) {
            @Override
            public void onCreate(Bundle savedInstanceState)
            {
                super.onCreate(savedInstanceState);

                // Set up any additional dialog features
            }
        };
        // Show the dialog
        listDialog.show();
    }
}

Output: