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:
- Create a layout file for the Dialog and add a RecyclerView to it.
- Create a class for the Dialog and set its content view to the layout file you created.
- 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 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 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 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:
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
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:
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
}
}
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:
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)
}
}
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:
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
}
}
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:
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()
}
}
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: