Android Customize list using RecyclerView

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Customized list Using Recycler View Thumbnail

Hello guys Today we will Discuss about Recycler view which is a second option As a list view But now a days Everyone Prefer Recycler view as compared to BaseAdapter because of
Reuses cells while scrolling up/down – this is possible with implementing View Holder in the listView adapter, but it was an optional thing, while in the RecycleView it’s the default way of writing adapter.

Decouples list from its container – so you can put list items easily at run time in the different containers (linearLayout, gridLayout) with setting LayoutManager.

Animates common list actions – Animations are decoupled and delegated to ItemAnimator.

This is our Output

So guys Lets Start….


Create new Project

How to Create Project in android Studio First Screen
how to Select minimum sdk in android studio second screen
Select Empty layout in Android studio
 
Click on Next
Name your Activity >>Finish

To start With Recycler View First you have to add this Dependency in build.gradle(Module: app)

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

the Value after v7 can vary as per your project  buildToolsVersion Which you can find in build.gradle(Module: app)

This is the Project Structure

What is the Project structure of android studio

Firstly make one file if not exists name as dimen.xml in values directory

and add this code in that

   <resources>  
   <dimen name="food_namesize">30dp</dimen>  
   <dimen name="food_pricesize">20dp</dimen>  
   <dimen name="food_ratingsize">15dp</dimen>  
   
 </resources>  

In activity_main.xml add Recyclerview like this:-

<?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"  
   android:background="@color/colorgray"  
   tools:context="com.targetandroid.info.recyclerview.MainActivity">  
   <android.support.v7.widget.RecyclerView  
     android:layout_height="match_parent"  
     android:layout_width="match_parent"  
     android:id="@+id/rv_recyclerview">  
   </android.support.v7.widget.RecyclerView>  
 </LinearLayout>  

Make a Custom Layout to Define how the Each item of Recycler view will appear on screen

make a layout file in the res directory

I named it As
recycler_layout.xml

<?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="horizontal"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   android:weightSum="10"  
   android:layout_marginBottom="10dp"  
   >  
   
   <ImageView  
     android:layout_width="0dp"  
     android:layout_height="match_parent"  
     android:layout_weight="4"  
     android:padding="2dp"  
     android:src="@drawable/burger"  
     android:scaleType="centerCrop"  
     android:id="@+id/imv_recycler"  
     />  
   <LinearLayout  
     android:layout_width="0dp"  
     android:layout_height="wrap_content"  
     android:layout_weight="6"  
     android:orientation="vertical"  
     android:padding="10dp">  
   
     <TextView  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Food name"  
       android:id="@+id/tvtitle_recycler"  
       android:textStyle="bold"  
       android:textSize="@dimen/food_namesize"/>  
   
     <TextView  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="rating"  
       android:id="@+id/tvinfo_recycler"  
       android:textSize="@dimen/food_ratingsize"/>  
   
     <TextView  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="price"  
       android:textStyle="bold"  
       android:id="@+id/tvprice_recycler"  
       android:textSize="@dimen/food_pricesize"/>  
   </LinearLayout>  
   
 </LinearLayout>


Now after this make a Pojo (Plain Old Java Object) Class and Make some private variable with Constructor and getter and setter method

in Java, Pojo class is used to get and set the values which we want to display somewhere
Here, we are using this to get our value which we want to display in our Recyclerview


So make simple class named as Products.java
and add this code to that

package com.targetandroid.info.recyclerview;

/**
 * Created by Faizan on 24-04-2016.
 */
public class Products {

    private String name;
    private float rating;
    private double price;
    private int imageid;

    public Products(String name, float rating, double price, int imageid){
        this.name=name;
        this.rating=rating;
        this.price=price;
        this.imageid=imageid;
    }


    public float getRating() {
        return rating;
    }

    public void setRating(float rating) {
        this.rating = rating;
    }
    public String getName() {
        return name;
    }

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

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }


    public int getImageid() {
        return imageid;
    }

    public void setImageid(int imageid) {
        this.imageid = imageid;
    }

}

Now after This Make a class to implement our adapter for recycler view
So make simple class named as RecyclerAdapter.java
extend that with RecyclerView.Adapter

after this, we have to implement some Override methods like

onCreateViewHolder;
onBindViewHolder;
getItemCount();

and we have made one class as our ViewHolder in Adapter only named that class as Myviewholder
extends it withRecyclerView.ViewHolder

Code for Myviewholder class will like

public static class Myviewholder extends RecyclerView.ViewHolder{
        ImageView imv_recycler;
        TextView tvtitle_recycler,tvinfo_recycler,tvprice_recycler;

        public Myviewholder(View view){
            super(view);

            imv_recycler=(ImageView)view.findViewById(R.id.imv_recycler);
            tvtitle_recycler=(TextView)view.findViewById(R.id.tvtitle_recycler);
            tvinfo_recycler=(TextView)view.findViewById(R.id.tvinfo_recycler);
            tvprice_recycler=(TextView)view.findViewById(R.id.tvprice_recycler);
        }



    }

The Full Code For RecyclerAdapter  class will like

package com.targetandroid.info.recyclerview;

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.TextView;

import java.util.List;

/**
 * Created by FaizanSayyed on 24-04-2016.
 */
public class RecyclerAdapter extends RecyclerView.Adapter {


    List plist;

    public RecyclerAdapter(List plist){
        this.plist=plist;

    }


    @Override
    public Myviewholder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater= LayoutInflater.from(parent.getContext());
        View view= inflater.inflate(R.layout.recycler_layout,parent,false);
        Myviewholder myviewholder= new Myviewholder(view);

        return myviewholder;
    }

    @Override
    public void onBindViewHolder(RecyclerAdapter.Myviewholder holder, int position) {
        Products products=plist.get(position);
        holder.imv_recycler.setImageResource(products.getImageid());
        holder.tvtitle_recycler.setText(products.getName());
        holder.tvinfo_recycler.setText(String.valueOf(products.getRating()));
        holder.tvprice_recycler.setText(String.valueOf(products.getPrice()));

    }

    @Override
    public int getItemCount() {
        return plist==null?0:plist.size();
    }


    public static class Myviewholder extends RecyclerView.ViewHolder{
        ImageView imv_recycler;
        TextView tvtitle_recycler,tvinfo_recycler,tvprice_recycler;

        public Myviewholder(View view){
            super(view);

            imv_recycler=(ImageView)view.findViewById(R.id.imv_recycler);
            tvtitle_recycler=(TextView)view.findViewById(R.id.tvtitle_recycler);
            tvinfo_recycler=(TextView)view.findViewById(R.id.tvinfo_recycler);
            tvprice_recycler=(TextView)view.findViewById(R.id.tvprice_recycler);
        }



    }
}

In (Myviewholder onCreateViewHolder)

Myviewholder onCreateViewHolder(ViewGroup parent, int viewType)

we are Inflating our customize layout on Recycler View
(And In (onBindViewHolder

onBindViewHolder(RecyclerAdapter.Myviewholder holder, int position)

We are Setting the values to Every item to our list view Now Finally come to MainActivity.java  in main activity we are setting the value in POJO and getting it in our RecyclerAdapter to set value in Recyclerview here is the full code of MainActivity.java

package com.targetandroid.info.recyclerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

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

public class MainActivity extends AppCompatActivity {


    RecyclerView rv_recyclerview;
    List plist;

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

        //Pointing our variable to its ID
        rv_recyclerview=(RecyclerView)findViewById(R.id.rv_recyclerview);

        //Initializing Our List
        plist=new ArrayList<>();


        //code is to set the value in recycler view
       //we are sending value as per our Constructor on POJO class

        plist.add(new Products("Pizza",4.5f,20000,R.drawable.pizza));
        plist.add(new Products("Burger",4.8f,3000,R.drawable.burger));
        plist.add(new Products("Sandwich", 3.6f, 15000, R.drawable.sandwich));
        plist.add(new Products("Pasta", 2.4f, 25000, R.drawable.pasta));
        plist.add(new Products("Soup", 4.0f, 25000, R.drawable.soup));
        plist.add(new Products("French Fries", 3.2f, 25000, R.drawable.frenchfries));
        plist.add(new Products("Noodles", 4.5f, 25000, R.drawable.noodles));


        RecyclerAdapter recycleadapter=new RecyclerAdapter(plist);//send the plist into adapter
        rv_recyclerview.setAdapter(recycleadapter);// set the adapter into recyclerview

       //Setting the Layout manager to our recycler view
        
       // their are two types of setting layout manager to recyclerview GridLayoutManager,LinearLayoutManager


        LinearLayoutManager layoutmanage= new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false);
        // GridLayoutManager layoutmanage=new GridLayoutManager(this,3);
        rv_recyclerview.setLayoutManager(layoutmanage);


    }
}

now its done you can Run the Project and Can see the Output it  will be like

Customize list using Recycler view in android final output
For More Tutorial Subscribe to my Blog So you will get all the updates in your mail
Thank You

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

5 Comments

  1. Avatar Saif December 15, 2017 Reply
    • Faizan Sayyed Faizan SayyedAuthor December 23, 2017 Reply

Add a Comment

Your email address will not be published. Required fields are marked *