How to Implement RecyclerView in a Fragment in Android?
In Android, a fragment is a modular section of a user interface that can be combined with other fragments to create a flexible and responsive application. A fragment represents a behavior or a portion of the user interface in an Activity, which can be reused in different activities or layouts. It has its own lifecycle and can receive input events and interact with the user. Fragments were introduced in Android 3.0 (API level 11) as a way to create more flexible and dynamic user interfaces for larger-screen devices, such as tablets. They allow developers to reuse UI components across different screen sizes and orientations, and to create more efficient and responsive applications.
Fragments can be added, removed, replaced, or rearranged dynamically at runtime, which makes it easier to create complex and flexible layouts. They are often used in combination with the FragmentManager class, which manages the lifecycle of fragments and their interaction with the hosting activity. In this article we are going to see how can we implement a RecycleView within a Fragment in Android, In this project, by clicking a button we are moving to a fragment and a RecycleView is displayed within the Fragment. To implement RecycleView in Fragment we have to follow some steps :
- Create a RecyclerView layout
- Create a RecyclerView Adapter
- Set the RecyclerView Adapter and LayoutManager in our fragment onCreateView method
- Bind data to the RecyclerView Adapter
To learn more about RecycleView in Android you can visit this article RecyclerView in Android with Example.
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 new Fragment
In this step, we have to create a new Fragment named as FirstFragment.
Click on Fragment(Blank) and create a new Fragment.
Step 4: Creating a layout for RecyclerView
Navigate to app > res > layout then Create a new layout resource file and name it items_list.xml. It includes two Text Views for displaying the Name and Emails of the Employees. Comments are added inside the code for a better understanding of the Code.
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 Vertical --> < LinearLayout android:layout_width = "match_parent" android:layout_height = "wrap_content" android:padding = "15dp" android:orientation = "vertical" > <!--TextView for displaying Name --> < 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:layout_weight = "1" android:textColor = "#454545" android:textSize = "16sp" tools:text = "Email" /> </ LinearLayout > </ androidx.cardview.widget.CardView > </ LinearLayout > |
Step 5: Working fragment_first.xml
Navigate to app > res > layout > fragment_first.xml. In this fragment layout file, we are going to implement the recyclerView.
XML
<? xml version = "1.0" encoding = "utf-8" ?> <!--Linear layout orientation vertical--> < LinearLayout 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:orientation = "vertical" tools:context = ".FirstFragment" > <!--Linear layout orientation vertical--> < LinearLayout android:orientation = "vertical" android:layout_width = "match_parent" android:layout_height = "match_parent" > <!--TextView--> < TextView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "center" android:textSize = "20sp" android:textColor = "@color/black" android:textStyle = "bold" android:text = "Fragment 1" /> <!--RecyclerView--> < androidx.recyclerview.widget.RecyclerView android:id = "@+id/recycleView" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:listitem = "@layout/items_list" /> </ LinearLayout > </ LinearLayout > |
Step 6: 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. In this layout, we have created a button by clicking this button the fragment layout will be displayed.
XML
<? xml version = "1.0" encoding = "utf-8" ?> <!--Linear Layout--> < 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:layout_height = "match_parent" android:orientation = "vertical" android:id = "@+id/llMain" tools:context = ".MainActivity" > <!--Frame layout--> < FrameLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:id = "@+id/frame_layout" > <!--Button--> < Button android:id = "@+id/btn_frag" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "center" android:foreground = "?attr/selectableItemBackground" android:background = "@color/Green" android:text = "RecycleView In Fragment" /> </ FrameLayout > </ LinearLayout > |
Step 7: 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. Below is the code for the Employee model. Navigate to app >java > your package name > Create a Kotlin data class named it Employee.kt.
Kotlin
package com.example.gfg data class Employee( val name:String, // name of the employee val email:String // email of the employee ):java.io.Serializable |
Java
package com.example.gfg; import java.io.Serializable; public class Employee implements Serializable { private final String name; // name of the employee private final 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 8: Creating Employee ArrayList
In this step, we are going to prepare the ArrayList 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.
Kotlin
package com.example.gfg object Constants { // Arraylist and return the Arraylist 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.gfg; import java.util.ArrayList; public class Constants { // ArrayList and return the ArrayList public static ArrayList<Employee> getEmployeeData() { // create an ArrayList of type Employee class ArrayList<Employee> employeeList = new ArrayList<Employee>(); 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 9: Create an Adapter for our RecyclerView
In this step, we are going to create an adapter class for our recycleView and override its three-member functions. Navigate to app > java >your package name > Create a Kotlin Object named Adapter. Below is the code for the ItemAdapter class. Comments are added inside the code for a better understanding of the Code.
Kotlin
package com.example.gfg import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.TextView import androidx.recyclerview.widget.RecyclerView class Adapter( private val emplist: ArrayList<Employee>) : RecyclerView.Adapter<Adapter.MyViewHolder>() { // This method creates a new ViewHolder object for each item in the RecyclerView override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder { // Inflate the layout for each item and return a new ViewHolder object val itemView = LayoutInflater.from(parent.context).inflate(R.layout.items_list, parent, false ) return MyViewHolder(itemView) } // This method returns the total // number of items in the data set override fun getItemCount(): Int { return emplist.size } // This method binds the data to the ViewHolder object // for each item in the RecyclerView override fun onBindViewHolder(holder: MyViewHolder, position: Int) { val currentEmp = emplist[position] holder.name.text = currentEmp.name holder.email.text = currentEmp.email } // This class defines the ViewHolder object for each item in the RecyclerView class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { val name: TextView = itemView.findViewById(R.id.tvName) val email: TextView = itemView.findViewById(R.id.tvEmail) } } |
Java
package com.example.gfg; 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; public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> { private ArrayList<Employee> emplist; public Adapter(ArrayList<Employee> emplist) { this .emplist = emplist; } // This method creates a new ViewHolder object for each item in the RecyclerView @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { // Inflate the layout for each item and return a new ViewHolder object View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.items_list, parent, false ); return new MyViewHolder(itemView); } // This method returns the total // number of items in the data set @Override public int getItemCount() { return emplist.size(); } // This method binds the data to the ViewHolder object // for each item in the RecyclerView @Override public void onBindViewHolder(MyViewHolder holder, int position) { Employee currentEmp = emplist.get(position); holder.name.setText(currentEmp.getName()); holder.email.setText(currentEmp.getEmail()); } // This class defines the ViewHolder object for each item in the RecyclerView public static class MyViewHolder extends RecyclerView.ViewHolder { private TextView name; private TextView email; public MyViewHolder(View itemView) { super (itemView); name = itemView.findViewById(R.id.tvName); email = itemView.findViewById(R.id.tvEmail); } } } |
Step 10: Working with FirstFragment.kt
Navigate to the app > java >your package name > FirstFragment, in this file, we are going to initialize the RecyclerView and its adapter within the onCreateView method. Add the below code to your FirstFragment.kt file.
Kotlin
override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super .onViewCreated(view, savedInstanceState) // getting the employeelist val employelist=Constants.getEmployeeData() // Assign employeelist to ItemAdapter val itemAdapter=Adapter(employelist) // Set the LayoutManager that // this RecyclerView will use. val recyclerView:RecyclerView=view.findViewById(R.id.recycleView) recyclerView.layoutManager = LinearLayoutManager(context) // adapter instance is set to the // recyclerview to inflate the items. recyclerView.adapter = itemAdapter } |
Java
@Override public void onViewCreated( @NonNull View view, @Nullable Bundle savedInstanceState) { super .onViewCreated(view, savedInstanceState); // getting the employeelist ArrayList<Employee> employelist = Constants.getEmployeeData(); // Assign employeelist to ItemAdapter Adapter itemAdapter = new Adapter(employelist); // Set the LayoutManager that // this RecyclerView will use. RecyclerView recyclerView = view.findViewById(R.id.recycleView); recyclerView.setLayoutManager( new LinearLayoutManager(getContext())); // adapter instance is set to the // recyclerview to inflate the items. recyclerView.setAdapter(itemAdapter); } |
Full Code of the FirstFragment.kt:
Kotlin
package com.example.gfg import android.os.Bundle import androidx.fragment.app.Fragment import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import androidx.recyclerview.widget.LinearLayoutManager import androidx.recyclerview.widget.RecyclerView // TODO: Rename parameter arguments, choose names that match // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER private const val ARG_PARAM1 = "param1" private const val ARG_PARAM2 = "param2" /** * A simple [Fragment] subclass. * Use the [FirstFragment.newInstance] factory method to * create an instance of this fragment. */ class FirstFragment : Fragment() { // TODO: Rename and change types of parameters private var param1: String? = null private var param2: String? = null override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) arguments?.let { param1 = it.getString(ARG_PARAM1) param2 = it.getString(ARG_PARAM2) } } override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_first, container, false ) } companion object { /** * Use this factory method to create a new instance of * this fragment using the provided parameters. * * @param param1 Parameter 1. * @param param2 Parameter 2. * @return A new instance of fragment FirstFragment. */ // TODO: Rename and change types and number of parameters @JvmStatic fun newInstance(param1: String, param2: String) = FirstFragment().apply { arguments = Bundle().apply { putString(ARG_PARAM1, param1) putString(ARG_PARAM2, param2) } } } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super .onViewCreated(view, savedInstanceState) // getting the employeelist val employelist=Constants.getEmployeeData() // Assign employeelist to ItemAdapter val itemAdapter=Adapter(employelist) // Set the LayoutManager that // this RecyclerView will use. val recyclerView:RecyclerView=view.findViewById(R.id.recycleView) recyclerView.layoutManager = LinearLayoutManager(context) // adapter instance is set to the // recyclerview to inflate the items. recyclerView.adapter = itemAdapter } } |
Java
package com.example.gfg; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.fragment.app.Fragment; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView; public class FirstFragment extends Fragment { private String param1; private String param2; @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); if (getArguments() != null ) { param1 = getArguments().getString( "param1" ); param2 = getArguments().getString( "param2" ); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_first, container, false ); } public static FirstFragment newInstance(String param1, String param2) { FirstFragment fragment = new FirstFragment(); Bundle args = new Bundle(); args.putString( "param1" , param1); args.putString( "param2" , param2); fragment.setArguments(args); return fragment; } @Override public void onViewCreated(View view, Bundle savedInstanceState) { super .onViewCreated(view, savedInstanceState); // getting the employeelist ArrayList<Employee> employelist = Constants.getEmployeeData(); // Assign employeelist to ItemAdapter Adapter itemAdapter = new Adapter(employelist); // Set the LayoutManager that // this RecyclerView will use. RecyclerView recyclerView = view.findViewById(R.id.recycleView); recyclerView.setLayoutManager( new LinearLayoutManager(getContext())); // adapter instance is set to the // recyclerview to inflate the items. recyclerView.setAdapter(itemAdapter); } } |
Step 11: Working with MainActivity.kt
Navigate to the app > java >your package name > MainActivity, in this step we are going to setOnclickListener to the button and replace the FrameLayout with the Fragment.
Kotlin
package com.example.gfg import android.annotation.SuppressLint import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.View import android.widget.Button import androidx.fragment.app.Fragment class MainActivity : AppCompatActivity() { // This method is called when the activity is first created override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // Get a reference to the "btn_frag" button from the layout val btn: Button = findViewById(R.id.btn_frag) // Set an OnClickListener on the button btn.setOnClickListener { // When the button is clicked, replace // the current fragment with a new // instance of the FirstFragment replaceFragment(FirstFragment()) // Hide the button btn.visibility = View.GONE } } // This method replaces the current fragment // with a new fragment fun replaceFragment(fragment: Fragment) { // Get a reference to the FragmentManager val fragmentManager = supportFragmentManager // Start a new FragmentTransaction val fragmentTransaction = fragmentManager.beginTransaction() // Replace the current fragment with the new fragment fragmentTransaction.replace(R.id.frame_layout, fragment) // Commit the FragmentTransaction fragmentTransaction.commit() } } |
Java
package com.example.gfg; import android.os.Bundle; import android.view.View; import android.widget.Button; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Get a reference to the "btn_frag" button from the // layout Button btn = findViewById(R.id.btn_frag); // Set an OnClickListener on the button btn.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // When the button is clicked, replace // the current fragment with a new // instance of the FirstFragment replaceFragment( new FirstFragment()); // Hide the button btn.setVisibility(View.GONE); } }); } // This method replaces the current fragment // with a new fragment public void replaceFragment(Fragment fragment) { // Get a reference to the FragmentManager androidx.fragment.app .FragmentManager fragmentManager = getSupportFragmentManager(); // Start a new FragmentTransaction androidx.fragment.app .FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); // Replace the current fragment with the new // fragment fragmentTransaction.replace(R.id.frame_layout, fragment); // Commit the FragmentTransaction fragmentTransaction.commit(); } } |
Output:
Contact Us