How to Create Recycler View in Android Studio in Hindi || The Developer 2.0

[rtcl_listings]

hello Guys in this video you can learn that how to create a recycler view with custom item design. For that you need a Adapter class to show items in recycler view.

1. What is RecyclerView?

In Android 5.0 Lollipop, Android introduced RecyclerView widget. RecyclerView is flexible and efficient version of ListView. It is an container for rendering larger data set of views that can be recycled and scrolled very efficiently. RecyclerView is like traditional ListView widget, but with more flexibility to customizes and optimized to work with larger datasets. It uses a subclass of RecyclerView.Adapter for providing views that represent items in a data set.

Android SDK doesn’t includes the RecyclerView class. You need to add the following support library graddle dependency to project build.graddle file.

compile 'com.android.support:recyclerview-v7:24.0.0'

This guide explains how to use and customize RecyclerView in Android applications.

2. RecyclerView Example

In the course of this example we will download the data from JSON API, parse and display the items on RecyclerView. As you can notice in the following image, we will be using both RecyclerView and CardView for creating the App UI.

 

Following steps are required to complete the example:

  • Create a new Android Application and add the required graddle dependencies
  • Layout activity and add RecyclerView and ProgressBar
  • Layout the RecyclerView row  item using CardView widget
  • Create a Custom Adapter for RecyclerView
  • Create main Activity to initialize UI, make HTTP Server request and render data on RecyclerView
  • Responding to RecyclerView click event

2.1. Creating Android Project

Let us begin with creating a new Android project in Android Studio. After the project is created, open app build.graddle file and add the following dependency libraries.

dependencies {
    compile 'com.android.support:recyclerview-v7:24.0.0'
    compile 'com.android.support:cardview-v7:24.0.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
    // ...
}

Notice that, we have added RecyclerView, CardView support libraries and Picasso dependency module.

Picasso is an Open Source image loader library created and maintained by Square. It is among the powerful image download and caching library for Android.

Adding Internet Permission:

You might be aware that, Android application must declare all the permissions that are required for application. As we need to download the data form server, we need to add the INTERNET permission. Declare the following permission in AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />

2.2. Declaring content_home Activity Layout

Let us now define the layout for Activity. We will add a RecyclerView and ProgressBar inside a RelativeLayout. The progress bar will be displayed while the data data from REST API is being downloaded.

Create a new file activity_home.xml inside layout resource folder and paste the following snippets.

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".Home"
    tools:showIn="@layout/app_bar_home">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/match_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00BFA5"
        android:scrollbars="vertical"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp" />
</RelativeLayout>

2.3. RecyclerView Matches Layout (matches.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"
    android:layout_width="match_parent" android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#F9FAF9"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/map"
                android:layout_width="418dp"
                android:layout_height="197dp"
                android:scaleType="fitXY"
                app:srcCompat="@drawable/erangel" />

            <TextView
                android:id="@+id/match_title"
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:text="Match Title"
                android:textAlignment="center"
                android:textColor="#FF0C2B18"
                android:textSize="24sp"
                android:textStyle="bold" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="171dp"
                    android:layout_height="wrap_content"
                    android:text="Date:"
                    android:textAlignment="center"
                    android:textColor="#0C2B18"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="06/05/2019 8:00 PM"
                    android:textAlignment="viewStart"
                    android:textColor="#00BFA5"
                    android:textSize="18sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="29dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Match type:"
                    android:textAlignment="center"
                    android:textColor="#FF0C2B18"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/match_type"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="SOLO-TPP"
                    android:textAlignment="viewStart"
                    android:textColor="#00BFA5"
                    android:textSize="18sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textView7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Entry Fee"
                    android:textAlignment="center"
                    android:textColor="#FF0C2B18"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/textView9"
                    android:layout_width="82dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Kill Amount"
                    android:textAlignment="center"
                    android:textColor="#FF0C2B18"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/textView8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Prize"
                    android:textAlignment="center"
                    android:textColor="#FF0C2B18"
                    android:textSize="18sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/entryfee"
                    android:layout_width="78dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="5 Rs"
                    android:textAlignment="center"
                    android:textColor="#00BFA5"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/killamount"
                    android:layout_width="75dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="1 Rs"
                    android:textAlignment="center"
                    android:textColor="#00BFA5"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/prize"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="50 Rs"
                    android:textAlignment="center"
                    android:textColor="#00BFA5"
                    android:textSize="18sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="65dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textView14"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="  " />

                <ProgressBar
                    android:id="@+id/joining_bar"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="132dp"
                    android:layout_height="44dp"
                    android:layout_weight="1"
                    android:max="100"
                    android:progress="50" />

                <TextView
                    android:id="@+id/joining"
                    android:layout_width="wrap_content"
                    android:layout_height="38dp"
                    android:layout_weight="1"
                    android:text="50/100"
                    android:textAlignment="center"
                    android:textColor="#FF0C2B18"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <Button
                    android:id="@+id/join_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#00BFA5"
                    android:text="JOIN"
                    android:textAlignment="center"
                    android:textColor="#F8F8FA"
                    android:textSize="18sp"
                    android:textStyle="bold" />
            </LinearLayout>

        </LinearLayout>
    </android.support.v7.widget.CardView>

</RelativeLayout>

2.4. Creating RecyclerView Adapter

Android RecyclerView includes special kind of adapter which works pretty much same as traditional Android adapters but with additional functionalities.It uses a subclass of RecyclerView.Adapter for providing views that represent items in a data set.

The additional functionalities of RecyclerView.Adapter are:

  • It adds two new methods like onCreateViewHolder() and onBindViewHolder() to organize the code. You must override these two methods for inflate the view and to bind data to the view
  • Implements a ViewHolder by default. Conceptually RecyclerView.ViewHolder works same as the ViewHolder design pattern which we have been using with other Adapters
  • Takes care of the overhead of recycling and gives better performance and scrolling

Create a new class RecyclerViewAdapter.class and copy the following snippets.

package com.sanjay.pubgmaster;

import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;

public class RecycelViewAdapter extends RecyclerView.Adapter<RecycelViewAdapter.MatchViewHolder>{
    private String [] map;
    private String[] title,date,match_type,fess,kill_amount,prize,joining;
    public RecycelViewAdapter(String[] map,String[]title,String[] date, String[] match_type, String[] fees, String[] kill_amount,String[] prize,String[] joining ) {
        this.map=map;
        this.date=date;
        this.match_type = match_type;
        this.fess = fees;
        this.kill_amount = kill_amount;
        this.prize = prize;
        this.joining = joining;
        this.title = title;

    }
    @NonNull
    @Override
    public MatchViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.matches,viewGroup,false );
        MatchViewHolder matchViewHolder = new MatchViewHolder(view);
        return matchViewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull MatchViewHolder viewHolder, int i) {
        String check_map=map[i];
        if(check_map.contains("Erangel") )
        {
            viewHolder.map.setImageResource(R.drawable.erangel);
        }
        else if (check_map.contains("Miramar") )
        {
            viewHolder.map.setImageResource(R.drawable.miramar);
        }
        else if (check_map.contains("Sanhok") )
        {
            viewHolder.map.setImageResource(R.drawable.sanhok);
        }
        else
        {
            viewHolder.map.setImageResource(R.drawable.vikendi);
        }

        viewHolder.match_title.setText(title[i]);
        viewHolder.Fees.setText(fess[i]);
        viewHolder.Kill_amount.setText(kill_amount[i]);
        viewHolder.prize.setText(prize[i]);
        viewHolder.Date.setText(date[i]);
        viewHolder.Match_type.setText(match_type[i]);
        viewHolder.joining.setText(joining[i]+"/100");
        viewHolder.join.setProgress(Integer.parseInt(joining[i]) );

    }

    @Override
    public int getItemCount() {
        return map.length;
    }

   public static class MatchViewHolder extends RecyclerView.ViewHolder {
        ImageView map;
        TextView match_title,Date,Match_type,Fees,Kill_amount,prize,joining;
        ProgressBar join;


       public MatchViewHolder(@NonNull View itemView) {
           super(itemView);
           map= itemView.findViewById(R.id.map);
           match_title=itemView.findViewById(R.id.match_title);
           Fees=itemView.findViewById(R.id.entryfee);
           Kill_amount =itemView.findViewById(R.id.killamount);
           prize=itemView.findViewById(R.id.prize);
           Date=itemView.findViewById(R.id.date);
           Match_type = itemView.findViewById(R.id.match_type);
           joining =itemView.findViewById(R.id.joining);
           join =itemView.findViewById(R.id.joining_bar);

       }
   }
}

Notice that we have created an private ViewHolder class. The ViewHolder class contains the reference to the each of the ui widget on the row.

Click on Below button and complete task showed in pop up to Download the Recycler View Source file