How to create a custom recycler view in Android Studio.

First, we have to add Shimmer Effect dependency in the build.gradle file which is going to help to show animation view in Android Studio.

// Shimmer Effect Dependency
    implementation("com.facebook.shimmer:shimmer:0.5.0")

2nd, we have to implement card_bg.xml in a drawable folder which can help you to design the model_item.xml layout.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="2dp"
        android:color="@color/purple_200" />

    <solid android:color="@color/white" />
    <corners android:radius="5dp" />

</shape>

3rd, we have to create a custom model_item.xml layout with an item-wise layout when you see the recycler view items given below.

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?attr/selectableItemBackground"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="6dp"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true">

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/card_bg">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:orientation="horizontal"
                tools:ignore="UselessParent">

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

                    <RelativeLayout
                        android:layout_width="85dp"
                        android:layout_height="match_parent"
                        android:background="@color/purple_200"
                        android:gravity="center"
                        android:padding="14dp">

                        <ImageView
                            android:id="@+id/modelImg"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:contentDescription="@string/app_name"
                            android:src="@drawable/allahabd" />

                    </RelativeLayout>

                    <View
                        android:layout_width="4dp"
                        android:layout_height="match_parent"
                        android:layout_marginStart="1.5dp"
                        android:background="@color/purple_200" />

                    <View
                        android:layout_width="3dp"
                        android:layout_height="match_parent"
                        android:layout_marginStart="1.5dp"
                        android:background="@color/purple_200" />

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginStart="1.5dp"
                        android:background="@color/purple_200" />

                    <View
                        android:layout_width="1dp"
                        android:layout_height="match_parent"
                        android:layout_marginStart="1.5dp"
                        android:background="@color/purple_200" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginStart="8dp"
                    android:gravity="center_vertical"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/modelTxt"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:fontFamily="@font/alata"
                        android:text="@string/model_txt"
                        android:textColor="@color/purple_200"
                        android:textSize="20sp" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="-6dp"
                        android:orientation="horizontal">

                        <View
                            android:layout_width="4dp"
                            android:layout_height="10dp"
                            android:layout_gravity="center_vertical"
                            android:layout_marginStart="1dp"
                            android:layout_marginTop="1dp"
                            android:background="@color/purple_200" />

                        <View
                            android:layout_width="12dp"
                            android:layout_height="18dp"
                            android:layout_gravity="center_vertical"
                            android:layout_marginTop="1dp"
                            android:layout_marginStart="-4.5dp"
                            android:background="@drawable/arrow_right" />


                        <TextView
                            android:id="@+id/modelTxtDesc"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginStart="-2dp"
                            android:fontFamily="@font/alatsi"
                            android:text="@string/sector_name"
                            android:textColor="@color/purple_200"
                            android:textSize="12sp" />


                    </LinearLayout>


                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>

</androidx.cardview.widget.CardView>

4th, We have to create a recycler view along with a banner ad space system under the activity_main.xml layout.

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/bannerAdContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0" />


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/bannerAdContainer"
            tools:listitem="@layout/model_layout" />

    </androidx.constraintlayout.widget.ConstraintLayout>

5th, we have to create a search icon code that helps to set the icon on your Application layout.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FFFFFF"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z" />
</vector>
This image has an empty alt attribute; its file name is 24082023c-1024x477.png

6th, We have to create some string values for best performance purposes in the strings.xml layout.

<string name="model_txt">Bank Name List</string>
    <string name="search">Search</string>
    <string name="sector_name">Sector Name</string>

7th, Now we have to create an ItemClickListener.java interface class to use in the recycler view item clicked method purpose.

import android.view.View;

public interface ItemClickListener {
void onItemClick(View view, int position);

8th, we have to create a Model.java class. In this java class, we can fetch text and image method which is used in recycler view.

public class Model {
    private String title, disc;
    private int img;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDisc() {
        return disc;
    }

    public void setDisc(String disc) {
        this.disc = disc;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }
}

9th, we have to create a Holder.java class which can help to create a recycler view.

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

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

import com.facebook.shimmer.ShimmerFrameLayout;

public class Holder extends RecyclerView.ViewHolder implements View.OnClickListener {
    ImageView imageView;
    TextView textView, disc;
    private ItemClickListener itemClickListener;
    ShimmerFrameLayout shimmerFrameLayout;

    public Holder(@NonNull View itemView) {
        super(itemView);
        this.imageView = itemView.findViewById(R.id.modelImg);
        this.textView = itemView.findViewById(R.id.modelTxt);
        this.disc = itemView.findViewById(R.id.modelTxtDesc);
        this.shimmerFrameLayout = itemView.findViewById(R.id.shimmerLayout);
        itemView.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        this.itemClickListener.onItemClick(v, getLayoutPosition());

    }

    void setItemClickListener(ItemClickListener listener) {
        this.itemClickListener = listener;
    }
}

10th, we have to create an Adapter.java class which is used to show the recycler view Also we have to use the items click method. Also, we have to make the search menu filtered method.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Filter;
import android.widget.Filterable;

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

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

public class Adapter extends RecyclerView.Adapter<Holder> implements Filterable {

    Context context;
    private final ArrayList<Model> models;
    private final ArrayList<Model> modelItemFull;
    boolean showShimmer = true;

    public Adapter(Context context, ArrayList<Model> models) {
        this.context = context;
        this.models = models;
        this.modelItemFull = new ArrayList<>(models);
    }

    @NonNull
    @Override
    public Holder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.model_layout, null);
        return new Holder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull Holder holder, int position) {
        if (showShimmer) {
            holder.shimmerFrameLayout.startShimmer();
        } else {
            holder.shimmerFrameLayout.stopShimmer();
            holder.shimmerFrameLayout.setShimmer(null);
            holder.imageView.setImageResource(models.get(position).getImg());
            holder.textView.setText(models.get(position).getTitle());
            holder.disc.setText(models.get(position).getDisc());
            holder.setItemClickListener(new ItemClickListener() {
                @Override
                public void onItemClick(View view, int position) {
                    switch (models.get(position).getTitle()) {

                    }
                }
            });
        }

    }

    @Override
    public int getItemCount() {
        int SHIMMER_ITEM_NUMBER = 10;
        return showShimmer ? SHIMMER_ITEM_NUMBER : models.size();
    }

    @Override
    public Filter getFilter() {
        return itemFilter;
    }

    public Filter itemFilter = new Filter() {
        @Override
        protected FilterResults performFiltering(CharSequence constraint) {
            List<Model> filteredList = new ArrayList<>();
            if (constraint == null || constraint.length() == 0) {
                filteredList.addAll(modelItemFull);
            } else {
                String filterPattern = constraint.toString().toLowerCase().trim();
                for (Model item : modelItemFull) {
                    if (item.getTitle().toLowerCase().contains(filterPattern)) {
                        filteredList.add(item);
                    }
                }
            }
            FilterResults results = new FilterResults();
            results.values = filteredList;
            return results;
        }

        @Override
        protected void publishResults(CharSequence constraint, FilterResults results) {
            models.clear();
            models.addAll((List) results.values);
            notifyDataSetChanged();

        }
    };
}

11th, Finally, we have to implement code in the MainActivity.java class.

private Adapter adapter;


RecyclerView firstRecyclerView = findViewById(R.id.recyclerView);
        firstRecyclerView.setLayoutManager(new GridLayoutManager(this, 1));
        firstRecyclerView.setItemAnimator(new DefaultItemAnimator());
        adapter = new Adapter(this, getModels());
        firstRecyclerView.setAdapter(adapter);

        new Handler().postDelayed(() -> {
            getModels();
            adapter.showShimmer = false;
            adapter.notifyDataSetChanged();
        }, 3000);


    private ArrayList<Model> getModels() {
        ArrayList<Model> models = new ArrayList<>();
        Model click2code;

        click2code = new Model();
        click2code.setTitle("Allahabad Bank");
        click2code.setDisc("Private Sector Bank");
        click2code.setImg(R.drawable.allahabd);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Andhra Bank");
        click2code.setDisc("Private Sector Bank");
        click2code.setImg(R.drawable.andhra);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Axis Bank");
        click2code.setImg(R.drawable.axis);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Bandhan Bank");
        click2code.setImg(R.drawable.bandhan);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Bank of Baroda");
        click2code.setImg(R.drawable.baroda);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Bank of India");
        click2code.setImg(R.drawable.boi);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Bank of Maharashtra");
        click2code.setImg(R.drawable.maharashtra);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Canara Bank");
        click2code.setImg(R.drawable.canara);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Catholic Syrian Bank");
        click2code.setImg(R.drawable.catholic);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Central Bank of India");
        click2code.setImg(R.drawable.cbi);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("City Union Bank");
        click2code.setImg(R.drawable.cityunion);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Corporation Bank");
        click2code.setImg(R.drawable.corp);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("DCB Bank");
        click2code.setImg(R.drawable.dcb);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Dhanlaxmi Bank");
        click2code.setImg(R.drawable.dhanlaxmi);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Federal Bank");
        click2code.setImg(R.drawable.federal);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("HDFC Bank");
        click2code.setImg(R.drawable.hdfc);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("ICICI Bank");
        click2code.setImg(R.drawable.icici);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("IDBI Bank");
        click2code.setImg(R.drawable.idbi);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("IDFC Bank");
        click2code.setImg(R.drawable.idfc);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("India Post Payment Bank");
        click2code.setImg(R.drawable.india_post);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Indian Bank");
        click2code.setImg(R.drawable.indian);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Indian Overseas Bank");
        click2code.setImg(R.drawable.ios);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Indusind Bank");
        click2code.setImg(R.drawable.indusind);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Jammu & Kashmir Bank");
        click2code.setImg(R.drawable.jk);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Jharkhand Rajya Gramin Bank");
        click2code.setImg(R.drawable.jrgb_bank);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Karnataka Bank");
        click2code.setImg(R.drawable.karnataka);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Karur Vysya Bank");
        click2code.setImg(R.drawable.karur);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Kotak Mahindra Bank");
        click2code.setImg(R.drawable.kotak);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Lakshmi Vilas Bank");
        click2code.setImg(R.drawable.laxmi);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Nainital Bank");
        click2code.setImg(R.drawable.nainital);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Oriental Bank of Commerce");
        click2code.setImg(R.drawable.obc);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Punjab National Bank");
        click2code.setImg(R.drawable.pnb);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Punjab & Sind Bank");
        click2code.setImg(R.drawable.psb);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("RBL Bank");
        click2code.setImg(R.drawable.rbl);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("State Bank of India");
        click2code.setDisc("Public Sector Bank");
        click2code.setImg(R.drawable.sbi);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("South Indian Bank");
        click2code.setImg(R.drawable.southindian);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Syndicate Bank");
        click2code.setImg(R.drawable.syndicate);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("UCO Bank");
        click2code.setImg(R.drawable.uco);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("Union Bank of India");
        click2code.setImg(R.drawable.union);
        models.add(click2code);

        click2code = new Model();
        click2code.setTitle("United Bank of India");
        click2code.setImg(R.drawable.united);
        models.add(click2code);

        return models;
    }


 @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.action_bar_menu, menu);
        MenuItem item = menu.findItem(R.id.search);
        androidx.appcompat.widget.SearchView searchView = (androidx.appcompat.widget.SearchView) MenuItemCompat.getActionView(item);
        searchView.setQueryHint("Type Any Bank Name...");

        searchView.setOnQueryTextListener(new androidx.appcompat.widget.SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                adapter.getFilter().filter(newText);
                return false;
            }
        });

        return true;
    }

Post Related Videos

Related Post

× Chat Now