Recyclerview in Android Studio with examples
Description:
Recyclerview in Android Studio with examples:- hello guys welcome back this is another Android application development tutorial in this article, I am going to show you how to display a list of items in your Android studio project so, I will show you some examples
this is an example of a list of item
Here is another example
so in this case the items are images.
so now in this article, I’m going to show you how to display the figure1 type of list in your Android studio project.
so in figure2 the items are images this is an example of a grid layout manager and figure1 is an example of a linear layout manager. so in linear layout manager, there is only one column and n number of rows but in the case of a grid layout manager, there is n number of rows and n number of columns. so in the android framework, there is a widget available called a listview to display the figure1 type of list. but in this article we are going to working with recyclerview in android studio, recyclerview is nothing but an advanced version of listview. so in this article, we are going to work with a recyclerview in android studio to display a list of items similar to figure1. so I will show you how to display the list with an example. So let get started.
so we can start with a new Android studio project,
select empty activity and click next button
Then select the application name, in my case, I select the name “RecyclerViewDemo” and click on the finish button .
Our project is created successfully.
Before you start working on recyclerview in android studio make sure you added the dependency for using the recyclerview in Android studio project.
Adding the Recyclerview Dependency in Android Studio
The recyclerview is not a direct part of the android framework you how to add a recyclerview as a support library so you can add a support library through the Gradle in your Android studio project.
so now here I’m going to show you how to add a recyclerview in android studio project so for that just open the Gradle script files, open the module level Gradle file
at the bottom of this file, we have a section called the dependencies
Now here the number of dependencies are available, so now here I’m going to add the dependency for using a recyclerview using the following dependency
1 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;">implementation "androidx.recyclerview:recyclerview:1.2.1"</span> |
after adding the recyclerview dependency sync the project.
so here the project Sync finished successfully. so we successfully added the recyclerview in android studio project.
Adding Items in String file for RecyclerView in Android Studio:
first, we need a list of items, for that simply click on res folder, in res folder click on values folder, in values folder double click on Strings.xml file as you can see below figure.
In String.xml file I create a list of programming languages,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;"><resources> <string name="app_name">RecyclerViewDemo</string> <string-array name="programming_languages"> <item>C</item> <item>C++</item> <item>Java</item> <item>JavaScript</item> <item>Kotlin</item> <item>C#</item> <item>PHP</item> <item>HTML</item> <item>Swift</item> <item>Python</item> <item>PEARL</item> <item>Pascal Script</item> </string-array> </resources> </span> |
so now we have a string array available inside the string stored XML file with the name programming_languages.
Adding RecyclerView Layout in Android Studio:
so now we can add the recyclerview to the layout activity_main.xml. so now currently there is only one activity available in this project. When you open this layout file here is only one textview is available and the root element is a constrained layout.
So first of all change the layout from a constrained layout to a relative layout.
1 2 3 4 5 6 7 8 9 10 11 12 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;"><?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> </RelativeLayout> </span> |
so the first step we need to add a recyclerview to the layout file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.recyclerview.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/recycler" android:scrollbars="vertical" /> </RelativeLayout> |
I set the layout_width to match the parent and height also match the parent.
Then I set the recycler as id.
For scrolling view we need a scroll property, therefore I add the scrollbars. in the preview window, you can see the list of items is displayed
so that’s enough for RecyclerView.
Main Component of RecyclerView in Android Studio:
so for a recyclerview we need three things first one is the layout manager, the second one is the view holder, and the third one is the adapter.
Layout Manager:
in this example there is only one column is available and it is a linear layout manager.
but in this example we have two columns is available. so here we used a grid layout manager so the grid layout manager arrays items in two rows and columns so you can use a number of rows and the number of columns.
so that is the purpose of a layout manager the layout manager array item on the list into rows and columns. so for a recyclerview we need the layout manager.
View holder:
for example here
each item on the recyclerview in this example each item contain an image view and a text view the image will display the image and the text view display a name for the image so each item is represented using a class called the view holder so which is the second thing for the recyclerView in android studio.
Adapter:
The responsibility of the adapter is to place the view holder into the proper position in the recyclerview or in the list
RecyclerView in Android Studio:
now open the MainActivity.java file. so first thing I create a handler for the recyclerview so first I am going to create a handler so
1 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;">private RecyclerView recyclerView;</span> |
then I create some variables for the layout manager I named it layout manager
1 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;">private RecyclerView.LayoutManager layoutManager;</span> |
so here we need to display a list similar to this one
so we need a simple linear layout manager we need only one column.
1 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;">layoutManager= new LinearLayoutManager(this);</span> |
so I initialize the layout manager it is a linear layout manager and for the constructor of that class you need to pass one parameter at least one parameter that is context so here I pass the activity context. So now the layout manager is ready.
1 |
<span style="font-size: 20px; font-family: 'times new roman', times, serif;">recyclerView.setLayoutManager(layoutManager);</span> |
in this statement we to tell the recyclerview we need the layout manager for that i call the method and set to layout manager and i pass the layout manager object so in this statement we set the layout manager for the recyclerview.
so now we need to display the items that means we have to create the adapter and the view holder class so the view holder class is responsible for each item on the recycler view.
Creating Separate Layout file for RecyclerView:
so before going to create the adapter, I need to create a separate layout in our case we have to display only a text, simple text that means we need a simple text view for each item on the list for that here I’m going to create a separate layout file
simply right-click on layout then select new in new select layout Resource file
Then set the name of the layout file, and change the root element from constraint to textview, and press the ok button
And paste the below code in text_layout file:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;"><?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello world" android:textStyle="bold" android:textSize="18sp" android:layout_margin="12dp" android:padding="12dp" > </TextView> </span> |
so this TextView display each item in a recyclerview.
Creating Adapter for RecyclerView:
So now we can create the adapter so right-click the package and create a new Java class here I named it as RecyclerAdapter
so this class represents an adapter for the recyclerview so you have to extends adapter, adapter for reyclerview.
so here we got some errors because you need to implement some methods now you need to implement three methods oncreateview holder, onbindviewholder, and getitemcount for that just click on the red bulb and click on implement methods
Select all three methods and press the ok button.
full Project codes:
Add the below code in RecyclerAdapter.java file:
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 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;">package com.example.recyclerviewdemo; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.List; import androidx.annotation.NonNull; import androidx.recyclerview.widget.RecyclerView; public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> { private List<String> list; public RecyclerAdapter(List<String> list) { this.list=list; } @NonNull @Override public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { TextView textView= (TextView) LayoutInflater.from(parent.getContext()).inflate(R.layout.text_layout,parent,false); MyViewHolder myViewHolder=new MyViewHolder(textView); return myViewHolder; } @Override public void onBindViewHolder(MyViewHolder holder, int position) { holder.programming_languages.setText(list.get(position)); } @Override public int getItemCount() { return list.size(); } public static class MyViewHolder extends RecyclerView.ViewHolder { TextView programming_languages; public MyViewHolder(TextView itemView) { super(itemView); programming_languages=itemView; } } } </span> |
MainActivity.java file code:
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 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;">package com.example.recyclerviewdemo; import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView; import android.os.Bundle; import java.lang.reflect.Array; import java.util.Arrays; import java.util.List; public class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; private RecyclerView.LayoutManager layoutManager; private List<String> list; private RecyclerAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); recyclerView =findViewById(R.id.recycler); layoutManager= new LinearLayoutManager(this); recyclerView.setLayoutManager(layoutManager); list = Arrays.asList(getResources().getStringArray(R.array.programming_languages)); adapter=new RecyclerAdapter(list); recyclerView.setHasFixedSize(true); recyclerView.setAdapter(adapter); } } </span> |
activity_main.xml file code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;"><?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.recyclerview.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/recycler" android:scrollbars="vertical" /> </RelativeLayout> </span> |
String.xml file code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;"><resources> <string name="app_name">RecyclerViewDemo</string> <string-array name="programming_languages"> <item>C</item> <item>C++</item> <item>Java</item> <item>JavaScript</item> <item>Kotlin</item> <item>C#</item> <item>PHP</item> <item>HTML</item> <item>Swift</item> <item>Python</item> <item>PEARL</item> <item>Pascal Script</item> </string-array> </resources> </span> |
text_layout.xml file code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span style="font-size: 16px; font-family: 'times new roman', times, serif;"><?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello world" android:textStyle="bold" android:textSize="18sp" android:layout_margin="12dp" android:padding="12dp" > </TextView> </span> |
The final output of RecyclerView in Android Studio: