RecyclerView the easiest way – Android development

Hey what’s up guys, hope you are coding bug-free. You are learning android app development and have a problem understanding the RecyclerView? Don’t worry guys your pal is here to help. Just stick with me and I’m gonna explain the android recycler view in the easiest way possible. So, let’s begin this boogie-woogie.

What is recycler view?

First, let me show you a screenshot of my app so that you have an idea of what a recycler view is.

So in this app, I am showing a list of movies that are currently playing. It’s a long list of movies, you just keep scrolling and you will find more and more movies.

So now that you have a visual idea of the recycler view, So now let’s understand this in text.

So what recycler view is that It is an efficient way of displaying a large set of data easily. You just give data to the recycler view and define how each item looks and the RecyclerView library will dynamically create the elements when they’re needed.

Now let’s see how you can implement a recycler view?

To implement RecyclerView you need a few things-

Adapter – RecyclerView works with the adapter to display the data.

RecyclerView – It will use the adapter and also a layout manager to specify how the data should be positioned.

ViewHolder – You define what view the RecyclerView should use for each data item using ViewHolder. In simple words, it holds the view you want to the RecyclerView to display.

Just keep these three things in mind and you can implement RecyclerView easily.

Ok now is the example time.

In this example, I am showing a list of names using RecyclerView.

activity_main.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:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

friends_card.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="130dp"
    android:layout_marginStart="15dp"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="12dp"
    android:layout_marginEnd="15dp"
    android:layout_marginRight="15dp"
    app:cardBackgroundColor="@color/cardview_light_background"
    app:cardElevation="12dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraint_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/name"
            android:layout_width="191dp"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:textColor="#C51162"
            android:textSize="14sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

MainActivity.java

package com.example.friends;

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

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    // Data to display.
    String[] names={"William", "Sophia", "James", "Amelia","Henry",
                   "Charlotte", "Oliver", "Olivia", "Noah", "Liam" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView=findViewById(R.id.recyclerView);
        //Give adapter to RecyclerView
        recyclerView.setAdapter(new FriendsAdapter(names));

        //layout manager specifies how to arrange the views. Here I am using LinearLayoutManager.
        //Recycler view gives you more
        //options. You can choose to display views in a linear list, a grid, or
        //a staggered grid.
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
    }
}

FriendsAdapter.java

package com.example.friends;

import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;

public class FriendsAdapter extends RecyclerView.Adapter<FriendsAdapter.FriendsViewHolder>{

    String[] names;
    FriendsAdapter(String[] names)
    {
        this.names=names;
    }

    //RecyclerView will call this method when it needs to create a ViewHolder
    @NonNull
    @Override
    public FriendsViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        CardView cardView=(CardView) LayoutInflater.from(parent.getContext())
                .inflate(R.layout.friends_card,parent,false);
        return new FriendsViewHolder(cardView);
    }

    //RecyclerView will call this method when it needs a ViewHolder for new piece of data.
    //This method will set the data to the ViewHolder.
    @Override
    public void onBindViewHolder(@NonNull FriendsViewHolder holder, int position) {

        TextView nameText=holder.friendCard.findViewById(R.id.name);
        nameText.setText(names[position]);

    }


    @Override
    // Number of items to display
    public int getItemCount() {
        return names.length;
    }

    //Each ViewHolder will hold a CardView
    public static class FriendsViewHolder extends RecyclerView.ViewHolder
    {
        private CardView friendCard;

        public FriendsViewHolder(@NonNull CardView v) {
            super(v);
            friendCard=v;
        }
    }
}



So what happening in the MainActivity.java is that we are first creating RecyclerView and giving the adapter instance to it and we are setting data source(names array) to the adapter and then we are telling the RecyclerView how to organize data by setting layout manager.

Now RecyclerView will tell the adapter to create ViewHolder by calling its onCreateView() method and then it will give the ViewHolder instance to onBindViewHolder() method so that it can set the data to the view which ViewHolder is holding, in this case, setting name to the TextView inside CardView.

So this is the end of this post.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: