Ticker

6/recent/ticker-posts

Implementation of RecyclerView in Android - What is RecyclerView in Android ?

 


RecyclerView is a ViewGroup added to the android studio as a replacement of the GridView and ListView. The recyclerView is an enhancement on both of them (GridView & ListView) and can be found in the latest v-7 support packages. This enhancement is achieved by recycling the views which are out of the visibility of the user. For example, if a user scrolled down to a position where items 4 and 5 are visible; items 1, 2, and 3 would be cleared from the memory to reduce memory consumption.

Implementation: To implement a basic RecyclerView three sub-parts are needed to be constructed which offer the users the degree of control they require in making varying designs of their choice.

  1. The Card Layout: The card layout is an XML layout that will be treated as an item for the list created by the RecyclerView.
  2. The ViewHolder: The ViewHolder is a java class that stores the reference to the card layout views that can be modified during the execution of the program by a list of data obtained either by online databases or added in some other way.
  3. The Data Class: The Data class is a custom java class that acts as a structure for holding the information for every item of the RecyclerView.

 


Implementation of the RecyclerView:

Add the Dependency
implementation "androidx.recyclerview:recyclerview:1.1.0"

custom_layout.xml (card layout)

<?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" android:orientation="vertical"
   
android:layout_width="match_parent" android:layout_height="wrap_content">
    <
androidx.cardview.widget.CardView
       
android:layout_margin="5dp"
       
app:cardCornerRadius="10dp"
       
app:cardElevation="8dp"
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content">
        <
RelativeLayout
           
android:id="@+id/item"
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:padding="10dp">
            <
ImageView
                
android:layout_width="100dp"
               
android:layout_height="100dp"
               
android:id="@+id/image"
               
android:layout_margin="5dp"
               
android:src="@mipmap/ic_launcher"/>
            <
TextView
               
android:id="@+id/name"
               
android:layout_width="wrap_content"
               
android:layout_height="wrap_content"
               
android:layout_toRightOf="@+id/image"
               
android:text="Name"
               
android:textSize="22sp"
               
android:textStyle="bold"
               
android:textColor="#000"
               
android:layout_marginLeft="16dp"/>
            <
TextView
               
android:layout_width="wrap_content"
               
android:layout_height="wrap_content"
               
android:id="@+id/tag"
               
android:text="Tag"
               
android:layout_toRightOf="@+id/image"
               
android:layout_below="@+id/name"
               
android:layout_marginLeft="16dp"
               
android:layout_marginTop="8dp"
               
android:textColor="#8D8D8D"
               
android:textSize="18sp"
               
android:textStyle="italic"/>
        </
RelativeLayout>
    </
androidx.cardview.widget.CardView>
</
LinearLayout>

 

Model.java (data class)

package com.example.recyclerview;

public class Model {
   
//variables related to the custom layout
   
int image;
    String
name, tag;

   
//constructor
   
public Model(int image, String name, String tag) {
       
this.image = image;
       
this.name = name;
       
this.tag = tag;
    }

   
//getter and setter
   
public int getImage() {
       
return image;
    }

   
public void setImage(int image) {
       
this.image = image;
    }

   
public String getName() {
       
return name;
    }

   
public void setName(String name) {
       
this.name = name;
    }

   
public String getTag() {
       
return tag;
    }

   
public void setTag(String tag) {
       
this.tag = tag;
    }
}

 

What is the Adapter?

The adapter is the main code responsible for RecyclerView. It contains all the important methods of dealing with the implementation of RecylcerView. The basic methods for a successful implementation are:

  • onCreateViewHolder: which deals with the inflation of the card layout as an item for the RecyclerView.
  • onBindViewHolder: which deals with the setting of different data and methods related to clicks on particular items of the RecyclerView.
  • getItemCount: which Returns the length of the RecyclerView.
  • onAttachedToRecyclerView: which attaches the adapter to the RecyclerView.

 

Below an example of a custom adapter:

CustomAdapter.java

package com.example.recyclerview;

import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {
   
//create a list to pass our Model class
   
List<Model> modelList;
    Context
context;
   
public CustomAdapter(List<Model> modelList, Context context) {
       
this.modelList = modelList;
       
this.context = context;
    }
   
@NonNull
    @Override
   
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       
//inflate our custom view
       
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_layout,parent,false);
       
return new MyViewHolder(view);
    }
   
@Override
   
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
       
//bind all custom views by its position
        //to get the positions we call our Model class
       
final Model model = modelList.get(position);
        holder.
name.setText(model.getName());
        holder.
tag.setText(model.getTag());
        holder.
imageView.setImageDrawable(context.getResources().getDrawable(model.getImage()));
       

    }
   
@Override
   
public int getItemCount() {
       
return modelList.size();
    }
   
//all the custom view will be hold here or initialize here inside MyViewHolder
   
class MyViewHolder extends RecyclerView.ViewHolder{
        ImageView
imageView;
        TextView
name, tag;
        RelativeLayout
relativeLayout;
       
public MyViewHolder(@NonNull View itemView) {
           
super(itemView);
           
imageView = itemView.findViewById(R.id.image);
           
name = itemView.findViewById(R.id.name);
           
tag = itemView.findViewById(R.id.tag);
           
relativeLayout = itemView.findViewById(R.id.item);
        }
    }
}

 

RecyclerView Implementation in an activity:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
   
tools:context=".MainActivity"
   
android:background="#E9E9E9">

    <
androidx.recyclerview.widget.RecyclerView
       
android:layout_width="match_parent"
       
android:layout_height="match_parent"
       
android:id="@+id/recyclerView"/>

</
RelativeLayout>


MainActivity.java

package com.example.recyclerview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    RecyclerView
recycler;
    List<Model>
modelList;
    RecyclerView.Adapter
adapter;

   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);

       
modelList = new ArrayList<>();
       
recycler = findViewById(R.id.recyclerView);
       
recycler.setHasFixedSize(true);
       
recycler.setLayoutManager(new LinearLayoutManager(this));
       
//call our items
       
modelList.add(new Model(R.drawable.apple,"A","A for Apple"));
       
modelList.add(new Model(R.drawable.ball,"B","B for Ball"));
       
modelList.add(new Model(R.drawable.cat,"C","C for Cat"));
       
modelList.add(new Model(R.drawable.donkey,"D","D for Donkey"));
       
modelList.add(new Model(R.drawable.elephant,"E","E for Elephant"));
       
modelList.add(new Model(R.drawable.fish,"F","F for Fish"));
       
modelList.add(new Model(R.drawable.goat,"G","G for Goat"));
       
modelList.add(new Model(R.drawable.hat,"H","H for Hat"));
       
modelList.add(new Model(R.drawable.ink,"I","I for Ink"));
       
modelList.add(new Model(R.drawable.jug,"J","J for Jug"));
       
//init the adapter with model list and context
       
adapter = new CustomAdapter(modelList,getApplicationContext());
       
//set the adapter into recyclerView
       
recycler.setAdapter(adapter
);
    }
}


Output




Post a Comment

0 Comments